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

package/dist/npm/footer/FooterRow.js

@@ -39,17 +39,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: (0, kendo_react_common_1.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: (0, kendo_react_common_1.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 = (0, utils_1.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/npm/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/npm/header/FilterRow.js

@@ -34,6 +34,7 @@ var filterCommon_1 = require("../filterCommon");
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var messages_1 = require("../messages");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var utils_1 = require("../utils");
 /**
  * @hidden
  */
@@ -122,9 +123,16 @@ var FilterRow = /** @class */ (function (_super) {
                     ? { left: column.left, right: column.right }
                     : { left: column.right, right: column.left }
                 : {};
-            return (React.createElement(kendo_react_data_tools_1.HeaderThElement, __assign({ key: key, columnId: kendo_react_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: (0, kendo_react_common_1.classNames)('k-table-th', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
+            var thProps = __assign({ columnId: kendo_react_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: (0, kendo_react_common_1.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_1.GridFilterCell, __assign({ size: _this.props.size }, filterCellProps)))));
+                React.createElement(GridFilterCell_1.GridFilterCell, __assign({ size: _this.props.size }, filterCellProps))));
+            var customCells = (0, utils_1.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(kendo_react_data_tools_1.HeaderThElement, __assign({ key: key }, thProps), content));
         });
         return React.createElement("tr", { className: exports.FILTER_ROW_CLASS, "aria-rowindex": this.props.ariaRowIndex, role: "row" }, filterCells);
     };

package/dist/npm/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/npm/header/HeaderRow.js

@@ -37,6 +37,7 @@ var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var utils_1 = require("../utils");
 /**
  * @hidden
  */
@@ -100,7 +101,7 @@ var HeaderRow = /** @class */ (function (_super) {
             };
             var key = (column.declarationIndex >= 0) ? ++_this.index : --_this.serviceIndex;
             var HeaderCell = column.headerCell ? column.headerCell : GridHeaderCell_1.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
@@ -117,16 +118,24 @@ var HeaderRow = /** @class */ (function (_super) {
                     onGroupChange: _this.props.groupChange,
                     columnMenu: columnMenu
                 } }));
-            return (React.createElement(kendo_react_data_tools_1.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_1.ColumnResizer, { key: 2, resize: function (e, element, end) {
+                (_this.props.columnResize && _this.props.columnResize.resizable && column.resizable
+                    && React.createElement(ColumnResizer_1.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 = (0, utils_1.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(kendo_react_data_tools_1.HeaderThElement, __assign({}, thProps, { key: key }), content));
         }); };
         _this.cellClick = _this.cellClick.bind(_this);
         return _this;

package/dist/npm/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.
      */

package/dist/npm/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/npm/interfaces/GridCellsSettings.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");

package/dist/npm/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/npm/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/npm/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/npm/main.js

@@ -58,6 +58,7 @@ Object.defineProperty(exports, "GridToolbar", { enumerable: true, get: function
 var GridNoRecords_1 = require("./GridNoRecords");
 Object.defineProperty(exports, "GridNoRecords", { enumerable: true, get: function () { return GridNoRecords_1.GridNoRecords; } });
 __exportStar(require("./interfaces/events"), exports);
+__exportStar(require("./interfaces/GridCellsSettings"), exports);
 var messages_1 = require("./messages");
 Object.defineProperty(exports, "gridMessages", { enumerable: true, get: function () { return messages_1.messages; } });
 Object.defineProperty(exports, "pagerInfo", { enumerable: true, get: function () { return messages_1.pagerInfo; } });

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.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/npm/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/npm/utils/index.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.firefoxMaxHeight = exports.firefox = exports.sanitizeColumns = exports.footerColumns = exports.autoGenerateColumns = exports.readColumns = exports.checkPropCompatibility = exports.flatData = exports.getNestedValue = void 0;
+exports.resolveCells = exports.firefoxMaxHeight = exports.firefox = exports.sanitizeColumns = exports.footerColumns = exports.autoGenerateColumns = exports.readColumns = exports.checkPropCompatibility = exports.flatData = exports.getNestedValue = void 0;
 /**
  * @hidden
  */
@@ -246,3 +246,19 @@ exports.firefox = typeof window !== 'undefined' &&
  * @hidden
  */
 exports.firefoxMaxHeight = 17895697;
+/**
+ * @hidden
+ */
+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 || {})) });
+};
+exports.resolveCells = resolveCells;