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

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

@@ -0,0 +1,111 @@
+import { ComponentType } from 'react';
+import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools';
+import { GridCellProps } from './GridCellProps';
+import { GridFooterCellProps } from './GridFooterCellProps';
+import { GridFilterCellProps } from './GridFilterCellProps';
+import { GridHeaderCellProps } from './GridHeaderCellProps';
+export interface GridTdAttributes extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    [TABLE_COL_INDEX_ATTRIBUTE]?: number;
+    key?: string;
+}
+export interface GridThAttributes extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    columnId: string;
+    key?: string;
+}
+/**
+ * The properties of the default Grid Cell.
+ */
+export interface GridCustomCellProps extends GridCellProps {
+    /**
+     * The props and attributes that are applied to the td element by default.
+     */
+    tdProps?: React.TdHTMLAttributes<HTMLTableCellElement> | null;
+    /**
+     * The props and attributes that are applied to the second td. Such element is
+     * rendered in very rare cases when we have grouping and sticky columns.
+     */
+    td2Props?: React.TdHTMLAttributes<HTMLTableCellElement> | null;
+    /**
+     * The default children of the table cell.
+     */
+    children?: React.ReactNode | React.ReactNode[];
+}
+/**
+ * The properties of the footer Grid Cell.
+ */
+export interface GridCustomFooterCellProps extends GridFooterCellProps {
+    /**
+     * The props and attributes that are applied to the td element by default.
+     */
+    tdProps?: React.TdHTMLAttributes<HTMLTableCellElement> | null;
+    /**
+     * The index of the column that is rendered.
+     */
+    index?: number;
+}
+/**
+ * The properties of the filter Grid Cell.
+ */
+export interface GridCustomFilterCellProps extends GridFilterCellProps {
+    /**
+     * The props and attributes that are applied to the td element by default.
+     */
+    thProps?: GridThAttributes | null;
+    /**
+     * The default children of the table cell.
+     */
+    children?: React.ReactNode | React.ReactNode[];
+    /**
+     * The index of the column.
+     */
+    index?: number;
+}
+/**
+ * The properties of the header Grid Cell.
+ */
+export interface GridCustomHeaderCellProps extends GridHeaderCellProps {
+    /**
+     * The props and attributes that are applied to the td element by default.
+     */
+    thProps?: GridThAttributes | null;
+    /**
+     * The default children of the table cell.
+     */
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * The index of the column.
+     */
+    index?: number;
+}
+/**
+ * The settings of the cells prop options.
+ */
+export interface GridCellsSettings {
+    headerCell?: ComponentType<GridCustomHeaderCellProps>;
+    filterCell?: ComponentType<GridCustomFilterCellProps>;
+    footerCell?: ComponentType<GridCustomFooterCellProps>;
+    groupHeader?: ComponentType<GridCustomCellProps>;
+    data?: ComponentType<GridCustomCellProps>;
+    groupFooter?: ComponentType<GridCustomCellProps>;
+    select?: {
+        groupHeader?: ComponentType<GridCustomCellProps>;
+        data?: ComponentType<GridCustomCellProps>;
+        groupFooter?: ComponentType<GridCustomCellProps>;
+    };
+    hierarchy?: {
+        groupHeader?: ComponentType<GridCustomCellProps>;
+        data?: ComponentType<GridCustomCellProps>;
+        groupFooter?: ComponentType<GridCustomCellProps>;
+    };
+    group?: {
+        groupHeader?: ComponentType<GridCustomCellProps>;
+        data?: ComponentType<GridCustomCellProps>;
+        groupFooter?: ComponentType<GridCustomCellProps>;
+    };
+    edit?: {
+        text?: ComponentType<GridCustomCellProps>;
+        numeric?: ComponentType<GridCustomCellProps>;
+        boolean?: ComponentType<GridCustomCellProps>;
+        date?: ComponentType<GridCustomCellProps>;
+    };
+}

package/dist/es/interfaces/GridCellsSettings.js

@@ -0,0 +1 @@
+import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools';

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

@@ -6,6 +6,7 @@ import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps';
 import { GridFooterCellProps } from './GridFooterCellProps';
 import { GridColumnSortSettings } from './GridSortSettings';
 import { ColumnBaseProps } from '@progress/kendo-react-data-tools';
+import { GridCellsSettings } from './GridCellsSettings';
 /**
  * The props of the GridColumn component.
  */
@@ -58,6 +59,10 @@ export interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
      * Defines the component that will be rendered as a cell. If not set, a `GridCell` will be rendered by default.
      */
     cell?: ComponentType<GridCellProps>;
+    /**
+     * Sets a set of cells components that the Grid will render instead of the built-in cell.
+     */
+    cells?: GridCellsSettings;
     /**
      * Defines the component that will be rendered as a filter cell. If not set, a `GridFilterCell` will be rendered by default.
      */

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

@@ -15,6 +15,7 @@ import { GridFilterOperators } from './GridFilterOperators';
 import { GridSelectableSettings } from './GridSelectableSettings';
 import { PagerProps } from '@progress/kendo-react-data-tools';
 import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { GridCellsSettings } from './GridCellsSettings';
 /**
  * Represents the props of the [KendoReact Grid component]({% slug overview_grid %}).
  */
@@ -28,6 +29,10 @@ export interface GridProps extends KendoReactComponentBaseProps {
      * Sets a class of the Grid DOM element.
      */
     className?: string;
+    /**
+     * Sets a set of custom components that the Grid will render instead of the built-in cell.
+     */
+    cells?: GridCellsSettings;
     /**
      * Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging, the `data` option has to contain only the items for the current page.
      */

package/dist/es/main.d.ts

@@ -31,6 +31,7 @@ import { GridToolbarProps } from './interfaces/GridToolbarProps';
 import { GridNoRecords } from './GridNoRecords';
 import { GridNoRecordsProps } from './interfaces/GridNoRecordsProps';
 export * from './interfaces/events';
+export * from './interfaces/GridCellsSettings';
 export { messages as gridMessages, pagerInfo, pagerFirstPage, pagerPreviousPage, pagerNextPage, pagerLastPage, pagerItemPerPage } from './messages';
 import { GridSortSettings } from './interfaces/GridSortSettings';
 import { GridPagerSettings } from './paging/GridPagerSettings';

package/dist/es/main.js

@@ -19,6 +19,7 @@ import { GridRow } from './rows/GridRow';
 import { GridToolbar } from './GridToolbar';
 import { GridNoRecords } from './GridNoRecords';
 export * from './interfaces/events';
+export * from './interfaces/GridCellsSettings';
 export { messages as gridMessages, pagerInfo, pagerFirstPage, pagerPreviousPage, pagerNextPage, pagerLastPage, pagerItemPerPage } from './messages';
 import { GridColumnMenuItem } from './columnMenu/GridColumnMenuItem';
 import { GridColumnMenuItemContent } from './columnMenu/GridColumnMenuItemContent';

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1685371225,
+    publishDate: 1685527715,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/utils/index.d.ts

@@ -28,6 +28,7 @@ import { ExtendedColumnProps } from '../GridColumn';
 import { DataResult, GroupDescriptor } from '@progress/kendo-data-query';
 import { GridRowType } from '../interfaces/GridRowType';
 import { GridColumnProps } from '../interfaces/GridColumnProps';
+import { GridCellsSettings } from '../interfaces/GridCellsSettings';
 /**
  * @hidden
  */
@@ -58,3 +59,7 @@ export declare const firefox: boolean;
  * @hidden
  */
 export declare const firefoxMaxHeight = 17895697;
+/**
+ * @hidden
+ */
+export declare const resolveCells: (gridCells?: GridCellsSettings, columnCells?: GridCellsSettings) => GridCellsSettings | undefined;

package/dist/es/utils/index.js

@@ -236,3 +236,18 @@ export var firefox = typeof window !== 'undefined' &&
  * @hidden
  */
 export var firefoxMaxHeight = 17895697;
+/**
+ * @hidden
+ */
+export var resolveCells = function (gridCells, columnCells) {
+    if (!gridCells && !columnCells) {
+        return undefined;
+    }
+    if (!columnCells) {
+        return gridCells;
+    }
+    if (!gridCells) {
+        return columnCells;
+    }
+    return __assign(__assign(__assign({}, gridCells), columnCells), { select: __assign(__assign({}, (gridCells.select || {})), (columnCells.select || {})), hierarchy: __assign(__assign({}, (gridCells.hierarchy || {})), (columnCells.hierarchy || {})), group: __assign(__assign({}, (gridCells.group || {})), (columnCells.group || {})), edit: __assign(__assign({}, (gridCells.edit || {})), (columnCells.edit || {})) });
+};

package/dist/npm/Grid.js

@@ -435,7 +435,7 @@ var Grid = /** @class */ (function (_super) {
             columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });
         });
         _this.getHeaderRow = (0, kendo_react_common_1.memoizeOne)(function (sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, columns, columnsMap) {
-            return (React.createElement(HeaderRow_1.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_1.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; });
@@ -627,7 +627,7 @@ var Grid = /** @class */ (function (_super) {
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
         var groupingPanel = groupable && (React.createElement(GroupPanel_1.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 ? filterCommon_1.operators : _f, headerCellRender = _e.headerCellRender, columnMenu = _e.columnMenu;
-        var header = (React.createElement(Header_1.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_1.FilterRow, { size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || filterCommon_1.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_1.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_1.FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || filterCommon_1.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());
@@ -662,7 +662,7 @@ var Grid = /** @class */ (function (_super) {
                         }
                     }
                     var Cell = column.cell || (currentColumnIsInEdit && GridEditCell_1.GridEditCell) || GridCell_1.GridCell;
-                    return (React.createElement(Cell, { onContextMenu: _this.onContextMenu, key: columnKey, locked: _this.props.lockGroups, id: kendo_react_data_tools_1.tableKeyboardNavigationTools.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: kendo_react_data_tools_1.tableKeyboardNavigationTools.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: (0, index_1.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 }));
                 }),
@@ -724,7 +724,7 @@ var Grid = /** @class */ (function (_super) {
                                     ? { left: columnStyle.left, right: columnStyle.right }
                                     : { left: columnStyle.right, right: columnStyle.left }
                                 : {};
-                            return (React.createElement(GridGroupCell_1.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_1.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_1.GridDetailHierarchyCell, { id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
@@ -741,7 +741,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_1.Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow_1.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_1.Footer, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', ref: function (f) { return _this._footer = f; }, row: React.createElement(FooterRow_1.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/npm/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/npm/cells/GridCell.js

@@ -28,19 +28,31 @@ 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 = (0, utils_1.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 = (0, kendo_react_common_1.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[constants_1.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[constants_1.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/npm/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/npm/cells/GridEditCell.js

@@ -31,6 +31,8 @@ var GridEditCell = function (props) {
         _a), props.className);
     var inputId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
     var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
+    var tdProps = null;
+    var content = null;
     var handleOnChange = React.useCallback(function (syntheticEvent) {
         if (props.onChange) {
             var value = syntheticEvent.target.type === 'checkbox' ?
@@ -63,21 +65,33 @@ 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[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _b), { role: 'gridcell' }, navigationAttributes),
-                React.createElement(kendo_react_inputs_1.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[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _b.role = 'gridcell', _b), navigationAttributes);
+            content = (React.createElement(kendo_react_inputs_1.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[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _c), { role: 'gridcell' }, navigationAttributes),
-                React.createElement(kendo_react_dateinputs_1.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[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _c.role = 'gridcell', _c), navigationAttributes);
+            content = (React.createElement(kendo_react_dateinputs_1.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[constants_1.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[constants_1.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[constants_1.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[constants_1.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/npm/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/npm/cells/GridGroupCell.js

@@ -27,6 +27,9 @@ var GridGroupCell = function (props) {
     var definedField = field || '';
     var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
     var localization = (0, kendo_react_intl_1.useLocalization)();
+    var tdProps = null;
+    var td2Props = null;
+    var content = null;
     var onKeyDownHandler = React.useCallback(function (event) {
         if (event.isDefaultPrevented()) {
             return;
@@ -48,42 +51,65 @@ var GridGroupCell = function (props) {
         }
     }, [props.onContextMenu, props.dataItem, props.field]);
     var renderCellCollapse = function (colspan, styles) {
+        var _a;
         var baseMessage = expanded ? messages_1.groupCollapse : messages_1.groupExpand;
         var message = localization.toLanguageString(baseMessage, messages_1.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(kendo_react_common_1.IconWrap, { name: expanded ?
-                            'caret-alt-down'
-                            : isRtl ? 'caret-alt-left' : 'caret-alt-right', icon: expanded ?
-                            kendo_svg_icons_1.caretAltDownIcon
-                            : isRtl ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.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(kendo_react_common_1.IconWrap, { name: expanded ?
+                        'caret-alt-down'
+                        : isRtl ? 'caret-alt-left' : 'caret-alt-right', icon: expanded ?
+                        kendo_svg_icons_1.caretAltDownIcon
+                        : isRtl ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.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: (0, kendo_react_common_1.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: (0, kendo_react_common_1.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/npm/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/npm/cells/GridHierarchyCell.js

@@ -24,6 +24,8 @@ var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
  */
 var GridHierarchyCell = function (props) {
     var defaultRendering = null;
+    var tdProps = null;
+    var content = null;
     var expanded = (0, utils_1.getNestedValue)(props.field, props.dataItem);
     var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
     var localization = (0, kendo_react_intl_1.useLocalization)();
@@ -43,26 +45,34 @@ 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 ? messages_1.detailCollapse : messages_1.detailExpand;
         var message = localization.toLanguageString(baseMessage, messages_1.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(kendo_react_common_1.IconWrap, { name: expanded ? 'minus' : 'plus', icon: expanded ? kendo_svg_icons_1.minusIcon : kendo_svg_icons_1.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(kendo_react_common_1.IconWrap, { name: expanded ? 'minus' : 'plus', icon: expanded ? kendo_svg_icons_1.minusIcon : kendo_svg_icons_1.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/npm/cells/GridSelectionCell.js

@@ -20,6 +20,7 @@ var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
  * @hidden
  */
 var GridSelectionCell = function (props) {
+    var _a;
     var handleOnChange = React.useCallback(function (syntheticEvent) {
         if (props.selectionChange) {
             props.selectionChange({ syntheticEvent: syntheticEvent });
@@ -28,9 +29,18 @@ var GridSelectionCell = function (props) {
     var inputId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
     var selectedValue = (0, utils_1.getNestedValue)(props.field, props.dataItem);
     var navigationAttributes = (0, kendo_react_data_tools_1.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/npm/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;