ka-table - npm Package Compare versions

Comparing version 3.8.1 to 4.0.0

actionCreators.js

@@ -49,4 +49,4 @@ import { ActionType } from './enums';
 }); };
-export var search = function (searchValue) { return ({
-    search: searchValue,
+export var search = function (searchText) { return ({
+    searchText: searchText,
     type: ActionType.Search,
@@ -53,0 +53,0 @@ }); };

actionCreators.ts

@@ -60,4 +60,4 @@ import { ActionType } from './enums';
 
-export const search = (searchValue: any) => ({
-  search: searchValue,
+export const search = (searchText: any) => ({
+  searchText,
   type: ActionType.Search,
@@ -64,0 +64,0 @@ });

Components/CellComponent/CellComponent.js

@@ -15,11 +15,17 @@ var __assign = (this && this.__assign) || function () {
 import { getField } from '../../Utils/ColumnUtils';
-import { getValueByColumn } from '../../Utils/DataUtils';
-import CellContent from '../CellContent/CellContent';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 import CellEditor from '../CellEditor/CellEditor';
+import CellText from '../CellText/CellText';
 var CellComponent = function (props) {
-    var column = props.column, style = props.column.style, editorValue = props.editorValue, hasEditorValue = props.hasEditorValue, isEditableCell = props.isEditableCell, rowData = props.rowData;
-    var value = hasEditorValue ? editorValue : getValueByColumn(rowData, column);
-    return (React.createElement("td", { style: style, className: defaultOptions.css.cell }, isEditableCell ? (React.createElement(CellEditor, __assign({}, props, { value: value, field: getField(column) })))
-        : (React.createElement(CellContent, __assign({}, props, { value: value, field: getField(column) })))));
+    var childComponents = props.childComponents, column = props.column, style = props.column.style, isEditableCell = props.isEditableCell;
+    var _a = getElementCustomization({
+        className: defaultOptions.css.cell,
+        style: style
+    }, props, childComponents.cell), elementAttributes = _a.elementAttributes, content = _a.content;
+    return (React.createElement("td", __assign({}, elementAttributes), content ||
+        (isEditableCell ?
+            (React.createElement(CellEditor, __assign({}, props, { field: getField(column) })))
+            :
+                (React.createElement(CellText, __assign({}, props, { field: getField(column) }))))));
 };
 export default CellComponent;

Components/CellEditor/CellEditor.js

@@ -13,16 +13,16 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
+import defaultOptions from '../../defaultOptions';
 import { EditingMode } from '../../enums';
 import { getCellEditorDispatchHandler } from '../../Utils/CellUtils';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 import CellEditorState from '../CellEditorState/CellEditorState';
 var CellEditor = function (props) {
-    var editor = props.column.editor, dispatch = props.dispatch, editingMode = props.editingMode;
-    if (editor) {
-        return editor(props);
-    }
-    if (editingMode === EditingMode.Cell) {
-        var dispatchHandler = getCellEditorDispatchHandler(dispatch);
-        return React.createElement(CellEditorState, __assign({}, props, { dispatch: dispatchHandler, autoFocus: true }));
-    }
-    return React.createElement(CellEditorState, __assign({}, props));
+    var childComponents = props.childComponents, dispatch = props.dispatch, editingMode = props.editingMode;
+    var _a = getElementCustomization({
+        className: "" + defaultOptions.css.cellEditor
+    }, props, childComponents.cellEditor), elementAttributes = _a.elementAttributes, content = _a.content;
+    return (React.createElement("div", __assign({}, elementAttributes), content || (editingMode === EditingMode.Cell
+        ? React.createElement(CellEditorState, __assign({}, props, { dispatch: getCellEditorDispatchHandler(dispatch), autoFocus: true }))
+        : React.createElement(CellEditorState, __assign({}, props)))));
 };
 export default CellEditor;

Components/CellEditorState/CellEditorState.js

@@ -20,3 +20,3 @@ var __assign = (this && this.__assign) || function () {
 var CellEditorState = function (props) {
-    var column = props.column, rowData = props.rowData, rowKeyValue = props.rowKeyValue, dispatch = props.dispatch, value = props.value, editingMode = props.editingMode;
+    var column = props.column, dispatch = props.dispatch, editingMode = props.editingMode, rowData = props.rowData, rowKeyValue = props.rowKeyValue, validation = props.validation, value = props.value;
     var validationMessage = props.validationMessage;
@@ -27,3 +27,3 @@ var _a = useState(rowData), rowDataState = _a[0], changeRowData = _a[1];
     validationMessage = isCellEditingMode || validationMessage
-        ? getValidationValue(editorValueState, rowDataState, column) || ''
+        ? getValidationValue(editorValueState, rowDataState, column, validation) || ''
         : validationMessage;
@@ -30,0 +30,0 @@ var onValueStateChange = function (action) {

Components/CellEditorValidation/CellEditorValidation.js

@@ -13,2 +13,3 @@ var __assign = (this && this.__assign) || function () {
 import React from 'react';
+import defaultOptions from '../../defaultOptions';
 import CellEditorDataType from '../CellEditorDataType/CellEditorDataType';
@@ -18,7 +19,6 @@ import CellEditorValidationMessage from '../CellEditorValidationMessage/CellEditorValidationMessage';
     var validationMessage = props.validationMessage;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "ka-cell-editor " + (validationMessage ? 'ka-cell-editor-validation-error' : '') },
-            React.createElement(CellEditorDataType, __assign({}, props)),
-            validationMessage && React.createElement(CellEditorValidationMessage, { message: validationMessage }))));
+    return (React.createElement("div", { className: "" + (validationMessage ? defaultOptions.css.kaCellEditorValidationError : '') },
+        React.createElement(CellEditorDataType, __assign({}, props)),
+        validationMessage && React.createElement(CellEditorValidationMessage, { message: validationMessage })));
 };
 export default CellEditorValidation;

Components/CellText/CellText.js

@@ -14,10 +14,12 @@ var __assign = (this && this.__assign) || function () {
 import { openEditor } from '../../actionCreators';
+import defaultOptions from '../../defaultOptions';
 import { EditingMode } from '../../enums';
 import { isEmpty } from '../../Utils/CommonUtils';
-import { extendProps } from '../../Utils/PropsUtils';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 var CellText = function (props) {
-    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();
-    var componentProps = {
-        className: 'ka-cell-text',
+    var childComponents = props.childComponents, column = props.column, format = props.format, dispatch = props.dispatch, editingMode = props.editingMode, rowKeyValue = props.rowKeyValue, value = props.value;
+    var formatedValue = format && format({ column: column, value: value });
+    formatedValue = formatedValue || (!isEmpty(value) && value.toString());
+    var _a = getElementCustomization({
+        className: defaultOptions.css.cellText,
         onClick: function () {
@@ -28,6 +30,5 @@ if (editingMode === EditingMode.Cell) {
         },
-    };
-    var divProps = extendProps(componentProps, props, childAttributes.cell, props.dispatch);
-    return (React.createElement("div", __assign({}, divProps), formatedValue || React.createElement(React.Fragment, null, "\u00A0")));
+    }, props, childComponents.cellText), elementAttributes = _a.elementAttributes, content = _a.content;
+    return (React.createElement("div", __assign({}, elementAttributes), content || formatedValue || React.createElement(React.Fragment, null, "\u00A0")));
 };
 export default CellText;

Components/DataAndDetailsRows/DataAndDetailsRows.js

@@ -16,7 +16,7 @@ var __assign = (this && this.__assign) || function () {
 var DataAndDetailsRows = function (props) {
-    var isDetailsRowShown = props.isDetailsRowShown, detailsRow = props.detailsRow;
+    var isDetailsRowShown = props.isDetailsRowShown;
     return (React.createElement(React.Fragment, null,
         React.createElement(DataRow, __assign({}, props)),
-        isDetailsRowShown && detailsRow && React.createElement(DetailsRow, __assign({}, props))));
+        isDetailsRowShown && React.createElement(DetailsRow, __assign({}, props))));
 };
 export default DataAndDetailsRows;

Components/DataRow/DataRow.js

@@ -14,19 +14,16 @@ var __assign = (this && this.__assign) || function () {
 import defaultOptions from '../../defaultOptions';
-import { extendProps } from '../../Utils/PropsUtils';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 import DataRowContent from '../DataRowContent/DataRowContent';
 import EmptyCells from '../EmptyCells/EmptyCells';
 var DataRow = function (props) {
-    var childAttributes = props.childAttributes, dataRow = props.dataRow, groupColumnsCount = props.groupColumnsCount, isSelectedRow = props.isSelectedRow, rowKeyValue = props.rowKeyValue, trRef = props.trRef;
-    var dataRowProps = __assign(__assign({}, props), { isSelectedRow: isSelectedRow, rowKeyValue: rowKeyValue });
-    var componentProps = {
+    var dataRow = props.childComponents.dataRow, groupColumnsCount = props.groupColumnsCount, isSelectedRow = props.isSelectedRow, trRef = props.trRef;
+    var _a = getElementCustomization({
         className: defaultOptions.css.row + " " + (isSelectedRow ? defaultOptions.css.rowSelected : ''),
-    };
-    var divProps = extendProps(componentProps, props, childAttributes.dataRow, props.dispatch);
-    var dataRowContent = dataRow && dataRow(dataRowProps);
-    return (React.createElement("tr", __assign({}, divProps, { ref: trRef }),
+    }, props, dataRow), elementAttributes = _a.elementAttributes, content = _a.content;
+    return (React.createElement("tr", __assign({}, elementAttributes, { ref: trRef }),
         React.createElement(EmptyCells, { count: groupColumnsCount }),
-        dataRowContent
-            ? React.createElement("td", { className: defaultOptions.css.cell }, dataRowContent)
-            : React.createElement(DataRowContent, __assign({}, dataRowProps))));
+        content
+            ? React.createElement("td", { className: defaultOptions.css.cell }, content)
+            : React.createElement(DataRowContent, __assign({}, props))));
 };
 export default DataRow;

Components/DataRowContent/DataRowContent.js

 import React from 'react';
 import { getEditableCell } from '../../Utils/CellUtils';
-import { getRowEditableCells } from '../../Utils/FilterUtils';
+import { getValueByColumn } from '../../Utils/DataUtils';
 import CellComponent from '../CellComponent/CellComponent';
 var DataRowContent = function (_a) {
-    var childAttributes = _a.childAttributes, columns = _a.columns, dispatch = _a.dispatch, editableCells = _a.editableCells, editingMode = _a.editingMode, isDetailsRowShown = _a.isDetailsRowShown, isSelectedRow = _a.isSelectedRow, rowData = _a.rowData, rowKeyField = _a.rowKeyField, rowKeyValue = _a.rowKeyValue;
-    var rowEditableCells = getRowEditableCells(rowKeyValue, editableCells);
+    var childComponents = _a.childComponents, columns = _a.columns, dispatch = _a.dispatch, editingMode = _a.editingMode, format = _a.format, isDetailsRowShown = _a.isDetailsRowShown, isSelectedRow = _a.isSelectedRow, rowData = _a.rowData, rowEditableCells = _a.rowEditableCells, rowKeyField = _a.rowKeyField, rowKeyValue = _a.rowKeyValue, validation = _a.validation;
     return (React.createElement(React.Fragment, null, columns.map(function (column) {
         var editableCell = getEditableCell(column, rowEditableCells);
-        return (React.createElement(CellComponent, { childAttributes: childAttributes, column: column, dispatch: dispatch, editingMode: editingMode, isEditableCell: !!editableCell, isDetailsRowShown: isDetailsRowShown, isSelectedRow: isSelectedRow, editorValue: editableCell && editableCell.editorValue, validationMessage: editableCell && editableCell.validationMessage, hasEditorValue: editableCell && editableCell.hasOwnProperty('editorValue'), key: column.key, rowData: rowData, rowKeyField: rowKeyField, rowKeyValue: rowKeyValue }));
+        var hasEditorValue = editableCell && editableCell.hasOwnProperty('editorValue');
+        var editorValue = editableCell && editableCell.editorValue;
+        var value = hasEditorValue ? editorValue : getValueByColumn(rowData, column);
+        return (React.createElement(CellComponent, { childComponents: childComponents, column: column, dispatch: dispatch, editingMode: editingMode, editorValue: editorValue, format: format, hasEditorValue: editableCell && editableCell.hasOwnProperty('editorValue'), isDetailsRowShown: isDetailsRowShown, isEditableCell: !!editableCell, isSelectedRow: isSelectedRow, key: column.key, rowData: rowData, rowKeyField: rowKeyField, rowKeyValue: rowKeyValue, validation: validation, validationMessage: editableCell && editableCell.validationMessage, value: value }));
     })));
 };
 export default DataRowContent;

Components/DetailsRow/DetailsRow.js

@@ -14,15 +14,14 @@ var __assign = (this && this.__assign) || function () {
 import defaultOptions from '../../defaultOptions';
-import { extendProps } from '../../Utils/PropsUtils';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 import EmptyCells from '../EmptyCells/EmptyCells';
 var DetailsRow = function (props) {
-    var detailsRow = props.detailsRow, groupColumnsCount = props.groupColumnsCount, childAttributes = props.childAttributes, columns = props.columns;
-    var componentProps = {
+    var groupColumnsCount = props.groupColumnsCount, childComponents = props.childComponents, columns = props.columns;
+    var _a = getElementCustomization({
         className: "" + defaultOptions.css.detailsRow,
-    };
-    var divProps = extendProps(componentProps, props, childAttributes.detailsRow, props.dispatch);
-    return (React.createElement("tr", __assign({}, divProps),
+    }, props, childComponents.detailsRow), elementAttributes = _a.elementAttributes, content = _a.content;
+    return (React.createElement("tr", __assign({}, elementAttributes),
         React.createElement(EmptyCells, { count: groupColumnsCount }),
-        detailsRow
-            && React.createElement("td", { className: defaultOptions.css.cell, colSpan: columns.length }, detailsRow(props))));
+        content
+            && React.createElement("td", { className: defaultOptions.css.cell, colSpan: columns.length }, content)));
 };
 export default DetailsRow;

Components/FilterCell/FilterCell.js

@@ -13,8 +13,13 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 import FilterRowDataType from '../FilterRowDataType/FilterRowDataType';
 var FilterCell = function (props) {
-    var _a = props.column, style = _a.style, filterRowCell = _a.filterRowCell;
-    return (React.createElement("td", { style: style, className: 'ka-thead-cell ka-filter-row-cell' }, filterRowCell ? filterRowCell(props) :
+    var childComponents = props.childComponents, style = props.column.style;
+    var _a = getElementCustomization({
+        className: 'ka-thead-cell ka-filter-row-cell',
+        style: style
+    }, props, childComponents.filterRowCell), elementAttributes = _a.elementAttributes, content = _a.content;
+    return (React.createElement("td", __assign({}, elementAttributes), content ? content :
         (React.createElement(FilterRowDataType, __assign({}, props)))));
 };
 export default FilterCell;

Components/FilterRow/FilterRow.js

@@ -5,9 +5,9 @@ import React from 'react';
 var FilterRow = function (_a) {
-    var columns = _a.columns, dispatch = _a.dispatch, groupColumnsCount = _a.groupColumnsCount;
+    var childComponents = _a.childComponents, columns = _a.columns, dispatch = _a.dispatch, groupColumnsCount = _a.groupColumnsCount;
     return (React.createElement("tr", { className: 'ka-filter-row ka-tr' },
         React.createElement(EmptyCells, { count: groupColumnsCount }),
         columns.map(function (column) {
-            return (React.createElement(FilterCell, { key: column.key, column: column, dispatch: dispatch }));
+            return (React.createElement(FilterCell, { key: column.key, column: column, childComponents: childComponents, dispatch: dispatch }));
         })));
 };
 export default FilterRow;

Components/GroupRow/GroupRow.js

@@ -14,7 +14,11 @@ var __assign = (this && this.__assign) || function () {
 import defaultOptions from '../../defaultOptions';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 import GroupRowContent from '../GroupRowContent/GroupRowContent';
 var GroupRow = function (props) {
-    var groupRow = props.groupRow;
-    return (React.createElement("tr", { className: defaultOptions.css.groupRow }, groupRow ? groupRow(props) : React.createElement(GroupRowContent, __assign({}, props))));
+    var childComponents = props.childComponents;
+    var _a = getElementCustomization({
+        className: defaultOptions.css.groupRow
+    }, props, childComponents.groupRow), elementAttributes = _a.elementAttributes, content = _a.content;
+    return (React.createElement("tr", __assign({}, elementAttributes), content ? content : React.createElement(GroupRowContent, __assign({}, props))));
 };
 export default GroupRow;

Components/GroupRowContent/GroupRowContent.js

@@ -0,11 +1,27 @@
+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 { updateGroupsExpanded } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 import EmptyCells from '../EmptyCells/EmptyCells';
 var GroupRowContent = function (props) {
-    var column = props.column, contentColSpan = props.contentColSpan, dispatch = props.dispatch, groupIndex = props.groupIndex, groupKey = props.groupKey, isExpanded = props.isExpanded, text = props.text;
+    var childComponents = props.childComponents, contentColSpan = props.contentColSpan, dispatch = props.dispatch, groupIndex = props.groupIndex, groupKey = props.groupKey, isExpanded = props.isExpanded, text = props.text;
+    var _a = getElementCustomization({
+        className: defaultOptions.css.groupCell,
+        colSpan: contentColSpan
+    }, props, childComponents.groupCell), elementAttributes = _a.elementAttributes, content = _a.content;
     return (React.createElement(React.Fragment, null,
         React.createElement(EmptyCells, { count: groupIndex }),
-        React.createElement("td", { className: 'ka-group-column', colSpan: contentColSpan },
-            React.createElement("div", { className: 'ka-group-column-content' },
+        React.createElement("td", __assign({}, elementAttributes),
+            React.createElement("div", { className: 'ka-group-cell-content' },
                 React.createElement("div", { onClick: function () {
@@ -15,4 +31,4 @@ dispatch(updateGroupsExpanded(groupKey));
                         ? defaultOptions.css.iconGroupArrowExpanded : defaultOptions.css.iconGroupArrowCollapsed }),
-                column && column.groupCell ? column.groupCell(props) : React.createElement("div", { className: 'ka-group-text' }, text)))));
+                content || React.createElement("div", { className: 'ka-group-text' }, text)))));
 };
 export default GroupRowContent;

Components/HeadCell/HeadCell.js

@@ -15,15 +15,21 @@ var __assign = (this && this.__assign) || function () {
 import { headCellDispatchWrapper } from '../../Utils/CellResizeUtils';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
+import { isSortingEnabled } from '../../Utils/SortUtils';
 import HeadCellContent from '../HeadCellContent/HeadCellContent';
 import HeadCellResize from '../HeadCellResize/HeadCellResize';
 var HeadCell = function (props) {
-    var _a = props.column, style = _a.style, isResizable = _a.isResizable, dispatch = props.dispatch;
+    var childComponents = props.childComponents, _a = props.column, style = _a.style, isResizable = _a.isResizable, dispatch = props.dispatch, sortingMode = props.sortingMode;
     var _b = React.useState(style ? style.width : undefined), width = _b[0], setWidth = _b[1];
     var stateStyle = __assign(__assign({}, style), { width: width });
     var headCellDispatch = headCellDispatchWrapper(setWidth, dispatch);
-    return (React.createElement("th", { scope: 'col', style: stateStyle, className: defaultOptions.css.theadCell },
+    var _c = getElementCustomization({
+        className: defaultOptions.css.theadCell + " " + (isSortingEnabled(sortingMode) ? 'ka-pointer' : ''),
+        style: stateStyle,
+        scope: 'col'
+    }, props, childComponents.headCell), elementAttributes = _c.elementAttributes, content = _c.content;
+    return (React.createElement("th", __assign({}, elementAttributes),
         React.createElement("div", { className: defaultOptions.css.theadCellWrapper },
-            React.createElement("div", { className: defaultOptions.css.theadCellContentWrapper },
-                React.createElement(HeadCellContent, __assign({}, props))),
+            React.createElement("div", { className: defaultOptions.css.theadCellContentWrapper }, content || React.createElement(HeadCellContent, __assign({}, props))),
             isResizable && (React.createElement(HeadCellResize, __assign({}, props, { currentWidth: width, dispatch: headCellDispatch }))))));
 };
 export default HeadCell;

Components/HeadCellContent/HeadCellContent.js

 import * as React from 'react';
 import { updateSortDirection } from '../../actionCreators';
 import defaultOptions from '../../defaultOptions';
-import { SortDirection, SortingMode } from '../../enums';
+import { SortDirection } from '../../enums';
+import { isSortingEnabled } from '../../Utils/SortUtils';
 var HeadCellContent = function (props) {
-    var headCell = props.column.headCell;
-    if (headCell) {
-        return headCell(props);
-    }
     var column = props.column, dispatch = props.dispatch, sortingMode = props.sortingMode;
-    var isSortingEnabled = sortingMode === SortingMode.Single;
-    var sortClick = isSortingEnabled ? function () {
+    var sortingEnabled = isSortingEnabled(sortingMode);
+    var sortClick = sortingEnabled ? function () {
         dispatch(updateSortDirection(column.key));
     } : undefined;
-    return (React.createElement("div", { className: defaultOptions.css.theadCellContent + " " + (isSortingEnabled ? 'ka-pointer' : ''), onClick: sortClick },
+    return (React.createElement("div", { className: defaultOptions.css.theadCellContent + " " + (sortingEnabled ? 'ka-pointer' : ''), onClick: sortClick },
         React.createElement("span", null, column.title),
-        column.sortDirection && isSortingEnabled && (React.createElement("span", { className: column.sortDirection === SortDirection.Ascend
+        column.sortDirection && sortingEnabled && (React.createElement("span", { className: column.sortDirection === SortDirection.Ascend
                 ? defaultOptions.css.iconSortArrowUp
@@ -19,0 +16,0 @@ : defaultOptions.css.iconSortArrowDown }))));

Components/HeadRow/HeadRow.js

@@ -6,9 +6,9 @@ import React from 'react';
 var HeadRow = function (_a) {
-    var areAllRowsSelected = _a.areAllRowsSelected, columns = _a.columns, groupColumnsCount = _a.groupColumnsCount, dispatch = _a.dispatch, sortingMode = _a.sortingMode;
+    var areAllRowsSelected = _a.areAllRowsSelected, childComponents = _a.childComponents, columns = _a.columns, dispatch = _a.dispatch, groupColumnsCount = _a.groupColumnsCount, sortingMode = _a.sortingMode;
     return (React.createElement("tr", { className: defaultOptions.css.theadRow },
         React.createElement(EmptyCells, { count: groupColumnsCount }),
         columns.map(function (column) {
-            return (React.createElement(HeadCell, { areAllRowsSelected: areAllRowsSelected, column: column, dispatch: dispatch, key: column.key, sortingMode: sortingMode }));
+            return (React.createElement(HeadCell, { areAllRowsSelected: areAllRowsSelected, childComponents: childComponents, column: column, dispatch: dispatch, key: column.key, sortingMode: sortingMode }));
         })));
 };
 export default HeadRow;

Components/NewRow/NewRow.js

@@ -6,5 +6,5 @@ import React from 'react';
 var NewRow = function (_a) {
-    var childAttributes = _a.childAttributes, columns = _a.columns, dispatch = _a.dispatch, editableCells = _a.editableCells, groupColumnsCount = _a.groupColumnsCount, rowKeyField = _a.rowKeyField;
-    return (React.createElement(DataRow, { childAttributes: childAttributes, columns: columns, dispatch: dispatch, editableCells: editableCells, editingMode: EditingMode.None, groupColumnsCount: groupColumnsCount, isSelectedRow: false, isDetailsRowShown: false, rowData: {}, rowKeyField: rowKeyField, rowKeyValue: newRowId, selectedRows: [] }));
+    var childComponents = _a.childComponents, columns = _a.columns, dispatch = _a.dispatch, editableCells = _a.editableCells, format = _a.format, groupColumnsCount = _a.groupColumnsCount, rowKeyField = _a.rowKeyField, validation = _a.validation;
+    return (React.createElement(DataRow, { childComponents: childComponents, columns: columns, dispatch: dispatch, format: format, editableCells: editableCells, editingMode: EditingMode.None, groupColumnsCount: groupColumnsCount, isSelectedRow: false, isDetailsRowShown: false, rowData: {}, rowKeyField: rowKeyField, rowKeyValue: newRowId, validation: validation, selectedRows: [], rowEditableCells: editableCells }));
 };
 export default NewRow;

Components/NoDataRow/NoDataRow.js

@@ -0,7 +1,22 @@
+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';
-var NoDataRow = function (_a) {
-    var columns = _a.columns, groupColumnsCount = _a.groupColumnsCount, noDataRow = _a.noDataRow;
-    return (React.createElement("tr", { className: 'ka-tr ka-no-data-row' },
-        React.createElement("td", { className: 'ka-no-data-cell', colSpan: columns.length + groupColumnsCount }, noDataRow())));
+import { getElementCustomization } from '../../Utils/ComponentUtils';
+var NoDataRow = function (props) {
+    var childComponents = props.childComponents, columns = props.columns, groupColumnsCount = props.groupColumnsCount;
+    var _a = getElementCustomization({
+        className: 'ka-tr ka-no-data-row'
+    }, props, childComponents.noDataRow), elementAttributes = _a.elementAttributes, content = _a.content;
+    return (React.createElement("tr", __assign({}, elementAttributes),
+        React.createElement("td", { className: 'ka-no-data-cell', colSpan: columns.length + groupColumnsCount }, content)));
 };
 export default NoDataRow;

Components/Rows/Rows.js

 import React, { useEffect, useRef } from 'react';
 import { newRowId } from '../../const';
+import { getRowEditableCells } from '../../Utils/FilterUtils';
 import { getGroupMark, getGroupText } from '../../Utils/GroupUtils';
@@ -8,3 +9,3 @@ import DataAndDetailsRows from '../DataAndDetailsRows/DataAndDetailsRows';
 var Rows = function (props) {
-    var columns = props.columns, data = props.data, dispatch = props.dispatch, editableCells = props.editableCells, groupColumnsCount = props.groupColumnsCount, groupRow = props.groupRow, groupedColumns = props.groupedColumns, _a = props.groups, groups = _a === void 0 ? [] : _a, _b = props.groupsExpanded, groupsExpanded = _b === void 0 ? [] : _b, detailsRow = props.detailsRow, _c = props.detailsRows, detailsRows = _c === void 0 ? [] : _c, onFirstRowRendered = props.onFirstRowRendered, rowKeyField = props.rowKeyField, selectedRows = props.selectedRows;
+    var childComponents = props.childComponents, columns = props.columns, data = props.data, _a = props.detailsRows, detailsRows = _a === void 0 ? [] : _a, dispatch = props.dispatch, editableCells = props.editableCells, format = props.format, groupColumnsCount = props.groupColumnsCount, groupedColumns = props.groupedColumns, _b = props.groups, groups = _b === void 0 ? [] : _b, _c = props.groupsExpanded, groupsExpanded = _c === void 0 ? [] : _c, onFirstRowRendered = props.onFirstRowRendered, rowKeyField = props.rowKeyField, selectedRows = props.selectedRows, validation = props.validation;
     var groupMark = getGroupMark();
@@ -18,3 +19,3 @@ var firstRowRef = useRef(null);
     return (React.createElement(React.Fragment, null,
-        newRowEditableCells && !!newRowEditableCells.length && (React.createElement(NewRow, { childAttributes: props.childAttributes, editableCells: newRowEditableCells, columns: columns, dispatch: dispatch, groupColumnsCount: groupColumnsCount, rowKeyField: rowKeyField })),
+        newRowEditableCells && !!newRowEditableCells.length && (React.createElement(NewRow, { childComponents: childComponents, columns: columns, dispatch: dispatch, editableCells: newRowEditableCells, format: format, groupColumnsCount: groupColumnsCount, rowKeyField: rowKeyField, validation: validation })),
         data.map(function (d) {
@@ -25,3 +26,3 @@ if (d.groupMark === groupMark) {
                 var column = group_1 && groupedColumns.find(function (c) { return c.key === group_1.columnKey; });
-                return (React.createElement(GroupRow, { column: column, contentColSpan: columns.length - groupIndex + groups.length, dispatch: dispatch, groupIndex: groupIndex, groupKey: d.key, groupRow: groupRow, isExpanded: groupsExpanded.some(function (ge) { return JSON.stringify(ge) === JSON.stringify(d.key); }), text: getGroupText(d.value, column), key: d.key }));
+                return (React.createElement(GroupRow, { childComponents: childComponents, column: column, contentColSpan: columns.length - groupIndex + groups.length, dispatch: dispatch, groupIndex: groupIndex, groupKey: d.key, isExpanded: groupsExpanded.some(function (ge) { return JSON.stringify(ge) === JSON.stringify(d.key); }), text: getGroupText(d.value, column), key: d.key }));
             }
@@ -31,4 +32,5 @@ else {
                 var isSelectedRow = selectedRows.some(function (s) { return s === rowKeyValue_1; });
-                var isDetailsRowShown = !!detailsRow && detailsRows.some(function (r) { return r === rowKeyValue_1; });
-                var dataRow = (React.createElement(DataAndDetailsRows, { childAttributes: props.childAttributes, columns: props.columns, dataRow: props.dataRow, dispatch: props.dispatch, editableCells: props.editableCells, editingMode: props.editingMode, groupColumnsCount: props.groupColumnsCount, detailsRow: detailsRow, isDetailsRowShown: isDetailsRowShown, isSelectedRow: isSelectedRow, key: d[rowKeyField], rowData: d, rowKeyField: props.rowKeyField, rowKeyValue: rowKeyValue_1, selectedRows: props.selectedRows, trRef: rowRefLink }));
+                var isDetailsRowShown = detailsRows.some(function (r) { return r === rowKeyValue_1; });
+                var rowEditableCells = getRowEditableCells(rowKeyValue_1, editableCells);
+                var dataRow = (React.createElement(DataAndDetailsRows, { childComponents: props.childComponents, columns: props.columns, dispatch: dispatch, editableCells: props.editableCells, editingMode: props.editingMode, format: format, groupColumnsCount: props.groupColumnsCount, isDetailsRowShown: isDetailsRowShown, isSelectedRow: isSelectedRow, key: d[rowKeyField], rowData: d, rowKeyField: props.rowKeyField, rowKeyValue: rowKeyValue_1, rowEditableCells: rowEditableCells, selectedRows: props.selectedRows, trRef: rowRefLink, validation: validation }));
                 rowRefLink = undefined;
@@ -35,0 +37,0 @@ return dataRow;

Components/Table/Table.js

@@ -16,11 +16,11 @@ var __assign = (this && this.__assign) || function () {
 import { wrapDispatch } from '../../Utils/ActionUtils';
+import { getElementCustomization } from '../../Utils/ComponentUtils';
 import { getExpandedGroups } from '../../Utils/GroupUtils';
-import { extendProps, prepareTableOptions } from '../../Utils/PropsUtils';
-import FilterRow from '../FilterRow/FilterRow';
-import HeadRow from '../HeadRow/HeadRow';
+import { prepareTableOptions } from '../../Utils/PropsUtils';
 import Loading from '../Loading/Loading';
 import Paging from '../Paging/Paging';
 import TableBody from '../TableBody/TableBody';
+import { TableHead } from '../TableHead/TableHead';
 export var Table = function (props) {
-    var _a = props.childAttributes, childAttributes = _a === void 0 ? {} : _a, _b = props.data, data = _b === void 0 ? [] : _b, _c = props.editableCells, editableCells = _c === void 0 ? [] : _c, _d = props.editingMode, editingMode = _d === void 0 ? EditingMode.None : _d, filteringMode = props.filteringMode, groups = props.groups, loading = props.loading, paging = props.paging, _e = props.selectedRows, selectedRows = _e === void 0 ? [] : _e, _f = props.sortingMode, sortingMode = _f === void 0 ? SortingMode.None : _f;
+    var _a = props.data, data = _a === void 0 ? [] : _a, _b = props.childComponents, childComponents = _b === void 0 ? {} : _b, _c = props.editableCells, editableCells = _c === void 0 ? [] : _c, _d = props.editingMode, editingMode = _d === void 0 ? EditingMode.None : _d, _e = props.filteringMode, filteringMode = _e === void 0 ? FilteringMode.None : _e, groups = props.groups, loading = props.loading, paging = props.paging, _f = props.selectedRows, selectedRows = _f === void 0 ? [] : _f, _g = props.sortingMode, sortingMode = _g === void 0 ? SortingMode.None : _g;
     var groupsExpanded = props.groupsExpanded;
@@ -33,18 +33,15 @@ var preparedOptions = prepareTableOptions(props);
     var dispatch = wrapDispatch(__assign({}, props), theadRef);
-    var componentProps = {
-        className: defaultOptions.css.table,
-    };
-    var tableProps = extendProps(componentProps, props, childAttributes.table, dispatch);
     var areAllRowsSelected = data.length === selectedRows.length;
     var isLoadingActive = loading && loading.enabled;
     var kaCss = isLoadingActive ? 'ka ka-loading-active' : 'ka';
+    var _h = getElementCustomization({
+        className: defaultOptions.css.table,
+    }, __assign(__assign({}, props), { dispatch: dispatch }), childComponents.table), elementAttributes = _h.elementAttributes, content = _h.content;
     return (React.createElement("div", { className: kaCss },
-        React.createElement("table", __assign({}, tableProps),
-            React.createElement("thead", { className: defaultOptions.css.thead, ref: theadRef },
-                React.createElement(HeadRow, { areAllRowsSelected: areAllRowsSelected, groupColumnsCount: preparedOptions.groupColumnsCount, columns: preparedOptions.columns, dispatch: dispatch, sortingMode: sortingMode }),
-                filteringMode === FilteringMode.FilterRow &&
-                    (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 }))),
+        content ||
+            (React.createElement("table", __assign({}, elementAttributes),
+                React.createElement(TableHead, { areAllRowsSelected: areAllRowsSelected, childComponents: childComponents, columns: preparedOptions.columns, dispatch: dispatch, filteringMode: filteringMode, groupColumnsCount: preparedOptions.groupColumnsCount, sortingMode: sortingMode, theadRef: theadRef }),
+                React.createElement(TableBody, __assign({}, props, { childComponents: childComponents, columns: preparedOptions.columns, data: preparedOptions.groupedData, dispatch: dispatch, editableCells: editableCells, editingMode: editingMode, groupColumnsCount: preparedOptions.groupColumnsCount, groupedColumns: preparedOptions.groupedColumns, groupsExpanded: groupsExpanded, selectedRows: selectedRows })))),
         React.createElement(Paging, __assign({}, paging, { dispatch: dispatch, pagesCount: preparedOptions.pagesCount })),
         React.createElement(Loading, __assign({}, loading))));
 };

Components/TableBodyContent/TableBodyContent.js

@@ -17,4 +17,4 @@ var __assign = (this && this.__assign) || function () {
     var data = props.data;
-    if (!data.length && props.noDataRow) {
-        return React.createElement(NoDataRow, __assign({}, props, { noDataRow: props.noDataRow }));
+    if (!data.length) {
+        return React.createElement(NoDataRow, __assign({}, props));
     }
@@ -21,0 +21,0 @@ return (React.createElement(VirtualizedRows, __assign({}, props)));

models.js

 export * from './Models/AttributeTableData';
-export * from './Models/Cell';
 export * from './Models/EditableCell';
-export * from './Models/ChildAttributes';
+export * from './Models/ChildComponents';
 export * from './Models/Column';
@@ -10,2 +9,3 @@ export * from './Models/CssClasses';
 export * from './Models/GroupRowData';
-export * from './Models/VirtualScrolling';
+export * from './Models/VirtualScrolling';
+export * from './Models/Paging';

models.ts

 
 export * from './Models/AttributeTableData';
-export * from './Models/Cell';
 export * from './Models/EditableCell';
-export * from './Models/ChildAttributes';
+export * from './Models/ChildComponents';
 export * from './Models/Column';
@@ -12,1 +11,2 @@ export * from './Models/CssClasses';
 export * from './Models/VirtualScrolling';
+export * from './Models/Paging';

Models/AttributeTableData.ts

@@ -1,2 +0,2 @@
-import { HTMLAttributes } from 'react';
+import { AllHTMLAttributes } from 'react';
 
@@ -7,5 +7,5 @@ import { DispatchFunc } from '../types';
   public baseFunc!: any;
-  public childElementAttributes!: HTMLAttributes<HTMLElement>;
+  public childElementAttributes!: AllHTMLAttributes<HTMLElement>;
   public dispatch!: DispatchFunc;
   public childProps!: T;
 }

Models/Column.js

@@ -1,4 +0,1 @@
-/**
- * Describes column of table its look and behaviour
- */
 var Column = /** @class */ (function () {
@@ -5,0 +2,0 @@ function Column() {

Models/Column.ts

 import { DataType, SortDirection } from '../enums';
-import {
-  CellFunc, EditorFunc, Field, FilterRowFunc, FormatFunc, GroupCellFunc, HeaderCellFunc, SearchFunc,
-  ValidationFunc,
-} from '../types';
+import { Field } from '../types';
 
-/**
- * Describes column of table its look and behaviour
- */
 export class Column {
-  public cell?: CellFunc;
   public dataType?: DataType;
-  public editor?: EditorFunc;
-  public filterRowCell?: FilterRowFunc;
   public filterRowValue?: any;
   public filterRowOperator?: any;
   public field?: Field;
-  public fieldParents?: Field[];
-  public format?: FormatFunc;
-  public groupCell?: GroupCellFunc;
-  public headCell?: HeaderCellFunc;
   public isEditable?: boolean;
   public isResizable?: boolean;
   public key!: string;
-  public search?: SearchFunc;
   public sortDirection?: SortDirection;
   public style?: React.CSSProperties;
   public title?: string;
-  public validation?: ValidationFunc;
 }

Models/CssClasses.js

 var CssClasses = /** @class */ (function () {
     function CssClasses() {
+        this.cell = 'ka-cell';
+        this.cellEditor = 'ka-cell-editor';
+        this.cellText = 'ka-cell-text';
+        this.groupCell = 'ka-group-cell';
+        this.detailsRow = 'ka-tr ka-details-row';
+        this.groupRow = 'ka-tr ka-group-row';
+        this.kaCellEditorValidationError = 'ka-cell-editor-validation-error';
+        this.row = 'ka-tr ka-row';
+        this.rowSelected = 'ka-row-selected';
         this.table = 'ka-table';
         this.tbody = 'ka-tbody';
         this.thead = 'ka-thead';
-        this.theadRow = 'ka-tr ka-thead-row';
         this.theadCell = 'ka-thead-cell';
-        this.theadCellWrapper = 'ka-thead-cell-wrapper';
-        this.theadCellResize = 'ka-thead-cell-resize';
         this.theadCellContent = 'ka-thead-cell-content';
         this.theadCellContentWrapper = 'ka-thead-cell-content-wrapper';
-        this.groupRow = 'ka-tr ka-group-row';
-        this.row = 'ka-tr ka-row';
-        this.detailsRow = 'ka-tr ka-details-row';
-        this.rowSelected = 'ka-row-selected';
-        this.cell = 'ka-cell';
+        this.theadCellResize = 'ka-thead-cell-resize';
+        this.theadCellWrapper = 'ka-thead-cell-wrapper';
+        this.theadRow = 'ka-tr ka-thead-row';
+        this.iconClose = 'ka-icon ka-icon-close';
         this.iconGroupArrowCollapsed = 'ka-icon ka-icon-group-arrow ka-icon-group-arrow-collapsed';
         this.iconGroupArrowExpanded = 'ka-icon ka-icon-group-arrow ka-icon-group-arrow-expanded';
-        this.iconClose = 'ka-icon ka-icon-close';
         this.iconSortArrowDown = 'ka-icon ka-icon-sort ka-icon-sort-arrow-down';
@@ -21,0 +25,0 @@ this.iconSortArrowUp = 'ka-icon ka-icon-sort ka-icon-sort-arrow-up';

Models/CssClasses.ts

 export class CssClasses {
+  public cell?: string = 'ka-cell';
+  public cellEditor: string = 'ka-cell-editor';
+  public cellText?: string = 'ka-cell-text';
+  public groupCell?: string = 'ka-group-cell';
+  public detailsRow?: string = 'ka-tr ka-details-row';
+  public groupRow?: string = 'ka-tr ka-group-row';
+  public kaCellEditorValidationError = 'ka-cell-editor-validation-error';
+  public row?: string = 'ka-tr ka-row';
+  public rowSelected?: string = 'ka-row-selected';
   public table?: string = 'ka-table';
   public tbody?: string = 'ka-tbody';
   public thead?: string = 'ka-thead';
-  public theadRow?: string = 'ka-tr ka-thead-row';
   public theadCell?: string = 'ka-thead-cell';
-  public theadCellWrapper?: string = 'ka-thead-cell-wrapper';
-  public theadCellResize?: string = 'ka-thead-cell-resize';
   public theadCellContent?: string = 'ka-thead-cell-content';
   public theadCellContentWrapper?: string = 'ka-thead-cell-content-wrapper';
-  public groupRow?: string = 'ka-tr ka-group-row';
-  public row?: string = 'ka-tr ka-row';
-  public detailsRow?: string = 'ka-tr ka-details-row';
-  public rowSelected?: string = 'ka-row-selected';
-  public cell?: string = 'ka-cell';
+  public theadCellResize?: string = 'ka-thead-cell-resize';
+  public theadCellWrapper?: string = 'ka-thead-cell-wrapper';
+  public theadRow?: string = 'ka-tr ka-thead-row';
 
+  public iconClose?: string = 'ka-icon ka-icon-close';
   public iconGroupArrowCollapsed?: string = 'ka-icon ka-icon-group-arrow ka-icon-group-arrow-collapsed';
   public iconGroupArrowExpanded?: string = 'ka-icon ka-icon-group-arrow ka-icon-group-arrow-expanded';
-  public iconClose?: string = 'ka-icon ka-icon-close';
   public iconSortArrowDown?: string = 'ka-icon ka-icon-sort ka-icon-sort-arrow-down';
@@ -21,0 +25,0 @@ public iconSortArrowUp?: string = 'ka-icon ka-icon-sort ka-icon-sort-arrow-up';

Models/EditableCell.js

@@ -1,22 +0,6 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-import { Cell } from './Cell';
-var EditableCell = /** @class */ (function (_super) {
-    __extends(EditableCell, _super);
+var EditableCell = /** @class */ (function () {
     function EditableCell() {
-        return _super !== null && _super.apply(this, arguments) || this;
     }
     return EditableCell;
-}(Cell));
+}());
 export { EditableCell };

Models/EditableCell.ts

@@ -1,6 +0,6 @@
-import { Cell } from './Cell';
-
-export class EditableCell extends Cell {
+export class EditableCell {
+  public columnKey!: string;
+  public rowKeyValue!: any;
   public editorValue?: any;
   public validationMessage?: any;
 }

package.json

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

Reducers/kaReducer.js

@@ -41,3 +41,3 @@ var __assign = (this && this.__assign) || function () {
 var kaReducer = function (state, action) {
-    var columns = state.columns, _a = state.data, data = _a === void 0 ? [] : _a, _b = state.editableCells, editableCells = _b === void 0 ? [] : _b, groupsExpanded = state.groupsExpanded, _c = state.detailsRows, detailsRows = _c === void 0 ? [] : _c, loading = state.loading, paging = state.paging, rowKeyField = state.rowKeyField, _d = state.selectedRows, selectedRows = _d === void 0 ? [] : _d, virtualScrolling = state.virtualScrolling;
+    var columns = state.columns, _a = state.data, data = _a === void 0 ? [] : _a, _b = state.detailsRows, detailsRows = _b === void 0 ? [] : _b, _c = state.editableCells, editableCells = _c === void 0 ? [] : _c, groupsExpanded = state.groupsExpanded, loading = state.loading, paging = state.paging, rowKeyField = state.rowKeyField, _d = state.selectedRows, selectedRows = _d === void 0 ? [] : _d, validation = state.validation, virtualScrolling = state.virtualScrolling;
     switch (action.type) {
@@ -119,3 +119,3 @@ case ActionType.ResizeColumn: {
         case ActionType.Search: {
-            return __assign(__assign({}, state), { search: action.search });
+            return __assign(__assign({}, state), { searchText: action.searchText });
         }
@@ -179,3 +179,7 @@ case ActionType.SelectSingleRow: {
                     var column = columns.find(function (c) { return c.key === cell.columnKey; });
-                    cell.validationMessage = column.validation && column.validation(cell.editorValue);
+                    cell.validationMessage = validation && validation({
+                        column: column,
+                        value: cell.editorValue,
+                        rowData: updatedRowData_1
+                    });
                     validationPassed_1 = validationPassed_1 && !cell.validationMessage;
@@ -182,0 +186,0 @@ });

Reducers/kaReducer.ts

@@ -31,5 +31,5 @@ import { newRowId } from '../const';
     data = [],
+    detailsRows = [],
     editableCells = [],
     groupsExpanded,
-    detailsRows = [],
     loading,
@@ -39,2 +39,3 @@ paging,
     selectedRows = [],
+    validation,
     virtualScrolling,
@@ -146,3 +147,3 @@ } = state;
     case ActionType.Search: {
-      return { ...state, search: action.search };
+      return { ...state, searchText: action.searchText };
     }
@@ -210,3 +211,7 @@ case ActionType.SelectSingleRow: {
           const column = columns.find((c) => c.key === cell.columnKey)!;
-          cell.validationMessage = column.validation && column.validation(cell.editorValue);
+          cell.validationMessage = validation && validation({
+            column,
+            value: cell.editorValue,
+            rowData: updatedRowData
+          });
           validationPassed = validationPassed && !cell.validationMessage;
@@ -213,0 +218,0 @@ });

types.ts

@@ -1,8 +0,1 @@
-import { PropsWithChildren } from 'react';
-
-import { ICellContentProps } from './Components/CellContent/CellContent';
-import { ICellEditorProps, IFilterRowEditorProps } from './Components/CellEditor/CellEditor';
-import { IDataRowProps } from './Components/DataRowContent/DataRowContent';
-import { IGroupRowProps } from './Components/GroupRowContent/GroupRowContent';
-import { IHeadCellProps } from './Components/HeadCell/HeadCell';
 import { AttributeTableData, Column } from './models';
@@ -17,24 +10,9 @@
 };
+type ElementAttributes<T> = React.AllHTMLAttributes<HTMLElement>;
 
-export type CellFunc = (props: CellFuncPropsWithChildren) => any;
-export type CellFuncPropsWithChildren = PropsWithChildren<ICellContentProps>;
-export type ChildAttributesItem<T> = WithExtraParameters<React.HTMLAttributes<HTMLElement>, T>;
-export type DataChangeFunc = (data: any[]) => void;
-export type DataRowFunc = (props: DataRowFuncPropsWithChildren) => any;
-export type DataRowFuncPropsWithChildren = PropsWithChildren<IDataRowProps>;
+export type ChildAttributesItem<T> = WithExtraParameters<ElementAttributes<T>, T>;
 export type DispatchFunc = (action: any) => void;
-export type EditorFunc = (props: EditorFuncPropsWithChildren) => any;
-export type EditorFuncPropsWithChildren = PropsWithChildren<ICellEditorProps>;
-export type EventFunc = (type: string, data: any) => void;
 export type Field = string;
-export type FilterRowFunc = (props: FilterRowFuncPropsWithChildren) => any;
-export type FilterRowFuncPropsWithChildren = PropsWithChildren<IFilterRowEditorProps>;
-export type FormatFunc = (value: any) => any;
-export type GroupCellFunc = (props: IGroupRowProps) => any;
-export type GroupRowFunc = (props: IGroupRowProps) => any;
-export type HeaderCellFunc = (props: HeaderCellFuncPropsWithChildren) => any;
-export type HeaderCellFuncPropsWithChildren = PropsWithChildren<IHeadCellProps>;
-export type NoDataRowFunc = () => any;
-export type OptionChangeFunc = (value: any) => void;
-export type SearchFunc = (searchText?: string, rowData?: any, column?: Column) => boolean;
-export type ValidationFunc = (value: any, rowData?: any) => string | void;
+export type FormatFunc = (props: { value: any, column: Column }) => any;
+export type SearchFunc = (props: { searchText: string, rowData: any, column: Column }) => boolean;
+export type ValidationFunc = (props: { value: any, rowData: any, column: Column }) => string | void;

utils.js

@@ -1,6 +0,5 @@
-import * as columnUtils from './Utils/ColumnUtils';
-import * as dateUtils from './Utils/DateUtils';
+import * as kaColumnUtils from './Utils/ColumnUtils';
+import * as kaDateUtils from './Utils/DateUtils';
 import * as kaPropsUtils from './Utils/PropsUtils';
-import * as typeUtils from './Utils/TypeUtils';
-// TODO: add ka prefix in 4.0.0
-export { columnUtils, dateUtils, kaPropsUtils, typeUtils, };
+import * as kaTypeUtils from './Utils/TypeUtils';
+export { kaColumnUtils, kaDateUtils, kaPropsUtils, kaTypeUtils, };

utils.ts

 
-import * as columnUtils from './Utils/ColumnUtils';
-import * as dateUtils from './Utils/DateUtils';
+import * as kaColumnUtils from './Utils/ColumnUtils';
+import * as kaDateUtils from './Utils/DateUtils';
 import * as kaPropsUtils from './Utils/PropsUtils';
-import * as typeUtils from './Utils/TypeUtils';
+import * as kaTypeUtils from './Utils/TypeUtils';
 
-// TODO: add ka prefix in 4.0.0
 export {
-  columnUtils,
-  dateUtils,
+  kaColumnUtils,
+  kaDateUtils,
   kaPropsUtils,
-  typeUtils,
+  kaTypeUtils,
 };

Utils/ColumnUtils.js

 export var getField = function (column) {
     return column.field || column.key;
+};
+export var getLastField = function (column) {
+    return getField(column).split('.').pop();
+};
+export var getLastFieldParents = function (column) {
+    var fieldParents = getField(column).split('.');
+    fieldParents.pop();
+    return fieldParents;
 };

Utils/ColumnUtils.ts

@@ -7,1 +7,11 @@ import { Column } from '../models';
 };
+
+export const getLastField = (column: Column): Field => {
+  return getField(column).split('.').pop()!;
+};
+
+export const getLastFieldParents = (column: Column): Field[] => {
+  const fieldParents = getField(column).split('.');
+  fieldParents.pop();
+  return fieldParents;
+};

Utils/DataUtils.js

@@ -19,3 +19,3 @@ var __assign = (this && this.__assign) || function () {
 };
-import { getField } from './ColumnUtils';
+import { getField, getLastField, getLastFieldParents } from './ColumnUtils';
 export var getParentValue = function (rowData, fieldParents, sameObj) {
@@ -47,15 +47,14 @@ if (sameObj === void 0) { sameObj = false; }
 export var getValueByColumn = function (rowData, column) {
-    return getValueByField(rowData, getField(column), column.fieldParents);
-};
-export var getValueByField = function (rowData, field, fieldParents) {
-    if (fieldParents && fieldParents.length) {
-        var parentValue = getParentValue(rowData, fieldParents);
-        if (parentValue) {
-            return parentValue[field];
+    var o = __assign({}, rowData);
+    var names = getField(column).split('.');
+    for (var i = 0, n = names.length; i < n; ++i) {
+        var k = names[i];
+        if (k in o) {
+            o = o[k];
         }
-        return undefined;
+        else {
+            return;
+        }
     }
-    else {
-        return rowData[field];
-    }
+    return o;
 };
@@ -77,3 +76,3 @@ var replaceValueForField = function (rowData, field, newValue, fieldParents) {
 export var replaceValue = function (rowData, column, newValue) {
-    return replaceValueForField(rowData, getField(column), newValue, column.fieldParents);
+    return replaceValueForField(rowData, getLastField(column), newValue, getLastFieldParents(column));
 };

Utils/DataUtils.ts

 import { Column } from '../Models/Column';
 import { Field } from '../types';
-import { getField } from './ColumnUtils';
+import { getField, getLastField, getLastFieldParents } from './ColumnUtils';
 
@@ -33,15 +33,13 @@ export const getParentValue = (rowData: any, fieldParents: Field[], sameObj = false) => {
 export const getValueByColumn = (rowData: any, column: Column) => {
-  return getValueByField(rowData, getField(column), column.fieldParents);
-};
-
-export const getValueByField = (rowData: any, field: Field, fieldParents?: Field[]) => {
-  if (fieldParents && fieldParents.length) {
-    const parentValue = getParentValue(rowData, fieldParents);
-    if (parentValue) {
-      return parentValue[field];
-    }
-    return undefined;
-  } else {
-    return rowData[field];
+  let o = {...rowData};
+  const names =  getField(column).split('.');
+  for (let i = 0, n = names.length; i < n; ++i) {
+      const k = names[i];
+      if (k in o) {
+          o = o[k];
+      } else {
+          return;
+      }
   }
+  return o;
 };
@@ -65,3 +63,3 @@
 export const replaceValue = (rowData: any, column: Column, newValue: any) => {
-  return replaceValueForField(rowData, getField(column), newValue, column.fieldParents);
+  return replaceValueForField(rowData, getLastField(column), newValue, getLastFieldParents(column));
 };

Utils/FilterUtils.js

@@ -8,7 +8,8 @@ import defaultOptions from '../defaultOptions';
 };
-export var searchData = function (columns, data, searchText) {
+export var searchData = function (columns, data, searchText, search) {
     return columns.reduce(function (initialData, c) {
         var filterFunction = function (item) {
-            if (c.search) {
-                return c.search(searchText, item, c);
+            var searchContent = search && search({ column: c, searchText: searchText, rowData: item });
+            if (searchContent != null) {
+                return searchContent;
             }
@@ -15,0 +16,0 @@ if (initialData.indexOf(item) >= 0) {

Utils/FilterUtils.ts

@@ -0,1 +1,2 @@
+
 import defaultOptions from '../defaultOptions';
@@ -6,2 +7,3 @@ import { DataType, FilterOperatorName } from '../enums';
 import { FilterOperator } from '../Models/FilterOperator';
+import { SearchFunc } from '../types';
 import { isEmpty } from './CommonUtils';
@@ -14,7 +16,8 @@ import { getValueByColumn } from './DataUtils';
 
-export const searchData = (columns: Column[], data: any[], searchText: string): any[] => {
+export const searchData = (columns: Column[], data: any[], searchText: string, search?: SearchFunc): any[] => {
   return columns.reduce((initialData: any[], c: Column) => {
     const filterFunction = (item: any) => {
-      if (c.search) {
-        return c.search(searchText, item, c);
+      const searchContent = search && search({ column: c, searchText, rowData: item });
+      if (searchContent != null) {
+        return searchContent;
       }
@@ -21,0 +24,0 @@ if (initialData.indexOf(item) >= 0) {

Utils/GroupUtils.js

@@ -84,5 +84,4 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 export var getGroupMark = function () { return groupMark; };
-export var getGroupText = function (value, column) {
-    var format = column && column.format;
-    return format ? format(value) : "" + (column && column.title && (column.title + ': ')) + value;
+export var getGroupText = function (value, column, format) {
+    return format ? format({ column: column, value: value }) : "" + (column && column.title ? column.title + ': ' : '') + value;
 };

Utils/GroupUtils.ts

@@ -0,3 +1,5 @@
+
 import { Column } from '../models';
 import { Group } from '../Models/Group';
+import { FormatFunc } from '../types';
 import { getValueByColumn } from './DataUtils';
@@ -98,5 +100,4 @@
 
-export const getGroupText = (value: any, column?: Column) => {
-  const format = column && column.format;
-  return format ? format(value) : `${column && column.title && (column.title + ': ')}${value}`;
+export const getGroupText = (value: any, column: Column, format?: FormatFunc) => {
+  return format ? format({ column, value }) : `${(column && column.title ? column.title + ': ' : '')}${value}`;
 };

Utils/PagingUtils.ts

@@ -1,6 +0,6 @@
-import { IPagingProps } from '../Components/Paging/Paging';
+import { PagingOptions } from '../models';
 
 export const centerLength = 5;
 const DEFAULT_PAGE_SIZE = 10;
-export const getPagesCount = (data: any[], paging?: IPagingProps): number => {
+export const getPagesCount = (data: any[], paging?: PagingOptions): number => {
   if (!paging || !paging.enabled) {
@@ -15,3 +15,3 @@ return 1;
 
-export const getPageData = (data: any[], paging?: IPagingProps): any[] => {
+export const getPageData = (data: any[], paging?: PagingOptions): any[] => {
   if (!paging || !paging.enabled || paging.pagesCount) {
@@ -18,0 +18,0 @@ return data;

Utils/PropsUtils.js

@@ -25,5 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import { convertToColumnTypes } from './TypeUtils';
-export var extendProps = function (childElementAttributes, childProps, childCustomAttributes, dispatch) {
+export var extendProps = function (childElementAttributes, childProps, childComponent) {
     var resultProps = childElementAttributes;
+    var childCustomAttributes = childComponent && childComponent.elementAttributes && childComponent.elementAttributes(childProps);
     if (childCustomAttributes) {
+        var dispatch = childProps.dispatch;
         resultProps = mergeProps(childElementAttributes, childProps, childCustomAttributes, dispatch);
@@ -56,13 +58,11 @@ }
     }
-    var mergedResult = __assign(__assign(__assign(__assign({}, childElementAttributes), childCustomAttributes), customPropsWithEvents), {
-        className: (childElementAttributes.className || '') + " " + (childCustomAttributes.className || ''),
-    });
+    var mergedResult = __assign(__assign(__assign(__assign({}, childElementAttributes), childCustomAttributes), customPropsWithEvents), { className: (childElementAttributes.className || '') + " " + (childCustomAttributes.className || ''), style: __assign(__assign({}, childCustomAttributes.style), childElementAttributes.style) });
     return mergedResult;
 };
 export var getData = function (props) {
-    var extendedFilter = props.extendedFilter, columns = props.columns, groups = props.groups, groupsExpanded = props.groupsExpanded, paging = props.paging, search = props.search;
+    var extendedFilter = props.extendedFilter, columns = props.columns, groups = props.groups, groupsExpanded = props.groupsExpanded, paging = props.paging, searchText = props.searchText, search = props.search;
     var _a = props.data, data = _a === void 0 ? [] : _a;
     data = __spreadArrays(data);
     data = extendedFilter ? extendedFilter(data) : data;
-    data = search ? searchData(columns, data, search) : data;
+    data = searchText ? searchData(columns, data, searchText, search) : data;
     data = convertToColumnTypes(data, columns);
@@ -90,3 +90,2 @@ data = filterData(data, columns);
         columns: columns,
-        data: groupedData,
         groupColumnsCount: groupColumnsCount,
@@ -93,0 +92,0 @@ groupedColumns: groupedColumns,

Utils/PropsUtils.ts

@@ -1,2 +0,2 @@
-import { HTMLAttributes } from 'react';
+import { AllHTMLAttributes } from 'react';
 import { isFunction } from 'util';
@@ -6,3 +6,4 @@
 import { Column } from '../models';
-import { ChildAttributesItem } from '../types';
+import { ChildComponent } from '../Models/ChildComponent';
+import { ChildAttributesItem, DispatchFunc } from '../types';
 import { filterData, searchData } from './FilterUtils';
@@ -15,8 +16,9 @@ import { getGroupedData } from './GroupUtils';
 export const extendProps = (
-  childElementAttributes: HTMLAttributes<HTMLElement>,
+  childElementAttributes: AllHTMLAttributes<HTMLElement>,
   childProps: any,
-  childCustomAttributes: ChildAttributesItem<any> | undefined,
-  dispatch: any): React.HTMLAttributes<HTMLElement> => {
+  childComponent?: ChildComponent<any>): React.AllHTMLAttributes<HTMLElement> => {
     let resultProps = childElementAttributes;
+    const childCustomAttributes = childComponent && childComponent.elementAttributes && childComponent.elementAttributes(childProps);
     if (childCustomAttributes) {
+      const dispatch: DispatchFunc = childProps.dispatch;
       resultProps = mergeProps(childElementAttributes, childProps, childCustomAttributes, dispatch);
@@ -29,6 +31,6 @@ }
 export const mergeProps = (
-  childElementAttributes: HTMLAttributes<HTMLElement>,
+  childElementAttributes: AllHTMLAttributes<HTMLElement>,
   childProps: any,
   childCustomAttributes: ChildAttributesItem<any>,
-  dispatch: any): React.HTMLAttributes<HTMLElement> => {
+  dispatch: DispatchFunc): React.AllHTMLAttributes<HTMLElement> => {
   const customPropsWithEvents: any = {};
@@ -52,9 +54,9 @@ for (const prop in childCustomAttributes) {
   }
-  const mergedResult: React.HTMLAttributes<HTMLDivElement> = {
+  const mergedResult: React.AllHTMLAttributes<HTMLDivElement> = {
     ...childElementAttributes,
     ...childCustomAttributes,
     ...customPropsWithEvents,
-    ...{
-      className: `${childElementAttributes.className || ''} ${childCustomAttributes.className || ''}`,
-  }};
+    className: `${childElementAttributes.className || ''} ${childCustomAttributes.className || ''}`,
+    style: { ...childCustomAttributes.style, ...childElementAttributes.style }
+  };
 
@@ -71,2 +73,3 @@ return mergedResult;
     paging,
+    searchText,
     search,
@@ -79,3 +82,3 @@ } = props;
   data = extendedFilter ? extendedFilter(data) : data;
-  data = search ? searchData(columns, data, search) : data;
+  data = searchText ? searchData(columns, data, searchText, search) : data;
   data = convertToColumnTypes(data, columns);
@@ -114,3 +117,2 @@ data = filterData(data, columns);
     columns,
-    data: groupedData, // TODO: deprecate it in 4.0.0
     groupColumnsCount,
@@ -117,0 +119,0 @@ groupedColumns,

Utils/SortUtils.js

@@ -8,3 +8,3 @@ var __spreadArrays = (this && this.__spreadArrays) || function () {
 };
-import { SortDirection } from '../enums';
+import { SortDirection, SortingMode } from '../enums';
 import { getValueByColumn } from './DataUtils';
@@ -52,2 +52,3 @@ export var sortData = function (columns, data) {
     };
-};
+};
+export var isSortingEnabled = function (sortingMode) { return sortingMode === SortingMode.Single; };

Utils/SortUtils.ts

@@ -1,2 +0,2 @@
-import { SortDirection } from '../enums';
+import { SortDirection, SortingMode } from '../enums';
 import { Column } from '../Models/Column';
@@ -43,1 +43,3 @@ import { getValueByColumn } from './DataUtils';
 };
+
+export const isSortingEnabled = (sortingMode: SortingMode) => sortingMode === SortingMode.Single;

Utils/Validation.js

@@ -1,7 +0,6 @@
-export var getValidationValue = function (value, rowData, column) {
-    var validation = column.validation;
+export var getValidationValue = function (value, rowData, column, validation) {
     if (validation) {
-        return validation(value, rowData);
+        return validation({ value: value, rowData: rowData, column: column });
     }
     return undefined;
 };

Utils/Validation.ts

 import { Column } from '../models';
+import { ValidationFunc } from '../types';
 
-export const getValidationValue = (value: any, rowData: any, column: Column) => {
-  const { validation } = column;
+export const getValidationValue = (value: any, rowData: any, column: Column, validation?: ValidationFunc) => {
   if (validation) {
-    return validation(value, rowData);
+    return validation({ value, rowData, column });
   }
   return undefined;
 };

No alert changes

Improved metrics

Total package byte prevSize

258609

increased by3.22%

Number of package files

174

increased by3.57%

Lines of code

5176

increased by3.38%

No dependency changes