@progress/kendo-react-grid 5.14.0-dev.202305291502 → 5.14.0-dev.202305301859

package/dist/es/Grid.js

@@ -49,7 +49,7 @@ import { VirtualScroll } from './VirtualScroll';
 import { RowHeightService, VirtualScrollFixed } from './VirtualScrollFixed';
 import { ColumnResize } from './drag/ColumnResize';
 import { CommonDragLogic } from './drag/CommonDragLogic';
-import { getNestedValue, flatData, readColumns, autoGenerateColumns, firefox, firefoxMaxHeight, sanitizeColumns } from './utils/index';
+import { getNestedValue, flatData, readColumns, autoGenerateColumns, firefox, firefoxMaxHeight, sanitizeColumns, resolveCells } from './utils/index';
 import { GridCell } from './cells/GridCell';
 import { GridGroupCell } from './cells/GridGroupCell';
 import { GridRow } from './rows/GridRow';
@@ -432,7 +432,7 @@ var Grid = /** @class */ (function (_super) {
             columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });
         });
         _this.getHeaderRow = memoizeOne(function (sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, columns, columnsMap) {
-            return (React.createElement(HeaderRow, { sort: sort, sortable: sortable, sortChange: _this.sortChange, group: group || [], groupable: groupable, groupChange: _this.groupChange, filter: filter, filterable: filterable, filterOperators: filterOperators, filterChange: _this.filterChange, columnMenu: columnMenu, selectionChange: _this.onHeaderSelectionChange, columns: columns, columnResize: _this.columnResize, pressHandler: _this.dragLogic.pressHandler, dragHandler: _this.dragLogic.dragHandler, releaseHandler: _this.dragLogic.releaseHandler, columnsMap: columnsMap, cellRender: headerCellRender, isRtl: _this.isRtl, dragClue: _this.dragLogic.dragClueRef, headerRef: _this.headerElementRef, containerRef: _this.containerRef }));
+            return (React.createElement(HeaderRow, { cells: _this.props.cells, sort: sort, sortable: sortable, sortChange: _this.sortChange, group: group || [], groupable: groupable, groupChange: _this.groupChange, filter: filter, filterable: filterable, filterOperators: filterOperators, filterChange: _this.filterChange, columnMenu: columnMenu, selectionChange: _this.onHeaderSelectionChange, columns: columns, columnResize: _this.columnResize, pressHandler: _this.dragLogic.pressHandler, dragHandler: _this.dragLogic.dragHandler, releaseHandler: _this.dragLogic.releaseHandler, columnsMap: columnsMap, cellRender: headerCellRender, isRtl: _this.isRtl, dragClue: _this.dragLogic.dragClueRef, headerRef: _this.headerElementRef, containerRef: _this.containerRef }));
         });
         _this.resolveTitle = function (field) {
             var column = _this._columns.find(function (c) { return c.field === field; });
@@ -624,7 +624,7 @@ var Grid = /** @class */ (function (_super) {
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
         var groupingPanel = groupable && (React.createElement(GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle }));
         var _e = this.props, sort = _e.sort, sortable = _e.sortable, group = _e.group, filter = _e.filter, filterable = _e.filterable, _f = _e.filterOperators, filterOperators = _f === void 0 ? operators : _f, headerCellRender = _e.headerCellRender, columnMenu = _e.columnMenu;
-        var header = (React.createElement(Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap), filterRow: this.props.filterable && React.createElement(FilterRow, { size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
+        var header = (React.createElement(Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap), filterRow: this.props.filterable && React.createElement(FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
                     Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
         var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
@@ -659,7 +659,7 @@ var Grid = /** @class */ (function (_super) {
                         }
                     }
                     var Cell = column.cell || (currentColumnIsInEdit && GridEditCell) || GridCell;
-                    return (React.createElement(Cell, { onContextMenu: _this.onContextMenu, key: columnKey, locked: _this.props.lockGroups, id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix), colSpan: colSpans[columnIndex], dataItem: item.dataItem, field: column.field, editor: column.editor, format: column.format, className: className, render: _this.props.cellRender, onChange: _this.itemChange, selectionChange: (_this.props.onSelectionChange) ?
+                    return (React.createElement(Cell, { onContextMenu: _this.onContextMenu, key: columnKey, locked: _this.props.lockGroups, id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix), colSpan: colSpans[columnIndex], dataItem: item.dataItem, field: column.field, editor: column.editor, format: column.format, className: className, render: _this.props.cellRender, cells: resolveCells(_this.props.cells, column.cells), onChange: _this.itemChange, selectionChange: (_this.props.onSelectionChange) ?
                             (function (e) { _this.selectionChange({ event: e, dataItem: item.dataItem, dataIndex: rowDataIndex, columnIndex: columnIndex }); }) :
                             undefined, columnIndex: columnIndex, columnsCount: leafColumns.length, rowType: item.rowType, level: item.level, expanded: item.expanded, dataIndex: item.dataIndex, style: style, ariaColumnIndex: column.ariaColumnIndex, isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1 }));
                 }),
@@ -721,7 +721,7 @@ var Grid = /** @class */ (function (_super) {
                                     ? { left: columnStyle.left, right: columnStyle.right }
                                     : { left: columnStyle.right, right: columnStyle.left }
                                 : {};
-                            return (React.createElement(GridGroupCell, { id: '', dataIndex: item.dataIndex, field: gr.field, dataItem: item.dataItem, key: idx, style: style, ariaColumnIndex: 1 + idx, isSelected: false, locked: _this.props.lockGroups, isRtl: _this.isRtl }));
+                            return (React.createElement(GridGroupCell, { id: '', dataIndex: item.dataIndex, field: gr.field, dataItem: item.dataItem, key: idx, style: style, ariaColumnIndex: 1 + idx, isSelected: false, locked: _this.props.lockGroups, isRtl: _this.isRtl, cells: _this.props.cells }));
                         }),
                         _this.props.expandField &&
                             React.createElement(GridDetailHierarchyCell, { id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
@@ -738,7 +738,7 @@ var Grid = /** @class */ (function (_super) {
         var sorted = function (field) {
             return _this.props.sort && _this.props.sort.filter(function (descriptor) { return descriptor.field === field; }).length > 0;
         };
-        var footer = this._columns.some(function (c) { return Boolean(c.footerCell); }) ? (React.createElement(Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow, { columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
+        var footer = this._columns.some(function (c) { return Boolean(c.footerCell); }) ? (React.createElement(Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow, { cells: this.props.cells, columns: this._columns, isRtl: this.isRtl, ariaRowIndex: currentAriaRowIndex + 1 }), cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
                     Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); }) })) : null;
         var colGroups = (React.createElement("colgroup", { ref: function (c) {
                 _this.columnResize.colGroupMain = c;

package/dist/es/cells/GridCell.d.ts

@@ -1,3 +1,3 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { GridCellProps } from '../interfaces/GridCellProps';
-export declare const GridCell: (props: GridCellProps) => React.ReactElement<HTMLTableCellElement, string | React.JSXElementConstructor<any>> | null;
+export declare const GridCell: (props: GridCellProps) => JSX.Element | null;

package/dist/es/cells/GridCell.js

@@ -25,19 +25,31 @@ export var GridCell = function (props) {
             props.onContextMenu.call(undefined, event, props.dataItem, props.field);
         }
     }, [props.onContextMenu, props.dataItem, props.field]);
+    var tdProps = null;
+    var content = null;
     if (props.rowType === 'groupFooter') {
-        defaultRendering = React.createElement("td", { onContextMenu: onContextMenu, className: props.className });
+        tdProps = {
+            onContextMenu: onContextMenu,
+            className: props.className
+        };
+        defaultRendering = React.createElement("td", __assign({}, tdProps));
     }
     else if (props.field !== undefined && props.rowType !== 'groupHeader') {
         var data = getNestedValue(props.field, props.dataItem);
-        var dataAsString = '';
         if (data !== undefined && data !== null) {
-            dataAsString = props.format ?
+            content = props.format ?
                 intl.format(props.format, data) :
                 data.toString();
         }
         var className = classNames('k-table-td', props.className, { 'k-selected': props.isSelected });
-        defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_a = {}, _a[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes), dataAsString));
+        tdProps = __assign((_a = { onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', 'aria-colindex': props.ariaColumnIndex, 'aria-selected': props.isSelected }, _a[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes);
+        defaultRendering = (React.createElement("td", __assign({}, tdProps), content));
+    }
+    var rowTypeSetting = props.rowType || 'data';
+    var customCells = props.cells;
+    if (customCells && customCells[rowTypeSetting]) {
+        var CustomCell = customCells[rowTypeSetting];
+        return (React.createElement(CustomCell, __assign({}, props, { tdProps: tdProps }), content));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/es/cells/GridEditCell.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { GridCellProps } from '../interfaces/GridCellProps';
 /**
  * @hidden
  */
-export declare const GridEditCell: (props: GridCellProps) => React.ReactElement<HTMLTableCellElement, string | React.JSXElementConstructor<any>> | null;
+export declare const GridEditCell: (props: GridCellProps) => JSX.Element | null;

package/dist/es/cells/GridEditCell.js

@@ -28,6 +28,8 @@ export var GridEditCell = function (props) {
         _a), props.className);
     var inputId = React.useMemo(function () { return guid(); }, []);
     var navigationAttributes = useTableKeyboardNavigation(props.id);
+    var tdProps = null;
+    var content = null;
     var handleOnChange = React.useCallback(function (syntheticEvent) {
         if (props.onChange) {
             var value = syntheticEvent.target.type === 'checkbox' ?
@@ -60,21 +62,33 @@ export var GridEditCell = function (props) {
     }, [props.onChange, props.dataItem, props.dataIndex, props.field]);
     switch (props.editor) {
         case 'numeric':
-            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_b = {}, _b[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _b), { role: 'gridcell' }, navigationAttributes),
-                React.createElement(NumericTextBox, { width: "100%", value: (data === undefined) ? null : data, onChange: inputChange })));
+            tdProps = __assign((_b = { onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses }, _b['aria-colindex'] = props.ariaColumnIndex, _b['aria-selected'] = props.isSelected, _b[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _b.role = 'gridcell', _b), navigationAttributes);
+            content = (React.createElement(NumericTextBox, { width: "100%", value: (data === undefined) ? null : data, onChange: inputChange }));
+            defaultRendering = (React.createElement("td", __assign({}, tdProps), content));
             break;
         case 'date':
-            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_c = {}, _c[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _c), { role: 'gridcell' }, navigationAttributes),
-                React.createElement(DatePicker, { width: "100%", value: data, onChange: inputChange })));
+            tdProps = __assign((_c = { onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses }, _c['aria-colindex'] = props.ariaColumnIndex, _c['aria-selected'] = props.isSelected, _c[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _c.role = 'gridcell', _c), navigationAttributes);
+            content = (React.createElement(DatePicker, { width: "100%", value: data, onChange: inputChange }));
+            defaultRendering = (React.createElement("td", __assign({}, tdProps), content));
             break;
         case 'boolean':
-            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_d = {}, _d[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _d), { role: 'gridcell' }, navigationAttributes),
-                React.createElement("input", { checked: data || false, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
-                React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId })));
+            tdProps = __assign((_d = { onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses }, _d['aria-colindex'] = props.ariaColumnIndex, _d['aria-selected'] = props.isSelected, _d[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _d.role = 'gridcell', _d), navigationAttributes);
+            content = ([
+                React.createElement("input", { checked: data || false, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange, key: 1 }),
+                React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId, key: 2 })
+            ]);
+            defaultRendering = (React.createElement("td", __assign({}, tdProps), content));
             break;
         default:
-            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_e = {}, _e[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _e), { role: 'gridcell' }, navigationAttributes),
-                React.createElement("input", { style: { width: '100%' }, className: "k-input", value: data || '', onChange: handleOnChange })));
+            tdProps = __assign((_e = { onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses }, _e['aria-colindex'] = props.ariaColumnIndex, _e['aria-selected'] = props.isSelected, _e[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _e.role = 'gridcell', _e), navigationAttributes);
+            content = (React.createElement("input", { style: { width: '100%' }, className: "k-input", value: data || '', onChange: handleOnChange }));
+            defaultRendering = (React.createElement("td", __assign({}, tdProps), content));
+    }
+    var editorSetting = props.editor || 'text';
+    var customCells = props.cells;
+    if (customCells && customCells.edit && customCells.edit[editorSetting]) {
+        var CustomCell = customCells.edit[editorSetting];
+        return (React.createElement(CustomCell, __assign({}, props, { tdProps: tdProps }), content));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/es/cells/GridGroupCell.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { GridCellProps } from '../interfaces/GridCellProps';
 /**
  * @hidden
  */
-export declare const GridGroupCell: (props: GridCellProps) => React.ReactElement<HTMLTableCellElement, string | React.JSXElementConstructor<any>> | null;
+export declare const GridGroupCell: (props: GridCellProps) => JSX.Element | null;

package/dist/es/cells/GridGroupCell.js

@@ -24,6 +24,9 @@ export var GridGroupCell = function (props) {
     var definedField = field || '';
     var navigationAttributes = useTableKeyboardNavigation(props.id);
     var localization = useLocalization();
+    var tdProps = null;
+    var td2Props = null;
+    var content = null;
     var onKeyDownHandler = React.useCallback(function (event) {
         if (event.isDefaultPrevented()) {
             return;
@@ -45,42 +48,65 @@ export var GridGroupCell = function (props) {
         }
     }, [props.onContextMenu, props.dataItem, props.field]);
     var renderCellCollapse = function (colspan, styles) {
+        var _a;
         var baseMessage = expanded ? groupCollapse : groupExpand;
         var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
-        return (React.createElement("td", __assign({ className: 'k-table-td', style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler, onContextMenu: onContextMenu }, navigationAttributes),
-            React.createElement("p", { className: "k-reset" },
-                React.createElement("a", { onClick: function (e) {
-                        e.preventDefault();
-                        if (onChange) {
-                            onChange({
-                                dataItem: dataItem,
-                                dataIndex: dataIndex,
-                                syntheticEvent: e,
-                                field: undefined,
-                                value: !expanded
-                            });
-                        }
-                    }, href: "#", tabIndex: -1, "aria-label": message },
-                    React.createElement(IconWrap, { name: expanded ?
-                            'caret-alt-down'
-                            : isRtl ? 'caret-alt-left' : 'caret-alt-right', icon: expanded ?
-                            caretAltDownIcon
-                            : isRtl ? caretAltLeftIcon : caretAltRightIcon })),
-                ((dataItem[definedField] instanceof Date) && dataItem[definedField].toString) ?
-                    dataItem[definedField].toString() :
-                    dataItem[definedField])));
+        tdProps = __assign((_a = { className: 'k-table-td', style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell' }, _a['aria-selected'] = false, _a['aria-expanded'] = expanded, _a['aria-colindex'] = ariaColumnIndex, _a.onKeyDown = onKeyDownHandler, _a.onContextMenu = onContextMenu, _a), navigationAttributes);
+        content = (React.createElement("p", { className: "k-reset" },
+            React.createElement("a", { onClick: function (e) {
+                    e.preventDefault();
+                    if (onChange) {
+                        onChange({
+                            dataItem: dataItem,
+                            dataIndex: dataIndex,
+                            syntheticEvent: e,
+                            field: undefined,
+                            value: !expanded
+                        });
+                    }
+                }, href: "#", tabIndex: -1, "aria-label": message },
+                React.createElement(IconWrap, { name: expanded ?
+                        'caret-alt-down'
+                        : isRtl ? 'caret-alt-left' : 'caret-alt-right', icon: expanded ?
+                        caretAltDownIcon
+                        : isRtl ? caretAltLeftIcon : caretAltRightIcon })),
+            ((dataItem[definedField] instanceof Date) && dataItem[definedField].toString) ?
+                dataItem[definedField].toString() :
+                dataItem[definedField]));
+        return (React.createElement("td", __assign({}, tdProps), content));
     };
     if (columnIndex === undefined || level === undefined || columnIndex < level ||
         columnsCount === undefined || rowType !== 'groupHeader' || dataItem[definedField] === undefined) {
-        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: classNames('k-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "gridcell", onContextMenu: onContextMenu }));
+        tdProps = {
+            style: props.style,
+            key: 'g' + columnIndex,
+            className: classNames('k-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }),
+            role: 'gridcell',
+            onContextMenu: onContextMenu
+        };
+        defaultRendering = (React.createElement("td", __assign({}, tdProps)));
     }
     else if (columnIndex <= level && !props.locked) {
         defaultRendering = renderCellCollapse(columnsCount - columnIndex, {});
     }
     else if (columnIndex <= level && props.locked) {
+        td2Props = {
+            className: 'k-table-td',
+            role: 'gridcell',
+            colSpan: (columnsCount - columnIndex),
+            style: { borderLeftWidth: 0, borderRightWidth: 0 },
+            onContextMenu: onContextMenu
+        };
         defaultRendering = (React.createElement(React.Fragment, null,
             renderCellCollapse(0, { position: 'sticky', zIndex: 2 }),
-            React.createElement("td", { className: 'k-table-td', role: 'gridcell', colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 }, onContextMenu: onContextMenu })));
+            React.createElement("td", __assign({}, td2Props))));
+    }
+    var rowTypeSetting = props.rowType || 'data';
+    var customCells = props.cells;
+    if (customCells && customCells.group
+        && customCells.group[rowTypeSetting]) {
+        var CustomCell = customCells.group[rowTypeSetting];
+        return (React.createElement(CustomCell, __assign({}, props, { tdProps: tdProps, td2Props: td2Props }), content));
     }
     return render ?
         render.call(undefined, defaultRendering, props) :

package/dist/es/cells/GridHierarchyCell.d.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { GridCellProps } from '../interfaces/GridCellProps';
 /**
  * @hidden
  */
-export declare const GridHierarchyCell: (props: GridCellProps) => React.ReactElement<HTMLTableCellElement, string | React.JSXElementConstructor<any>> | null;
+export declare const GridHierarchyCell: (props: GridCellProps) => JSX.Element | null;

package/dist/es/cells/GridHierarchyCell.js

@@ -21,6 +21,8 @@ import { minusIcon, plusIcon } from '@progress/kendo-svg-icons';
  */
 export var GridHierarchyCell = function (props) {
     var defaultRendering = null;
+    var tdProps = null;
+    var content = null;
     var expanded = getNestedValue(props.field, props.dataItem);
     var navigationAttributes = useTableKeyboardNavigation(props.id);
     var localization = useLocalization();
@@ -40,26 +42,34 @@ export var GridHierarchyCell = function (props) {
         }
     }, [props.dataItem, props.dataIndex, props.field, props.onChange, expanded]);
     if (props.rowType === 'groupFooter') {
+        tdProps = __assign({ className: 'k-table-td k-hierarchy-cell', role: 'gridcell' }, navigationAttributes);
         defaultRendering =
-            React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", role: 'gridcell' }, navigationAttributes));
+            React.createElement("td", __assign({}, tdProps));
     }
     else if (props.rowType !== 'groupHeader') {
         var baseMessage = expanded ? detailCollapse : detailExpand;
         var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
-        defaultRendering = (React.createElement("td", __assign({ className: "k-table-td k-hierarchy-cell", onKeyDown: onKeyDownHandler, "aria-expanded": expanded ? 'true' : 'false', role: 'gridcell', "aria-colindex": props.ariaColumnIndex }, navigationAttributes),
-            React.createElement("a", { onClick: function (e) {
-                    e.preventDefault();
-                    if (props.onChange) {
-                        props.onChange({
-                            dataItem: props.dataItem,
-                            dataIndex: props.dataIndex,
-                            syntheticEvent: e,
-                            field: props.field,
-                            value: !expanded
-                        });
-                    }
-                }, "aria-label": message, href: "#", tabIndex: -1 },
-                React.createElement(IconWrap, { name: expanded ? 'minus' : 'plus', icon: expanded ? minusIcon : plusIcon }))));
+        tdProps = __assign({ className: 'k-table-td k-hierarchy-cell', onKeyDown: onKeyDownHandler, 'aria-expanded': expanded ? true : false, role: 'gridcell', 'aria-colindex': props.ariaColumnIndex }, navigationAttributes);
+        content = (React.createElement("a", { onClick: function (e) {
+                e.preventDefault();
+                if (props.onChange) {
+                    props.onChange({
+                        dataItem: props.dataItem,
+                        dataIndex: props.dataIndex,
+                        syntheticEvent: e,
+                        field: props.field,
+                        value: !expanded
+                    });
+                }
+            }, "aria-label": message, href: "#", tabIndex: -1 },
+            React.createElement(IconWrap, { name: expanded ? 'minus' : 'plus', icon: expanded ? minusIcon : plusIcon })));
+        defaultRendering = (React.createElement("td", __assign({}, tdProps), content));
+    }
+    var rowTypeSetting = props.rowType || 'data';
+    var customCells = props.cells;
+    if (customCells && customCells.hierarchy && customCells.hierarchy[rowTypeSetting]) {
+        var CustomCell = customCells.hierarchy[rowTypeSetting];
+        return (React.createElement(CustomCell, __assign({}, props, { tdProps: tdProps }), content));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/es/cells/GridSelectionCell.js

@@ -17,6 +17,7 @@ import { useTableKeyboardNavigation } from '@progress/kendo-react-data-tools';
  * @hidden
  */
 export var GridSelectionCell = function (props) {
+    var _a;
     var handleOnChange = React.useCallback(function (syntheticEvent) {
         if (props.selectionChange) {
             props.selectionChange({ syntheticEvent: syntheticEvent });
@@ -25,9 +26,18 @@ export var GridSelectionCell = function (props) {
     var inputId = React.useMemo(function () { return guid(); }, []);
     var selectedValue = getNestedValue(props.field, props.dataItem);
     var navigationAttributes = useTableKeyboardNavigation(props.id);
-    var defaultRendering = props.rowType !== 'groupHeader' ? (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: props.className, "aria-colindex": props.ariaColumnIndex, role: 'gridcell' }, navigationAttributes),
-        React.createElement("input", { checked: typeof selectedValue === 'boolean' && selectedValue, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
-        React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId }))) : null;
+    var tdProps = __assign((_a = { colSpan: props.colSpan, style: props.style, className: props.className }, _a['aria-colindex'] = props.ariaColumnIndex, _a.role = 'gridcell', _a), navigationAttributes);
+    var content = [
+        (React.createElement("input", { key: "1", checked: typeof selectedValue === 'boolean' && selectedValue, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange })),
+        (React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId, key: "2" }))
+    ];
+    var defaultRendering = props.rowType !== 'groupHeader' ? (React.createElement("td", __assign({}, tdProps), content)) : null;
+    var rowTypeSetting = props.rowType || 'data';
+    var customCells = props.cells;
+    if (customCells && customCells.select && customCells.select[rowTypeSetting]) {
+        var CustomCell = customCells.select[rowTypeSetting];
+        return (React.createElement(CustomCell, __assign({}, props, { tdProps: tdProps }), content));
+    }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :
         defaultRendering;

package/dist/es/footer/FooterRow.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { ExtendedColumnProps } from '../GridColumn';
+import { GridCellsSettings } from '../interfaces/GridCellsSettings';
 /**
  * @hidden
  */
 export interface FooterRowProps {
+    cells?: GridCellsSettings;
     columns: ExtendedColumnProps[];
     isRtl?: boolean;
     ariaRowIndex: number;

package/dist/es/footer/FooterRow.js

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import { footerColumns } from './../utils';
+import { footerColumns, resolveCells } from './../utils';
 import { classNames } from '@progress/kendo-react-common';
 /**
  * @hidden
@@ -36,17 +36,28 @@ var FooterRow = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this._element = null;
         _this.renderCell = function (column, index) {
-            var tdProps = {
-                colSpan: column.colSpan !== 1 ? column.colSpan : undefined,
-                style: column.left !== undefined
-                    ? !_this.props.isRtl
-                        ? { left: column.left, right: column.right }
-                        : { left: column.right, right: column.left }
-                    : {},
-                className: classNames('k-table-td', column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : '')
-            };
+            var _a;
+            var tdProps = (_a = {
+                    colSpan: column.colSpan !== 1 ? column.colSpan : undefined,
+                    style: column.left !== undefined
+                        ? !_this.props.isRtl
+                            ? { left: column.left, right: column.right }
+                            : { left: column.right, right: column.left }
+                        : {},
+                    className: classNames('k-table-td', column.locked && column.left !== undefined ? 'k-grid-footer-sticky' : ''),
+                    key: index,
+                    role: 'columnfooter'
+                },
+                _a['aria-selected'] = false,
+                _a['aria-colindex'] = column.ariaColumnIndex,
+                _a);
             var cellProps = __assign({ field: column.field, ariaColumnIndex: column.ariaColumnIndex }, tdProps);
-            return (column.footerCell && React.createElement(column.footerCell, __assign({}, cellProps, { key: index }))) || (React.createElement("td", __assign({ key: index }, tdProps, { role: 'columnfooter', "aria-selected": false, "aria-colindex": column.ariaColumnIndex })));
+            var customCells = resolveCells(_this.props.cells, column.cells);
+            if (customCells && customCells.footerCell) {
+                var CustomCell = customCells.footerCell;
+                return React.createElement(CustomCell, __assign({}, cellProps, { tdProps: tdProps, index: index }));
+            }
+            return (column.footerCell && React.createElement(column.footerCell, __assign({}, cellProps, { key: index }))) || (React.createElement("td", __assign({}, tdProps)));
         };
         return _this;
     }

package/dist/es/header/FilterRow.d.ts

@@ -3,6 +3,7 @@ import { CompositeFilterDescriptor, SortDescriptor } from '@progress/kendo-data-
 import { ExtendedColumnProps } from '../GridColumn';
 import { GridFilterCellProps } from '../interfaces/GridFilterCellProps';
 import { GridFilterOperators } from '../interfaces/GridFilterOperators';
+import { GridCellsSettings } from '../interfaces/GridCellsSettings';
 /**
  * @hidden
  */
@@ -11,6 +12,7 @@ export declare const FILTER_ROW_CLASS = "k-table-row k-filter-row";
  * @hidden
  */
 export interface FilterRowProps {
+    cells?: GridCellsSettings;
     columns: ExtendedColumnProps[];
     filter?: CompositeFilterDescriptor;
     filterOperators: GridFilterOperators;

package/dist/es/header/FilterRow.js

@@ -31,6 +31,7 @@ import { operatorMap, booleanFilterValues, getFilterType } from '../filterCommon
 import { tableKeyboardNavigationTools as navigationTools, HeaderThElement } from '@progress/kendo-react-data-tools';
 import { filterAriaLabel, messages } from '../messages';
 import { classNames } from '@progress/kendo-react-common';
+import { resolveCells } from '../utils';
 /**
  * @hidden
  */
@@ -119,9 +120,16 @@ var FilterRow = /** @class */ (function (_super) {
                     ? { left: column.left, right: column.right }
                     : { left: column.right, right: column.left }
                 : {};
-            return (React.createElement(HeaderThElement, __assign({ key: key, columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: classNames('k-table-th', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
+            var thProps = __assign({ columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: classNames('k-table-th', _this.headerCellClassName(column.field, column.locked) || undefined), role: 'columnheader' }, ariaAttrs);
+            var content = (filterCellProps && (column.filterCell ?
                 React.createElement(column.filterCell, __assign({}, filterCellProps)) :
-                React.createElement(GridFilterCell, __assign({ size: _this.props.size }, filterCellProps)))));
+                React.createElement(GridFilterCell, __assign({ size: _this.props.size }, filterCellProps))));
+            var customCells = resolveCells(_this.props.cells, column.cells);
+            if (customCells && customCells.filterCell) {
+                var CustomCell = customCells.filterCell;
+                return (React.createElement(CustomCell, __assign({ key: key }, filterCellProps, { thProps: thProps, index: index }), content));
+            }
+            return (React.createElement(HeaderThElement, __assign({ key: key }, thProps), content));
         });
         return React.createElement("tr", { className: FILTER_ROW_CLASS, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, filterCells);
     };

package/dist/es/header/HeaderRow.d.ts

@@ -8,10 +8,12 @@ import { GridColumnProps } from '../interfaces/GridColumnProps';
 import { GridHeaderCellProps } from '../interfaces/GridHeaderCellProps';
 import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps';
 import { GridFilterOperators } from '../interfaces/GridFilterOperators';
+import { GridCellsSettings } from '../interfaces/GridCellsSettings';
 /**
  * @hidden
  */
 export interface HeaderRowProps extends ColumnDraggableProps {
+    cells?: GridCellsSettings;
     sortable?: GridSortSettings;
     sortChange?: (descriptors: SortDescriptor[], e: React.SyntheticEvent<any>) => void;
     sort?: SortDescriptor[];

package/dist/es/header/HeaderRow.js

@@ -34,6 +34,7 @@ import { HeaderThElement } from '@progress/kendo-react-data-tools';
 import { registerForLocalization, provideLocalizationService as intl } from '@progress/kendo-react-intl';
 import { messages, sortAriaLabel } from '../messages';
 import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
+import { resolveCells } from '../utils';
 /**
  * @hidden
  */
@@ -97,7 +98,7 @@ var HeaderRow = /** @class */ (function (_super) {
             };
             var key = (column.declarationIndex >= 0) ? ++_this.index : --_this.serviceIndex;
             var HeaderCell = column.headerCell ? column.headerCell : GridHeaderCell;
-            var headerCell = (React.createElement(HeaderCell, { field: column.field, onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined, selectionChange: _this.props.selectionChange, title: column.title, selectionValue: column.headerSelectionValue, render: _this.props.cellRender, children: _this.sortIcon(sortIndex), columnMenuWrapperProps: {
+            var headerCell = (React.createElement(HeaderCell, { key: 1, field: column.field, onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined, selectionChange: _this.props.selectionChange, title: column.title, selectionValue: column.headerSelectionValue, render: _this.props.cellRender, children: _this.sortIcon(sortIndex), columnMenuWrapperProps: {
                     column: {
                         field: column.field,
                         filter: column.filter
@@ -114,16 +115,24 @@ var HeaderRow = /** @class */ (function (_super) {
                     onGroupChange: _this.props.groupChange,
                     columnMenu: columnMenu
                 } }));
-            return (React.createElement(HeaderThElement, __assign({}, ariaAttrs, { key: key, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined, role: "columnheader" }),
+            var thProps = __assign(__assign({}, ariaAttrs), { key: key, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined, role: 'columnheader' });
+            var content = [
                 headerCell,
-                _this.props.columnResize && _this.props.columnResize.resizable && column.resizable &&
-                    React.createElement(ColumnResizer, { key: 2, resize: function (e, element, end) {
+                (_this.props.columnResize && _this.props.columnResize.resizable && column.resizable
+                    && React.createElement(ColumnResizer, { key: 2, resize: function (e, element, end) {
                             return _this.props.columnResize &&
                                 _this.props.columnResize.dragHandler(e, column, element, end);
                         }, autofit: function (e) {
                             return _this.props.columnResize &&
                                 _this.props.columnResize.dblClickHandler(e, [column.id]);
-                        } })));
+                        } }))
+            ];
+            var customCells = resolveCells(_this.props.cells, column.cells);
+            if (customCells && customCells.headerCell) {
+                var CustomCell = customCells.headerCell;
+                return (React.createElement(CustomCell, { key: key, thProps: thProps, index: columnIndex }, content));
+            }
+            return (React.createElement(HeaderThElement, __assign({}, thProps, { key: key }), content));
         }); };
         _this.cellClick = _this.cellClick.bind(_this);
         return _this;

package/dist/es/interfaces/GridCellProps.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { GridCellsSettings } from './GridCellsSettings';
 import { GridRowType } from './GridRowType';
 import { CellProps } from '@progress/kendo-react-data-tools';
 /**
@@ -18,6 +19,10 @@ export interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
      * The number of rendered columns in the Grid.
      */
     columnsCount?: number;
+    /**
+     * Sets a set of cells components that the Grid will render instead of the built-in cell.
+     */
+    cells?: GridCellsSettings;
     /**
      * The type of the row.
      */