ka-table - npm Package Compare versions

Comparing version 2.10.2 to 3.0.1

Components/CellEditorBoolean/CellEditorBoolean.js

 import React from 'react';
+import { closeEditor, updateCellValue } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
 import { isEmpty } from '../../Utils/CommonUtils';
-import { replaceValue } from '../../Utils/DataUtils';
 var CellEditorBoolean = function (_a) {
-    var column = _a.column, dispatch = _a.dispatch, rowData = _a.rowData, rowKeyField = _a.rowKeyField, value = _a.value;
-    return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.checkbox, type: 'checkbox', ref: function (elem) { return elem && (elem.indeterminate = isEmpty(value)); }, checked: value || false, onChange: function (event) { return dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, event.currentTarget.checked) }); }, onBlur: function () {
-            var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };
-            dispatch(ActionType.CloseEditor, { cell: cell });
+    var column = _a.column, dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue, value = _a.value;
+    return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.checkbox, type: 'checkbox', ref: function (elem) { return elem && (elem.indeterminate = isEmpty(value)); }, checked: value || false, onChange: function (event) {
+            return dispatch(updateCellValue(rowKeyValue, column.key, event.currentTarget.checked));
+        }, onBlur: function () {
+            dispatch(closeEditor(rowKeyValue, column.key));
         } }));
 };
 export default CellEditorBoolean;

Components/CellEditorDate/CellEditorDate.js

 import React from 'react';
+import { closeEditor, updateCellValue } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
-import { getValueByColumn, replaceValue } from '../../Utils/DataUtils';
 import { getDateInputValue } from '../../Utils/DateUtils';
 var CellEditorDate = function (_a) {
-    var column = _a.column, dispatch = _a.dispatch, rowData = _a.rowData, rowKeyField = _a.rowKeyField;
-    var fieldValue = getValueByColumn(rowData, column);
-    var value = fieldValue && getDateInputValue(fieldValue);
-    return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.dateInput, type: 'date', value: value || '', onChange: function (event) {
+    var column = _a.column, dispatch = _a.dispatch, rowKeyValue = _a.rowKeyValue, value = _a.value;
+    var inputValue = value && getDateInputValue(value);
+    return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.dateInput, type: 'date', value: inputValue || '', onChange: function (event) {
             var targetValue = event.currentTarget.value;
             var newValue = targetValue ? new Date(targetValue) : null;
-            dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, newValue) });
+            dispatch(updateCellValue(rowKeyValue, column.key, newValue));
         }, onBlur: function () {
-            var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };
-            dispatch(ActionType.CloseEditor, { cell: cell });
+            dispatch(closeEditor(rowKeyValue, column.key));
         } }));
 };
 export default CellEditorDate;

Components/CellEditorNumber/CellEditorNumber.js

 import React from 'react';
+import { closeEditor, updateCellValue } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
-import { replaceValue } from '../../Utils/DataUtils';
 var CellEditorNumber = function (_a) {
-    var column = _a.column, dispatch = _a.dispatch, field = _a.field, rowData = _a.rowData, value = _a.value, rowKeyField = _a.rowKeyField;
+    var column = _a.column, dispatch = _a.dispatch, value = _a.value, rowKeyValue = _a.rowKeyValue;
     return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.numberInput, type: 'number', value: value === null || value === undefined ? '' : value, onChange: function (event) {
             var newValue = event.currentTarget.value !== '' ? Number(event.currentTarget.value) : null;
-            dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, newValue) });
+            dispatch(updateCellValue(rowKeyValue, column.key, newValue));
         }, onBlur: function () {
-            var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };
-            dispatch(ActionType.CloseEditor, { cell: cell });
+            dispatch(closeEditor(rowKeyValue, column.key));
         } }));
 };
 export default CellEditorNumber;

Components/CellEditorState/CellEditorState.js

@@ -13,2 +13,3 @@ var __assign = (this && this.__assign) || function () {
 import React, { useCallback, useEffect, useState } from 'react';
+import { closeEditor, updateCellValue } from '../../actionCreators';
 import { ActionType } from '../../enums';
@@ -21,12 +22,12 @@ import { getValueByColumn, replaceValue } from '../../Utils/DataUtils';
 var CellEditorState = function (props) {
-    var column = props.column, rowData = props.rowData, rowKeyField = props.rowKeyField, dispatch = props.dispatch;
+    var column = props.column, rowData = props.rowData, rowKeyValue = props.rowKeyValue, dispatch = props.dispatch;
     var _a = useState(rowData), rowDataState = _a[0], changeValue = _a[1];
     var validationValue = getValidationValue(rowDataState, column);
-    var onValueStateChange = function (rowValue) {
-        changeValue(rowValue);
+    var onValueStateChange = function (action) {
+        var newRowValue = replaceValue(rowData, column, action.value);
+        changeValue(newRowValue);
     };
     var close = useCallback(function () {
-        var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };
-        dispatch(ActionType.CloseEditor, { cell: cell });
-    }, [dispatch, column, rowData, rowKeyField]);
+        dispatch(closeEditor(rowKeyValue, column.key));
+    }, [dispatch, column, rowKeyValue]);
     var closeHandler = useCallback(function () {
@@ -36,19 +37,19 @@ if (!validationValue) {
             if (getValueByColumn(rowData, column) !== newValue) {
-                dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, newValue) });
+                dispatch(updateCellValue(rowKeyValue, column.key, newValue));
             }
             close();
         }
-    }, [validationValue, dispatch, close, rowDataState, column, rowData]);
+    }, [validationValue, dispatch, close, rowDataState, column, rowData, rowKeyValue]);
     useEffect(function () {
         return addEscEnterKeyEffect(close, closeHandler);
     }, [close, closeHandler]);
-    var dispatchHandler = function (action, actionData) {
-        if (action === ActionType.CloseEditor) {
+    var dispatchHandler = function (action) {
+        if (action.type === ActionType.CloseEditor) {
             closeHandler();
         }
-        else if (action === ActionType.ChangeRowData) {
-            onValueStateChange(actionData.newValue);
+        else if (action.type === ActionType.UpdateCellValue) {
+            onValueStateChange(action);
         }
         else {
-            dispatch(action, actionData);
+            dispatch(action);
         }
@@ -55,0 +56,0 @@ };

Components/CellEditorString/CellEditorString.js

 import React from 'react';
+import { closeEditor, updateCellValue } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
-import { replaceValue } from '../../Utils/DataUtils';
 var CellEditorString = function (_a) {
-    var column = _a.column, dispatch = _a.dispatch, rowData = _a.rowData, value = _a.value, rowKeyField = _a.rowKeyField;
+    var column = _a.column, dispatch = _a.dispatch, value = _a.value, rowKeyValue = _a.rowKeyValue;
     return (React.createElement("input", { autoFocus: true, type: 'text', className: defaultOptions.css.textInput, value: value || '', onChange: function (event) {
-            dispatch(ActionType.ChangeRowData, { newValue: replaceValue(rowData, column, event.currentTarget.value) });
+            dispatch(updateCellValue(rowKeyValue, column.key, event.currentTarget.value));
         }, onBlur: function () {
-            var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };
-            dispatch(ActionType.CloseEditor, { cell: cell });
+            dispatch(closeEditor(rowKeyValue, column.key));
         } }));
 };
 export default CellEditorString;

Components/CellText/CellText.js

@@ -13,7 +13,8 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
-import { ActionType, EditingMode } from '../../enums';
+import { openEditor } from '../../actionCreators';
+import { EditingMode } from '../../enums';
 import { isEmpty } from '../../Utils/CommonUtils';
 import { extendProps } from '../../Utils/PropsUtils';
 var CellText = function (props) {
-    var childAttributes = props.childAttributes, column = props.column, format = props.column.format, dispatch = props.dispatch, editingMode = props.editingMode, rowData = props.rowData, rowKeyField = props.rowKeyField, value = props.value;
+    var childAttributes = props.childAttributes, column = props.column, format = props.column.format, dispatch = props.dispatch, editingMode = props.editingMode, rowKeyValue = props.rowKeyValue, value = props.value;
     var formatedValue = format ? format(value) : !isEmpty(value) && value.toString();
@@ -24,4 +25,3 @@ var componentProps = {
             if (editingMode === EditingMode.Cell) {
-                var cell = { columnKey: column.key, rowKey: rowData[rowKeyField] };
-                dispatch(ActionType.OpenEditor, { cell: cell });
+                dispatch(openEditor(rowKeyValue, column.key));
             }
@@ -28,0 +28,0 @@ },

Components/FilterRowBoolean/FilterRowBoolean.js

@@ -1,15 +0,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
+import { updateFilterRowValue } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
 import { isEmpty } from '../../Utils/CommonUtils';
@@ -19,3 +8,3 @@ var FilterRowBoolean = function (_a) {
     var value = column.filterRowValue;
-    return (React.createElement("input", { autoFocus: true, className: defaultOptions.css.checkbox, type: 'checkbox', ref: function (elem) { return elem && (elem.indeterminate = isEmpty(value)); }, checked: value || false, onChange: function (event) {
+    return (React.createElement("input", { className: defaultOptions.css.checkbox, type: 'checkbox', ref: function (elem) { return elem && (elem.indeterminate = isEmpty(value)); }, checked: value || false, onChange: function (event) {
             var filterRowValue = event.currentTarget.checked;
@@ -27,6 +16,5 @@ if (value === false) {
             }
-            var updatedColumn = __assign(__assign({}, column), { filterRowValue: filterRowValue });
-            dispatch(ActionType.ChangeFilterRow, { column: updatedColumn });
+            dispatch(updateFilterRowValue(column.key, filterRowValue));
         } }));
 };
 export default FilterRowBoolean;

Components/FilterRowDate/FilterRowDate.js

@@ -1,15 +0,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
+import { updateFilterRowValue } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
 import { getDateInputValue } from '../../Utils/DateUtils';
@@ -23,6 +12,5 @@ var FilterRowDate = function (_a) {
             var filterRowValue = targetValue ? new Date(targetValue) : null;
-            var updatedColumn = __assign(__assign({}, column), { filterRowValue: filterRowValue });
-            dispatch(ActionType.ChangeFilterRow, { column: updatedColumn });
+            dispatch(updateFilterRowValue(column.key, filterRowValue));
         } }));
 };
 export default FilterRowDate;

Components/FilterRowNumber/FilterRowNumber.js

@@ -1,15 +0,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
+import { updateFilterRowValue } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
 var FilterRowNumber = function (_a) {
@@ -20,6 +9,5 @@ var column = _a.column, dispatch = _a.dispatch;
             var filterRowValue = event.currentTarget.value !== '' ? Number(event.currentTarget.value) : null;
-            var updatedColumn = __assign(__assign({}, column), { filterRowValue: filterRowValue });
-            dispatch(ActionType.ChangeFilterRow, { column: updatedColumn });
+            dispatch(updateFilterRowValue(column.key, filterRowValue));
         } }));
 };
 export default FilterRowNumber;

Components/FilterRowString/FilterRowString.js

@@ -1,22 +0,10 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import React from 'react';
+import { updateFilterRowValue } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
 var FilterRowString = function (_a) {
     var column = _a.column, dispatch = _a.dispatch;
     return (React.createElement("input", { type: 'text', className: defaultOptions.css.textInput, value: column.filterRowValue || '', onChange: function (event) {
-            var updatedColumn = __assign(__assign({}, column), { filterRowValue: event.currentTarget.value });
-            dispatch(ActionType.ChangeFilterRow, { column: updatedColumn });
+            dispatch(updateFilterRowValue(column.key, event.currentTarget.value));
         } }));
 };
 export default FilterRowString;

Components/GroupRowContent/GroupRowContent.js

 import React from 'react';
+import { updateGroupsExpanded } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType } from '../../enums';
 import EmptyCells from '../EmptyCells/EmptyCells';
@@ -12,5 +12,3 @@ var GroupRowContent = function (props) {
                 React.createElement("div", { onClick: function () {
-                        dispatch(ActionType.UpdateGroupsExpanded, {
-                            groupKey: groupKey,
-                        });
+                        dispatch(updateGroupsExpanded(groupKey));
                     }, className: isExpanded
@@ -17,0 +15,0 @@ ? defaultOptions.css.iconGroupArrowExpanded : defaultOptions.css.iconGroupArrowCollapsed }),

Components/HeadCellContent/HeadCellContent.js

 import * as React from 'react';
+import { updateSortDirection } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { ActionType, SortDirection, SortingMode } from '../../enums';
-import { getColumnWithUpdatedSortDirection } from '../../Utils/HeadRowUtils';
+import { SortDirection, SortingMode } from '../../enums';
 var HeadCellContent = function (props) {
@@ -10,11 +10,10 @@ var headCell = props.column.headCell;
     }
-    var column = props.column, _a = props.column, title = _a.title, sortDirection = _a.sortDirection, dispatch = props.dispatch, sortingMode = props.sortingMode;
+    var column = props.column, dispatch = props.dispatch, sortingMode = props.sortingMode;
     var isSortingEnabled = sortingMode === SortingMode.Single;
     var sortClick = isSortingEnabled ? function () {
-        var updatedColumn = getColumnWithUpdatedSortDirection(column);
-        dispatch(ActionType.ChangeSorting, { column: updatedColumn });
+        dispatch(updateSortDirection(column.key));
     } : undefined;
     return (React.createElement("div", { className: "ka-thead-cell-content " + (isSortingEnabled ? 'ka-pointer' : ''), onClick: sortClick },
-        React.createElement("span", null, title),
-        sortDirection && isSortingEnabled && (React.createElement("span", { className: sortDirection === SortDirection.Ascend
+        React.createElement("span", null, column.title),
+        column.sortDirection && isSortingEnabled && (React.createElement("span", { className: column.sortDirection === SortDirection.Ascend
                 ? defaultOptions.css.iconSortArrowUp
@@ -21,0 +20,0 @@ : defaultOptions.css.iconSortArrowDown }))));

Components/Table/Table.js

@@ -16,7 +16,4 @@ var __assign = (this && this.__assign) || function () {
 import { wrapDispatch } from '../../Utils/ActionUtils';
-import { filterData, searchData } from '../../Utils/FilterUtils';
-import { getExpandedGroups, getGroupedData } from '../../Utils/GroupUtils';
-import { extendProps } from '../../Utils/PropsUtils';
-import { sortData } from '../../Utils/SortUtils';
-import { convertToColumnTypes } from '../../Utils/TypeUtils';
+import { getExpandedGroups } from '../../Utils/GroupUtils';
+import { extendProps, prepareTableOptions } from '../../Utils/PropsUtils';
 import FilterRow from '../FilterRow/FilterRow';
@@ -26,22 +23,10 @@ import HeadRow from '../HeadRow/HeadRow';
 export var Table = function (props) {
-    var _a = props.childAttributes, childAttributes = _a === void 0 ? {} : _a, _b = props.editableCells, editableCells = _b === void 0 ? [] : _b, _c = props.editingMode, editingMode = _c === void 0 ? EditingMode.None : _c, filteringMode = props.filteringMode, groups = props.groups, search = props.search, _d = props.selectedRows, selectedRows = _d === void 0 ? [] : _d, _e = props.sortingMode, sortingMode = _e === void 0 ? SortingMode.None : _e;
-    var columns = props.columns, _f = props.data, data = _f === void 0 ? [] : _f;
-    data = search ? searchData(columns, data, search) : data;
-    data = convertToColumnTypes(data, columns);
-    data = filterData(data, columns);
-    data = sortData(columns, data);
-    var groupColumnsCount = 0;
-    var groupedColumns = [];
-    if (groups) {
-        groupColumnsCount = groups.length;
-        groupedColumns = columns.filter(function (c) { return groups.some(function (g) { return g.columnKey === c.key; }); });
-        columns = columns.filter(function (c) { return !groups.some(function (g) { return g.columnKey === c.key; }); });
-    }
+    var _a = props.childAttributes, childAttributes = _a === void 0 ? {} : _a, _b = props.editableCells, editableCells = _b === void 0 ? [] : _b, _c = props.editingMode, editingMode = _c === void 0 ? EditingMode.None : _c, filteringMode = props.filteringMode, _d = props.sortingMode, sortingMode = _d === void 0 ? SortingMode.None : _d, _e = props.selectedRows, selectedRows = _e === void 0 ? [] : _e, groups = props.groups, _f = props.data, data = _f === void 0 ? [] : _f;
     var groupsExpanded = props.groupsExpanded;
-    var groupedData = groups ? getGroupedData(data, groups, groupedColumns, groupsExpanded) : data;
+    var preparedOptions = prepareTableOptions(props);
     if (groups && !groupsExpanded) {
-        groupsExpanded = getExpandedGroups(groupedData);
+        groupsExpanded = getExpandedGroups(preparedOptions.groupedData);
     }
     var theadRef = React.useRef(null);
-    var dispatch = wrapDispatch(__assign(__assign({}, props), { groupsExpanded: groupsExpanded }), theadRef);
+    var dispatch = wrapDispatch(__assign({}, props), theadRef);
     var componentProps = {
@@ -55,6 +40,6 @@ className: defaultOptions.css.table,
             React.createElement("thead", { className: defaultOptions.css.thead, ref: theadRef },
-                React.createElement(HeadRow, { areAllRowsSelected: areAllRowsSelected, groupColumnsCount: groupColumnsCount, columns: columns, dispatch: dispatch, sortingMode: sortingMode }),
+                React.createElement(HeadRow, { areAllRowsSelected: areAllRowsSelected, groupColumnsCount: preparedOptions.groupColumnsCount, columns: preparedOptions.columns, dispatch: dispatch, sortingMode: sortingMode }),
                 filteringMode === FilteringMode.FilterRow &&
-                    (React.createElement(FilterRow, { columns: columns, dispatch: dispatch, groupColumnsCount: groupColumnsCount }))),
-            React.createElement(TableBody, __assign({}, props, { childAttributes: childAttributes, columns: columns, data: groupedData, dispatch: dispatch, editableCells: editableCells, editingMode: editingMode, groupColumnsCount: groupColumnsCount, groupedColumns: groupedColumns, groupsExpanded: groupsExpanded, selectedRows: selectedRows })))));
+                    (React.createElement(FilterRow, { columns: preparedOptions.columns, dispatch: dispatch, groupColumnsCount: preparedOptions.groupColumnsCount }))),
+            React.createElement(TableBody, __assign({}, props, { childAttributes: childAttributes, columns: preparedOptions.columns, data: preparedOptions.groupedData, dispatch: dispatch, editableCells: editableCells, editingMode: editingMode, groupColumnsCount: preparedOptions.groupColumnsCount, groupedColumns: preparedOptions.groupedColumns, groupsExpanded: groupsExpanded, selectedRows: selectedRows })))));
 };

Components/TableBody/TableBody.js

@@ -19,6 +19,6 @@ var __assign = (this && this.__assign) || function () {
     return (React.createElement("tbody", { className: defaultOptions.css.tbody, onScroll: function (event) {
-            dispatch(ActionType.ScrollTable, {
+            dispatch({
                 scrollLeft: event.currentTarget.scrollLeft,
                 scrollTop: event.currentTarget.scrollTop,
-                timeStamp: event.timeStamp,
+                type: ActionType.ScrollTable,
             });
@@ -25,0 +25,0 @@ } },

Components/VirtualizedRows/VirtualizedRows.js

@@ -29,3 +29,3 @@ var __assign = (this && this.__assign) || function () {
                 tbodyHeight: tbodyHeight }, virtualScrolling);
-            dispatch(ActionType.ChangeVirtualScrollingHeightSettings, { virtualScrolling: newVirtualScrolling });
+            dispatch({ type: ActionType.UpdateVirtualScrolling, virtualScrolling: newVirtualScrolling });
         }
@@ -32,0 +32,0 @@ };

enums.js

@@ -16,16 +16,19 @@ export var DataType;
 (function (ActionType) {
-    ActionType["ChangeFilterRow"] = "ChangeFilterRow";
-    ActionType["ChangeRowData"] = "ChangeRowData";
-    ActionType["ChangeSorting"] = "ChangeSorting";
-    ActionType["ChangeVirtualScrollingHeightSettings"] = "ChangeVirtualScrollingHeightSettings";
     ActionType["CloseEditor"] = "CloseEditor";
+    ActionType["DeleteRow"] = "DeleteRow";
     ActionType["DeselectAllRows"] = "DeselectAllRows";
     ActionType["DeselectRow"] = "DeselectRow";
-    ActionType["DeselectRowData"] = "DeselectRowData";
     ActionType["OpenEditor"] = "OpenEditor";
     ActionType["ScrollTable"] = "ScrollTable";
+    ActionType["Search"] = "Search";
     ActionType["SelectAllRows"] = "SelectAllRows";
+    ActionType["SelectRow"] = "SelectRow";
     ActionType["SelectSingleRow"] = "SelectSingleRow";
-    ActionType["SelectRow"] = "SelectRow";
+    ActionType["UpdateCellValue"] = "UpdateCellValue";
+    ActionType["UpdateData"] = "UpdateData";
+    ActionType["UpdateFilterRowOperator"] = "UpdateFilterRowOperator";
+    ActionType["UpdateFilterRowValue"] = "UpdateFilterRowValue";
     ActionType["UpdateGroupsExpanded"] = "UpdateGroupsExpanded";
+    ActionType["UpdateSortDirection"] = "UpdateSortDirection";
+    ActionType["UpdateVirtualScrolling"] = "UpdateVirtualScrolling";
 })(ActionType || (ActionType = {}));
@@ -32,0 +35,0 @@ export var KeyboardEnum;

enums.ts

@@ -15,16 +15,19 @@ export enum DataType {
 export enum ActionType {
-  ChangeFilterRow = 'ChangeFilterRow',
-  ChangeRowData = 'ChangeRowData',
-  ChangeSorting = 'ChangeSorting',
-  ChangeVirtualScrollingHeightSettings = 'ChangeVirtualScrollingHeightSettings',
   CloseEditor = 'CloseEditor',
+  DeleteRow = 'DeleteRow',
   DeselectAllRows = 'DeselectAllRows',
   DeselectRow = 'DeselectRow',
-  DeselectRowData = 'DeselectRowData',
   OpenEditor = 'OpenEditor',
   ScrollTable = 'ScrollTable',
+  Search = 'Search',
   SelectAllRows = 'SelectAllRows',
+  SelectRow = 'SelectRow',
   SelectSingleRow = 'SelectSingleRow',
-  SelectRow = 'SelectRow',
+  UpdateCellValue = 'UpdateCellValue',
+  UpdateData = 'UpdateData',
+  UpdateFilterRowOperator = 'UpdateFilterRowOperator',
+  UpdateFilterRowValue = 'UpdateFilterRowValue',
   UpdateGroupsExpanded = 'UpdateGroupsExpanded',
+  UpdateSortDirection = 'UpdateSortDirection',
+  UpdateVirtualScrolling = 'UpdateVirtualScrolling',
 }
@@ -31,0 +34,0 @@

index.js

@@ -1,1 +0,2 @@
-export * from './Components/Table/Table';
+export * from './Components/Table/Table';
+export * from './Reducers/kaReducer';

index.ts

 export * from './Components/Table/Table';
+export * from './Reducers/kaReducer';

Models/Cell.ts

@@ -13,3 +13,3 @@ /**
   */
-  public rowKey!: any;
+  public rowKeyValue!: any;
 }

Models/VirtualScrolling.ts

 export class VirtualScrolling {
-  public scrollPosition?: number;
+  public scrollTop?: number;
   public itemHeight?: ((data: any) => number) | number;
   public tbodyHeight?: number;
 }

package.json

 {
   "name": "ka-table",
-  "version": "2.10.2",
+  "version": "3.0.1",
   "license": "MIT",
@@ -5,0 +5,0 @@ "repository": "github:komarovalexander/ka-table",

README.md

@@ -29,27 +29,25 @@ [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/komarovalexander/ka-table/blob/master/LICENSE)
 
-import { ITableOption, Table } from 'ka-table';
-import { DataType, SortDirection, SortingMode } from 'ka-table/enums';
-import { OptionChangeFunc } from 'ka-table/types';
+import { ITableOption, kaReducer, Table } from 'ka-table';
+import { DataType, EditingMode, SortingMode } from 'ka-table/enums';
+import { DispatchFunc } from 'ka-table/types';
 
-const dataArray: any[] = [
-  { id: 1, name: 'Mike Wazowski', score: 80, passed: true },
-  { id: 2, name: 'Billi Bob', score: 55, passed: false },
-  { id: 3, name: 'Tom Williams', score: 45, passed: false },
-  { id: 4, name: 'Kurt Cobain', score: 75, passed: true },
-  { id: 5, name: 'Marshall Bruce', score: 77, passed: true },
-  { id: 6, name: 'Sunny Fox', score: 33, passed: false },
-];
+const dataArray = Array(10).fill(undefined).map(
+  (_, index) => ({
+    column1: `column:1 row:${index}`,
+    column2: `column:2 row:${index}`,
+    column3: `column:3 row:${index}`,
+    column4: `column:4 row:${index}`,
+    id: index,
+  }),
+);
 
-const tableOption: ITableOption = {
+const tablePropsInit: ITableOption = {
   columns: [
-    {
-      dataType: DataType.String,
-      key: 'name',
-      sortDirection: SortDirection.Descend,
-      style: { width: '33%' },
-      title: 'Name',
-    },
-    { key: 'score', title: 'Score', style: { width: '10%' }, dataType: DataType.Number },
-    { key: 'passed', title: 'Passed', dataType: DataType.Boolean },
+    { key: 'column1', title: 'Column 1', dataType: DataType.String },
+    { key: 'column2', title: 'Column 2', dataType: DataType.String },
+    { key: 'column3', title: 'Column 3', dataType: DataType.String },
+    { key: 'column4', title: 'Column 4', dataType: DataType.String },
   ],
+  data: dataArray,
+  editingMode: EditingMode.Cell,
   rowKeyField: 'id',
@@ -59,12 +57,12 @@ sortingMode: SortingMode.Single,
 
-const SortingDemo: React.FC = () => {
-  const [option, changeOptions] = useState(tableOption);
-  const onOptionChange: OptionChangeFunc = (value) => {
-    changeOptions({...option, ...value });
+const OverviewDemo: React.FC = () => {
+  const [tableProps, changeTableProps] = useState(tablePropsInit);
+  const dispatch: DispatchFunc = (action) => {
+    changeTableProps((prevState: ITableOption) => kaReducer(prevState, action));
   };
+
   return (
     <Table
-      {...option}
-      data={dataArray}
-      onOptionChange={onOptionChange}
+      {...tableProps}
+      dispatch={dispatch}
     />
@@ -74,6 +72,6 @@ );
 
-export default SortingDemo;
+export default OverviewDemo;
 ```
 
-[Example link](https://komarovalexander.github.io/ka-table/#/sorting)
+[Example link](https://komarovalexander.github.io/ka-table/#/overview)
 
@@ -130,335 +128,1 @@ ## Examples
 
-## API
-<a name="Table"></a>
-### Table
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| childAttributes | <code>[ChildAttributes](#ChildAttributes)</code> | Object describes attributes for data grid child components (Demo: [Events](https://komarovalexander.github.io/ka-table/#/events)) |
-| columns | [<code>Column[]</code>](#Column) | Columns in table and their look and behaviour |
-| data | <code>any\[\]</code> | The Table's data |
-| dataRow | [<code>DataRowFunc</code>](#DataRowFunc) | Returns Data Row Template (Demo: [Custom Data Row Example](https://komarovalexander.github.io/ka-table/#/custom-data-row)) |
-| editableCells | [<code>Cell[]</code>](#Cell) | Array of cells currently editing (Demo: [Editing Example](https://komarovalexander.github.io/ka-table/#/editing)) |
-| editingMode | [<code>EditingMode</code>](#EditingMode) | Sets the table's editing mode (Demo: [Editing Example](https://komarovalexander.github.io/ka-table/#/editing)) |
-| filteringMode | [<code>FilteringMode</code>](#FilteringMode) | Show filter UI elements in Table (Demo: [Filter Row Example](https://komarovalexander.github.io/ka-table/#/filter-row)) |
-| groupRow | [<code>GroupRowFunc</code>](#GroupRowFunc) | Returns Group Row Template |
-| groups | [<code>Group[]</code>](#Group) | Group's in the table (Demo: [Grouping Example](https://komarovalexander.github.io/ka-table/#/grouping)) |
-| groupsExpanded | <code>any[][]</code> | Expanded groups - array of group keys |
-| noDataRow | <code>() => any</code> | The function returns string or a component which should appear when there are no data to show |
-| onDataChange | <code>(data: any[]) => void</code> | This function is called each time when data going to change, use it to override current data (Demo: [Editing Example](https://komarovalexander.github.io/ka-table/#/editing)) |
-| onEvent | <code>(type: string, data: any) => void</code> | Executes each time when dispatch is called (Demo: [Events](https://komarovalexander.github.io/ka-table/#/events)) |
-| onOptionChange | <code>(value: any) => void</code> | This is mandatory function, this executes each time when grid going to change its state, use it to override current state (Demo: [Example](https://komarovalexander.github.io/ka-table/#/editing)) |
-| rowKeyField | <code>string</code> | Data's field which is used to identify row |
-| search <a name="Table.search"></a> | <code>string</code> | Specifies the text for search by data (Demo: [Search Example](https://komarovalexander.github.io/ka-table/#/search)) |
-| selectedRows | <code>any[]</code> | Array of selected rows keys (Demo: [Selection Example](https://komarovalexander.github.io/ka-table/#/selection)) |
-| sortingMode | [<code>SortingMode</code>](#SortingMode)  | Sorting mode (Demo: [Sorting Example](https://komarovalexander.github.io/ka-table/#/sorting)) |
-| virtualScrolling | [<code>VirtualScrolling</code>](#VirtualScrolling) | Virtual scrolling options (Demo: [Many Rows Example](https://komarovalexander.github.io/ka-table/#/many-rows)) |
-
-<a name="Column"></a>
-### Column
-Describes column of table its look and behaviour
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| cell | [<code>CellFunc</code>](#CellFunc) | Returns a custom cell if Table is not in editable mode (Demo: [Custom Cell](https://komarovalexander.github.io/ka-table/#/custom-cell)) |
-| dataType | [<code>DataType</code>](#DataType) | Specifies the type of column |
-| editor | [<code>EditorFunc</code>](#EditorFunc) | Returns an editor if cell is in editable mode (Demo: [Custom Editor Example](https://komarovalexander.github.io/ka-table/#/custom-editor)) |
-| filterRowCell | [<code>FilterRowFunc</code>](#FilterRowFunc) | Returns an editor for filter row cell (Demo: [Filter Row Custom Editor](https://komarovalexander.github.io/ka-table/#/filter-row-custom-editor)) |
-| filterRowOperator | <code>string</code> | Sets filter row operator (Demo: [Filter Row Custom Editor](https://komarovalexander.github.io/ka-table/#/filter-row-custom-editor)). See the list of predefined filter operators [<code>FilterOperatorName</code>](#FilterOperatorName) |
-| filterRowValue | <code>any</code> | Sets filter row value (Demo: [Filter Row](https://komarovalexander.github.io/ka-table/#/filter-row)) |
-| field | <code>string</code> | Specifies the property of data's object which value will be used in column, if null value from key option will be used |
-| fieldParents | <code>string[]</code> | Array contains names of parents for specific field (Demo: [Overview Demo](https://komarovalexander.github.io/ka-table/#/overview)) |
-| format | [<code>FormatFunc</code>](#FormatFunc) | Returns formated cell string (Demo: [Example](https://komarovalexander.github.io/ka-table/#/custom-cell)) |
-| groupCell | <code>[<code>GroupCellFunc</code>](#GroupCellFunc)</code> | Returns a custom group cell |
-| headCell | <code>[<code>HeaderCellFunc</code>](#HeaderCellFunc)</code> | Returns a custom header cell (Demo: [Custom Head Cell Example](https://komarovalexander.github.io/ka-table/#/custom-header-cell)) |
-| isEditable | <code>boolean</code> | Specifies can column be editable or not |
-| key | <code>string</code> | Mandatory field, specifies unique key for the column |
-| search | [<code>SearchFunc</code>](#SearchFunc) | Overrides the default search method for the cell. Executes if (Demo: [Table.search](#Table.search)) option is set |
-| sortDirection | [<code>SortDirection</code>](#SortDirection) | Sets the direction of sorting for the column |
-| style | <code>React.CSSProperties</code> | Sets the style options of the elements |
-| title | <code>string</code> | Specifies the text of the header |
-| validation | [<code>ValidationFunc</code>](#ValidationFunc) | Returns the validation error string or does not return anything in case of passed validation (Demo: [Validation Example](https://komarovalexander.github.io/ka-table/#/validation)) |
-
-
-
-<a name="Cell"></a>
-### Cell
-Describes the position of a cell in  the table
-
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| field | <code>string</code> | The field of specific column |
-| rowKeyValue | <code>any</code> | Data's key value of every specific row |
-
-
-<a name="ChildAttributes"></a>
-### ChildAttributes
-Describes the attributes for a specific child component
-It is possible to override default behaviour just specify particular handler [Events Demo](https://komarovalexander.github.io/ka-table/#/events)
-
-| Name | Type | Description |
-| --- | --- | --- |
-| cell | <code>[ChildAttributesItem](#ChildAttributesItem)<[ICellContentProps](#ICellContentProps)></code> | Sets custom attributes for cell element |
-| dataRow | <code>[ChildAttributesItem](#ChildAttributesItem)<[IDataRowProps](#IDataRowProps)></code> | Sets custom attributes for table element |
-| table | <code>[ChildAttributesItem](#ChildAttributesItem)<[Table](#ITableAllProps)></code> | Sets custom attributes for table element |
-
-
-<a name="ChildAttributesItem"></a>
-#### ChildAttributesItem&lt;T&gt;
-This object is an extension for React HTMLAttributes. It contains all attributes and all [react Synthetic Events](https://reactjs.org/docs/events.html), but in each event it adds a second parameter which contains additional data with <code>[AttributeTableData type](#AttributeTableData)</code>.
-
-<a name="AttributeTableData"></a>
-#### AttributeTableData&lt;T&gt;
-A second parameter in each [react Synthetic Event](https://reactjs.org/docs/events.html). Contains component-related information.
-
-| Name | Type | Description |
-| --- | --- | --- |
-| baseFunc | <code>any</code> | Contains default function for overrided function - it is easy to add additional logic and execute default behaviour where you want it |
-| childElementAttributes | <code>HTMLAttributes&lt;HTMLElement&gt;</code> | Default HTMLAttributes of the component |
-| childProps | <code>T</code> | Props of the component |
-| dispatch | <code>(type: string, data: any) => void</code> | Executes specific action with specific data |
-
-<a name="Group"></a>
-### Group
-
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| field | <code>string</code> | The grouped column's field |
-
-
-<a name="VirtualScrolling"></a>
-### VirtualScrolling
-
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| scrollPosition | <code>number</code> | Current scroll top position |
-| itemHeight | <code>((data: any) => number)</code> \| <code>number</code> | Returns height of specific row |
-| tbodyHeight | <code>number</code> | tbody height |
-
-You can set VirtualScrolling as empty object {} to enable virtual scrolling and auto calculate its parameters
-
-<a name="DataType"></a>
-### DataType
-
-| Property | String value |
-| --- | --- |
-| Boolean | 'boolean' |
-| Date | 'date' |
-| Number | 'number' |
-| Object | 'object' |
-| String | 'string' |
-
-
-<a name="EditingMode"></a>
-### EditingMode
-
-| Property | String value | Description |
-| --- | --- | --- |
-| None | 'none' | Editing is disabled |
-| Cell | 'cell' | Data is edited by cell to cell, click by cell activates editing |
-
-
-<a name="FilteringMode"></a>
-### FilteringMode
-
-| Property | String value | Description |
-| --- | --- | --- |
-| None | 'none' | All filtering elements are hidden |
-| FilterRow | 'filterRow' | Filter row is shown |
-
-
-<a name="FilterOperatorName"></a>
-### FilterOperatorName
-
-| Property | String value |
-| --- | --- |
-| Equal | '=' |
-| MoreThan | '>' |
-| LessThan | '<' |
-| MoreThanOrEqual | '>=' |
-| LessThanOrEqual | '<=' |
-| Contains | 'contains' |
-
-
-<a name="SortDirection"></a>
-### SortDirection
-
-| Property | String value |
-| --- | --- |
-| Ascend | 'ascend' |
-| Descend | 'descend' |
-
-
-<a name="SortingMode"></a>
-### SortingMode
-
-| Property | String value |
-| --- | --- |
-| None | 'none' |
-| Single | 'single' |
-
-
-
-<a name="CellFunc"></a>
-### CellFunc
-
-<code>(props: [ICellContentProps](#ICellContentProps)) => any;</code>
-
-Function which obtains [<code>ICellContentProps</code>](#ICellContentProps) as parameter and returns React component which should be shown instead of cell content.
-
-<a name="DataRowFunc"></a>
-### DataRowFunc
-
-<code>(props: [IDataRowProps](#IDataRowProps)) => any;</code>
-
-Function which obtains [<code>IDataRowProps</code>](#IDataRowProps) as parameter and returns React component which should be shown instead of Row content.
-
-<a name="EditorFunc"></a>
-### EditorFunc
-
-<code>(props: [ICellEditorProps](#ICellEditorProps)) => any;</code>
-
-Function which obtains [<code>ICellEditorProps</code>](#ICellEditorProps) as parameter and returns React component which should be shown instead of default editor.
-
-<a name="FilterRowFunc"></a>
-### FilterRowFunc
-
-<code>(props: [IFilterRowEditorProps](#IFilterRowEditorProps)) => any;</code>
-
-Function which obtains [<code>IFilterRowEditorProps</code>](#IFilterRowEditorProps) as parameter and returns React component which should be shown instead of default filter row's editor.
-
-<a name="FormatFunc"></a>
-### FormatFunc
-
-<code>(value: any) => any;</code>
-
-Function which obtains value as parameter and returns formated value which will be shown in cell.
-
-<a name="GroupCellFunc"></a>
-### GroupCellFunc
-
-<code>(props:[<code>IGroupRowProps</code>](#IGroupRowProps)) => any;</code>
-
-Function which obtains [<code>IGroupRowProps</code>](#IGroupRowProps) as parameter and returns group cell content.
-
-<a name="GroupRowFunc"></a>
-### GroupRowFunc
-
-<code>(props:[<code>IGroupRowProps</code>](#IGroupRowProps)) => any;</code>
-
-Function which obtains [<code>IGroupRowProps</code>](#IGroupRowProps) as parameter and returns group row content.
-
-<a name="HeaderCellFunc"></a>
-### HeaderCellFunc
-
-<code>(props:[<code>IHeadCellProps</code>](#IHeadCellProps)) => any;</code>
-
-Function which obtains [<code>IHeadCellProps</code>](#IHeadCellProps) as parameter and returns header cell content.
-
-
-<a name="SearchFunc"></a>
-### SearchFunc
-
-<code>(searchText?: string, rowData?: any, column?: Column) => boolean;</code>
-
-Function which obtains <code>searchText?: string, rowData?: any, column?: Column</code> - as parameters and returns <code>boolean</code> value which is true if cell's value is matched with searched value and false otherwise.
-
-
-<a name="ValidationFunc"></a>
-### ValidationFunc
-
-<code>(value: any, rowData: any) => string | void;</code>
-
-Function which obtains value of specific cell and row - as parameters and returns validation error string or does not return anything in case of passed validation.
-
-
-<a name="ICellEditorProps"></a>
-### ICellEditorProps
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| column | [<code>Column</code>](#Column) | column of the editor |
-| dispatch | <code>(type: string, data: any) => void</code> | can forse Table make change in data, close the editor, and other actions |
-| field | <code>string</code> | field name of current column |
-| isSelectedRow | <code>boolean</code> | selection state of the current row |
-| rowData | <code>any</code> | data of the row in which editor is shown |
-| rowKeyField | <code>string</code> | field which is used to identify row |
-| rowKeyValue | <code>any</code> | value of the field which is used to identify row |
-
-<a name="IFilterRowEditorProps"></a>
-### IFilterRowEditorProps
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| column | [<code>Column</code>](#Column) | column of the editor |
-| dispatch | <code>(type: string, data: any) => void</code> |  can forse Table make change in filter data and other actions  |
-
-
-<a name="ICellContentProps"></a>
-### ICellContentProps
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| childAttributes | <code>[ChildAttributes](#ChildAttributes)</code> | Object describes attributes for data grid child components (Demo: [Events](https://komarovalexander.github.io/ka-table/#/events)) |
-| column | [<code>Column</code>](#Column) | column of the cell |
-| dispatch | <code>(type: string, data: any) => void</code> | can forse Table make change in data, open the editor, and other actions |
-| editingMode | [<code>EditingMode</code>](#EditingMode) | Editing mode of cell column |
-| field | <code>string</code> | field name of cell column |
-| isSelectedRow | <code>boolean</code> | selection state of the cell row |
-| rowData | <code>any</code> | data of the row in which editor is shown |
-| rowKeyField | <code>string</code> | field which is used to identify row |
-| rowKeyValue | <code>any</code> | value of the field which is used to identify cell row |
-| value | <code>any</code> | value of the cell |
-
-
-<a name="IDataRowProps"></a>
-### IDataRowProps
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| columns | [<code>Column[]</code>](#Column) | Columns in table and their look and behaviour |
-| dispatch | <code>(type: string, data: any) => void</code> | Executes specific action with specific data |
-| editableCells | [<code>Cell[]</code>](#Cell) | Array of cells that are in edit mode |
-| editingMode | [<code>EditingMode</code>](#EditingMode) | Table's editing mode |
-| rowData | <code>any</code> | Data of current row |
-| isSelectedRow | <code>boolean</code> | Describes selected state of current row |
-| rowKeyField | <code>string</code> | Data's field which is used to identify row |
-| selectedRows | <code>any[]</code> | Array of rows keys which are marked as selected |
-
-
-<a name="IGroupRowProps"></a>
-### IGroupRowProps
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| column | [<code>Column</code>](#Column) | Grouped column |
-| contentColSpan | <code>number</code> | colSpan for content cell |
-| dispatch | <code>(type: string, data: any) => void</code> | Executes specific action with specific data |
-| groupIndex | <code>number</code> | grouped column index relative another grouped columns |
-| groupKey | <code>any[]</code> | key of current row, array because group could be inner for another: <code>['parentGroupKey', 'currentGroupKey']</code> |
-| isExpanded | <code>boolean</code> | Expanded state of current group |
-| text | <code>string</code> | Formatted text of group row |
-
-<a name="IHeadCellProps"></a>
-### IHeadCellProps
-**Properties**
-
-| Name | Type | Description |
-| --- | --- | --- |
-| areAllRowsSelected | <code>boolean</code> | Indicates selection state of all columns |
-| column | [<code>Column</code>](#Column) | Grouped column |
-| sortingMode | <code>number</code> | [<code>SortingMode</code>](#SortingMode) of current cell column |
-| dispatch | <code>(type: string, data: any) => void</code> | Executes specific action with specific data |

types.ts

@@ -24,3 +24,3 @@ import { PropsWithChildren } from 'react';
 export type DataRowFuncPropsWithChildren = PropsWithChildren<IDataRowProps>;
-export type DispatchFunc = (type: string, data: any) => void;
+export type DispatchFunc = (action: any) => void;
 export type EditorFunc = (props: EditorFuncPropsWithChildren) => any;
@@ -27,0 +27,0 @@ export type EditorFuncPropsWithChildren = PropsWithChildren<ICellEditorProps>;

Utils/ActionUtils.js

@@ -1,92 +0,13 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 import { ActionType } from '../enums';
-import { getCopyOfArrayAndInsertOrReplaceItem } from './ArrayUtils';
-import { addItemToEditableCells, removeItemFromEditableCells } from './CellUtils';
-import { updateExpandedGroups } from './GroupUtils';
-import { getSortedColumns } from './HeadRowUtils';
 export var wrapDispatch = function (tableProps, theadRef) {
-    var columns = tableProps.columns, data = tableProps.data, _a = tableProps.editableCells, editableCells = _a === void 0 ? [] : _a, _b = tableProps.groupsExpanded, groupsExpanded = _b === void 0 ? [] : _b, _c = tableProps.onDataChange, onDataChange = _c === void 0 ? function () { } : _c, _d = tableProps.onEvent, onEvent = _d === void 0 ? function () { } : _d, onOptionChange = tableProps.onOptionChange, rowKeyField = tableProps.rowKeyField, _e = tableProps.selectedRows, selectedRows = _e === void 0 ? [] : _e, virtualScrolling = tableProps.virtualScrolling;
-    return function (action, actionData) {
-        switch (action) {
-            case ActionType.OpenEditor: {
-                var newEditableCells = addItemToEditableCells(actionData.cell, editableCells);
-                onOptionChange({ editableCells: newEditableCells });
-                break;
-            }
-            case ActionType.CloseEditor: {
-                var newEditableCells = removeItemFromEditableCells(actionData.cell, editableCells);
-                onOptionChange({ editableCells: newEditableCells });
-                break;
-            }
-            case ActionType.ChangeFilterRow:
-                var newColumns = getCopyOfArrayAndInsertOrReplaceItem(actionData.column, 'key', columns);
-                onOptionChange({ columns: newColumns });
-                break;
-            case ActionType.ChangeRowData:
-                var newData = getCopyOfArrayAndInsertOrReplaceItem(actionData.newValue, rowKeyField, data);
-                onDataChange(newData);
-                break;
-            case ActionType.SelectAllRows: {
-                var newSelectedRows = data.map(function (d) { return d[rowKeyField]; });
-                onOptionChange({ selectedRows: newSelectedRows });
-                break;
-            }
-            case ActionType.SelectSingleRow: {
-                var newSelectedRows = [actionData.rowKeyValue];
-                onOptionChange({ selectedRows: newSelectedRows });
-                break;
-            }
-            case ActionType.DeselectAllRows:
-                onOptionChange({ selectedRows: [] });
-                break;
-            case ActionType.SelectRow:
-                onOptionChange({ selectedRows: __spreadArrays(selectedRows, [actionData.rowKeyValue]) });
-                break;
-            case ActionType.DeselectRowData:
-            case ActionType.DeselectRow:
-                onOptionChange({ selectedRows: __spreadArrays(selectedRows).filter(function (s) { return s !== actionData.rowKeyValue; }) });
-                break;
-            case ActionType.ChangeSorting:
-                var sortedColumns = getSortedColumns(columns, actionData.column);
-                onOptionChange({ columns: sortedColumns });
-                break;
-            case ActionType.ChangeVirtualScrollingHeightSettings:
-                onOptionChange(actionData);
-                break;
+    var dispatch = tableProps.dispatch;
+    return function (action) {
+        switch (action.type) {
             case ActionType.ScrollTable:
                 if (theadRef && theadRef.current) {
-                    theadRef.current.scrollTo({ left: actionData.scrollLeft });
+                    theadRef.current.scrollTo({ left: action.scrollLeft });
                 }
-                if (virtualScrolling) {
-                    var scrollPosition = actionData.scrollTop;
-                    if (virtualScrolling) {
-                        onOptionChange({ virtualScrolling: __assign(__assign({}, virtualScrolling), { scrollPosition: scrollPosition }) });
-                    }
-                }
-                break;
-            case ActionType.UpdateGroupsExpanded:
-                var newGroupsExpanded = updateExpandedGroups(groupsExpanded, actionData.groupKey);
-                actionData.newValue = { groupsExpanded: newGroupsExpanded }; // BC
-                onOptionChange({ groupsExpanded: newGroupsExpanded });
-                break;
         }
-        onEvent(action, actionData);
+        dispatch(action);
     };
 };

Utils/ActionUtils.ts

 
 import { RefObject } from 'react';
 
-import { ITableAllProps } from '../';
 import { ActionType } from '../enums';
-import { getCopyOfArrayAndInsertOrReplaceItem } from './ArrayUtils';
-import { addItemToEditableCells, removeItemFromEditableCells } from './CellUtils';
-import { updateExpandedGroups } from './GroupUtils';
-import { getSortedColumns } from './HeadRowUtils';
+import { ITableAllProps } from '../index';
 
-export const wrapDispatch = (tableProps: ITableAllProps, theadRef?: RefObject<HTMLTableSectionElement>) => {
+export const wrapDispatch = (
+  tableProps: ITableAllProps,
+  theadRef?: RefObject<HTMLTableSectionElement>) => {
   const {
-    columns,
-    data,
-    editableCells = [],
-    groupsExpanded = [],
-    onDataChange = () => {},
-    onEvent = () => {},
-    onOptionChange,
-    rowKeyField,
-    selectedRows = [],
-    virtualScrolling,
+    dispatch,
   } = tableProps;
-  return (action: string, actionData: any) => {
-    switch (action) {
-      case ActionType.OpenEditor: {
-        const newEditableCells = addItemToEditableCells(
-          actionData.cell,
-          editableCells);
-        onOptionChange({ editableCells: newEditableCells });
-        break;
-      }
-      case ActionType.CloseEditor: {
-        const newEditableCells = removeItemFromEditableCells(
-          actionData.cell,
-          editableCells);
-        onOptionChange({ editableCells: newEditableCells });
-        break;
-      }
-      case ActionType.ChangeFilterRow:
-          const newColumns = getCopyOfArrayAndInsertOrReplaceItem(actionData.column, 'key', columns);
-          onOptionChange({ columns: newColumns });
-          break;
-      case ActionType.ChangeRowData:
-          const newData = getCopyOfArrayAndInsertOrReplaceItem(actionData.newValue, rowKeyField, data);
-          onDataChange(newData);
-          break;
-      case ActionType.SelectAllRows: {
-        const newSelectedRows = data.map((d) => d[rowKeyField]);
-        onOptionChange({ selectedRows: newSelectedRows });
-        break;
-      }
-      case ActionType.SelectSingleRow: {
-        const newSelectedRows = [actionData.rowKeyValue];
-        onOptionChange({ selectedRows: newSelectedRows });
-        break;
-      }
-      case ActionType.DeselectAllRows:
-        onOptionChange({ selectedRows: [] });
-        break;
-      case ActionType.SelectRow:
-          onOptionChange({ selectedRows: [...selectedRows, ...[actionData.rowKeyValue]] });
-          break;
-      case ActionType.DeselectRowData:
-      case ActionType.DeselectRow:
-          onOptionChange({ selectedRows: [...selectedRows].filter((s) => s !== actionData.rowKeyValue) });
-          break;
-      case ActionType.ChangeSorting:
-          const sortedColumns = getSortedColumns(columns, actionData.column);
-          onOptionChange({ columns: sortedColumns });
-          break;
-      case ActionType.ChangeVirtualScrollingHeightSettings:
-          onOptionChange(actionData);
-          break;
+  return (action: any) => {
+    switch (action.type) {
       case ActionType.ScrollTable:
         if (theadRef && theadRef.current) {
-          theadRef.current.scrollTo({ left: actionData.scrollLeft});
+          theadRef.current.scrollTo({ left: action.scrollLeft});
         }
-        if (virtualScrolling) {
-            const scrollPosition = actionData.scrollTop;
-            if (virtualScrolling) {
-              onOptionChange({ virtualScrolling: { ...virtualScrolling, scrollPosition }});
-            }
-          }
-        break;
-      case ActionType.UpdateGroupsExpanded:
-        const newGroupsExpanded = updateExpandedGroups(
-          groupsExpanded,
-          actionData.groupKey,
-        );
-        actionData.newValue = { groupsExpanded: newGroupsExpanded }; // BC
-        onOptionChange({ groupsExpanded: newGroupsExpanded });
-        break;
     }
-    onEvent(action, actionData);
+    dispatch(action);
   };
 };

Utils/ArrayUtils.js

@@ -12,12 +12,12 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 };
-export var getCopyOfArrayAndDeleteItem = function (item, rowKey, array) {
-    var rowKeyValue = item[rowKey];
-    return array.filter(function (i) { return i[rowKey] !== rowKeyValue; });
+export var getCopyOfArrayAndDeleteItem = function (item, rowKeyField, array) {
+    var rowKeyValue = item[rowKeyField];
+    return array.filter(function (i) { return i[rowKeyField] !== rowKeyValue; });
 };
-export var getCopyOfArrayAndInsertOrReplaceItem = function (item, rowKey, array) {
+export var getCopyOfArrayAndInsertOrReplaceItem = function (item, rowKeyField, array) {
     var newArray = __spreadArrays(array);
-    var rowKeyValue = item[rowKey];
-    var index = newArray.findIndex(function (i) { return i[rowKey] === rowKeyValue; });
+    var rowKeyValue = item[rowKeyField];
+    var index = newArray.findIndex(function (i) { return i[rowKeyField] === rowKeyValue; });
     index >= 0 ? newArray.splice(index, 1, item) : newArray.push(item);
     return newArray;
 };

Utils/ArrayUtils.ts

@@ -5,13 +5,13 @@ export const getCopyOfArrayAndAddItem = (item: any, array: any[] = []): any[] => {
 
-export const getCopyOfArrayAndDeleteItem = (item: any, rowKey: any, array: any[]): any[] => {
-  const rowKeyValue = item[rowKey];
-  return array.filter((i) => i[rowKey] !== rowKeyValue);
+export const getCopyOfArrayAndDeleteItem = (item: any, rowKeyField: any, array: any[]): any[] => {
+  const rowKeyValue = item[rowKeyField];
+  return array.filter((i) => i[rowKeyField] !== rowKeyValue);
 };
 
-export const getCopyOfArrayAndInsertOrReplaceItem = (item: any, rowKey: any, array: any[]): any[] => {
+export const getCopyOfArrayAndInsertOrReplaceItem = (item: any, rowKeyField: any, array: any[]): any[] => {
   const newArray = [...array];
-  const rowKeyValue = item[rowKey];
-  const index = newArray.findIndex((i) => i[rowKey] === rowKeyValue);
+  const rowKeyValue = item[rowKeyField];
+  const index = newArray.findIndex((i) => i[rowKeyField] === rowKeyValue);
   index >= 0 ? newArray.splice(index, 1, item) : newArray.push(item);
   return newArray;
 };

Utils/CellUtils.js

@@ -16,3 +16,3 @@ import { EditingMode } from '../enums';
 export var removeItemFromEditableCells = function (item, editableCells) {
-    return editableCells.filter(function (c) { return c.columnKey !== item.columnKey || c.rowKey !== item.rowKey; });
+    return editableCells.filter(function (c) { return c.columnKey !== item.columnKey || c.rowKeyValue !== item.rowKeyValue; });
 };

Utils/CellUtils.ts

@@ -23,3 +23,3 @@ import { EditingMode } from '../enums';
   item: Cell, editableCells: Cell[]): Cell[] => {
-    return editableCells.filter((c) => c.columnKey !== item.columnKey || c.rowKey !== item.rowKey);
+    return editableCells.filter((c) => c.columnKey !== item.columnKey || c.rowKeyValue !== item.rowKeyValue);
 };

Utils/ColumnUtils.js

@@ -1,6 +0,3 @@
-export var compareColumns = function (column1, column2) {
-    return column1.key === column2.key && column1.field === column2.field;
-};
 export var getField = function (column) {
     return column.field || column.key;
 };

Utils/ColumnUtils.ts

 import { Column } from '../models';
 import { Field } from '../types';
 
-export const compareColumns = (column1: Column, column2: Column) => {
-  return column1.key === column2.key && column1.field === column2.field;
-};
-
 export const getField = (column: Column): Field => {
   return column.field || column.key;
 };

Utils/FilterUtils.js

@@ -6,3 +6,3 @@ import defaultOptions from '../defaultOptions';
 export var getRowEditableCells = function (rowKeyValue, editableCells) {
-    return editableCells.filter(function (c) { return c.rowKey === rowKeyValue; });
+    return editableCells.filter(function (c) { return c.rowKeyValue === rowKeyValue; });
 };
@@ -9,0 +9,0 @@ export var searchData = function (columns, data, searchText) {

Utils/FilterUtils.ts

@@ -10,3 +10,3 @@ import defaultOptions from '../defaultOptions';
 export const getRowEditableCells = (rowKeyValue: any, editableCells: Cell[]): Cell[] => {
-  return editableCells.filter((c) => c.rowKey === rowKeyValue);
+  return editableCells.filter((c) => c.rowKeyValue === rowKeyValue);
 };
@@ -13,0 +13,0 @@

Utils/HeadRowUtils.js

@@ -21,8 +21,10 @@ var __assign = (this && this.__assign) || function () {
 import { SortDirection } from '../enums';
-import { compareColumns } from './ColumnUtils';
-export var getSortedColumns = function (columns, column) {
-    var index = columns.findIndex(function (c) { return compareColumns(c, column); });
+export var getSortedColumns = function (columns, columnKey) {
+    var index = columns.findIndex(function (c) { return c.key === columnKey; });
     var newColumns = __spreadArrays(columns);
     newColumns.forEach(function (c, newColumnIndex) {
-        if (c.sortDirection) {
+        if (index === newColumnIndex) {
+            newColumns[index] = getColumnWithUpdatedSortDirection(newColumns[index]);
+        }
+        else if (c.sortDirection) {
             newColumns[newColumnIndex] = __assign({}, c);
@@ -32,3 +34,2 @@ newColumns[newColumnIndex].sortDirection = undefined;
     });
-    newColumns[index] = __assign({}, column);
     return newColumns;
@@ -35,0 +36,0 @@ };

Utils/HeadRowUtils.ts

 import defaultOptions from '../defaultOptions';
 import { SortDirection } from '../enums';
 import { Column } from '../Models/Column';
-import { compareColumns } from './ColumnUtils';
 
 export const getSortedColumns = (
   columns: Column[],
-  column: Column,
+  columnKey: string,
 ) => {
-  const index = columns.findIndex((c) => compareColumns(c, column));
+  const index = columns.findIndex((c) => c.key === columnKey);
   const newColumns = [...columns];
 
   newColumns.forEach((c, newColumnIndex) => {
-    if (c.sortDirection) {
+    if (index === newColumnIndex) {
+      newColumns[index] = getColumnWithUpdatedSortDirection(newColumns[index]);
+    } else if (c.sortDirection) {
       newColumns[newColumnIndex] = {...c};
@@ -19,4 +20,2 @@ newColumns[newColumnIndex].sortDirection = undefined;
   });
-
-  newColumns[index] = {...column};
   return newColumns;
@@ -23,0 +22,0 @@ };

Utils/PropsUtils.js

@@ -13,2 +13,6 @@ var __assign = (this && this.__assign) || function () {
 import { isFunction } from 'util';
+import { filterData, searchData } from './FilterUtils';
+import { getGroupedData } from './GroupUtils';
+import { sortData } from './SortUtils';
+import { convertToColumnTypes } from './TypeUtils';
 export var extendProps = function (childElementAttributes, childProps, childCustomAttributes, dispatch) {
@@ -48,2 +52,26 @@ var resultProps = childElementAttributes;
     return mergedResult;
+};
+export var prepareTableOptions = function (props) {
+    var extendedFilter = props.extendedFilter, groups = props.groups, groupsExpanded = props.groupsExpanded, search = props.search;
+    var columns = props.columns, _a = props.data, data = _a === void 0 ? [] : _a;
+    data = extendedFilter ? extendedFilter(data) : data;
+    data = search ? searchData(columns, data, search) : data;
+    data = convertToColumnTypes(data, columns);
+    data = filterData(data, columns);
+    data = sortData(columns, data);
+    var groupColumnsCount = 0;
+    var groupedColumns = [];
+    if (groups) {
+        groupColumnsCount = groups.length;
+        groupedColumns = columns.filter(function (c) { return groups.some(function (g) { return g.columnKey === c.key; }); });
+        columns = columns.filter(function (c) { return !groups.some(function (g) { return g.columnKey === c.key; }); });
+    }
+    var groupedData = groups ? getGroupedData(data, groups, groupedColumns, groupsExpanded) : data;
+    return {
+        columns: columns,
+        data: data,
+        groupColumnsCount: groupColumnsCount,
+        groupedColumns: groupedColumns,
+        groupedData: groupedData,
+    };
 };

Utils/PropsUtils.ts

 import { HTMLAttributes } from 'react';
 import { isFunction } from 'util';
 
+import { ITableProps } from '../';
+import { Column } from '../models';
 import { ChildAttributesItem } from '../types';
+import { filterData, searchData } from './FilterUtils';
+import { getGroupedData } from './GroupUtils';
+import { sortData } from './SortUtils';
+import { convertToColumnTypes } from './TypeUtils';
 
@@ -52,1 +58,39 @@ export const extendProps = (
 };
+
+export const prepareTableOptions = (props: ITableProps) => {
+  const {
+    extendedFilter,
+    groups,
+    groupsExpanded,
+    search,
+  } = props;
+  let {
+    columns,
+    data = [],
+  } = props;
+  data = extendedFilter ? extendedFilter(data) : data;
+  data = search ? searchData(columns, data, search) : data;
+
+  data = convertToColumnTypes(data, columns);
+
+  data = filterData(data, columns);
+  data = sortData(columns, data);
+
+  let groupColumnsCount = 0;
+  let groupedColumns: Column[] = [];
+  if (groups) {
+    groupColumnsCount = groups.length;
+    groupedColumns = columns.filter((c) => groups.some((g) => g.columnKey === c.key));
+    columns = columns.filter((c) => !groups.some((g) => g.columnKey === c.key));
+  }
+
+  const groupedData = groups ? getGroupedData(data, groups, groupedColumns, groupsExpanded) : data;
+
+  return {
+    columns,
+    data,
+    groupColumnsCount,
+    groupedColumns,
+    groupedData,
+  };
+};

Utils/Virtualize.js

 export var getVirtualized = function (virtualScrolling, data) {
     var virtualizedData = [];
-    var _a = virtualScrolling.scrollPosition, scrollPosition = _a === void 0 ? 0 : _a;
+    var _a = virtualScrolling.scrollTop, scrollTop = _a === void 0 ? 0 : _a;
     var _b = virtualScrolling.tbodyHeight, tbodyHeight = _b === void 0 ? 600 : _b;
@@ -13,3 +13,3 @@ var beginHeight = 0;
             : 40;
-        if (acc >= scrollPosition - itemHeight) {
+        if (acc >= scrollTop - itemHeight) {
             if (tbodyHeight >= -(itemHeight * 5)) {
@@ -16,0 +16,0 @@ tbodyHeight = tbodyHeight - itemHeight;

Utils/Virtualize.ts

@@ -5,3 +5,3 @@ import { VirtualScrolling } from '../Models/VirtualScrolling';
   const virtualizedData: any[] = [];
-  const { scrollPosition = 0 } = virtualScrolling;
+  const { scrollTop = 0 } = virtualScrolling;
   let { tbodyHeight = 600 } = virtualScrolling;
@@ -18,3 +18,3 @@ let beginHeight = 0;
       : 40;
-    if (acc >= scrollPosition - itemHeight) {
+    if (acc >= scrollTop - itemHeight) {
       if (tbodyHeight >= -(itemHeight * 5)) {
@@ -21,0 +21,0 @@ tbodyHeight = tbodyHeight - itemHeight;

No alert changes

Improved metrics

Number of package files

146

increased by2.82%

Lines of code

3830

increased by3.99%

Worsened metrics

Total package byte prevSize

201371

decreased by-6.04%

Number of lines in readme file

125

decreased by-72.89%

No dependency changes