@progress/kendo-react-grid 15.2.0-develop.7 → 15.2.0-develop.8

package/header/HeaderRow.mjs

@@ -6,71 +6,72 @@
  *-------------------------------------------------------------------------------------------
  */
 import * as t from "react";
-import { GridHeaderCell as F } from "./GridHeaderCell.mjs";
-import { uGrid as j, classNames as o, IconWrap as q } from "@progress/kendo-react-common";
-import { HeaderThElement as J } from "@progress/kendo-react-data-tools";
-import { sortAriaLabel as y, messages as K } from "../messages/index.mjs";
-import { sortAscSmallIcon as Q, sortDescSmallIcon as U } from "@progress/kendo-svg-icons";
-import { clientColumn as P, isClientReference as G, resolveCells as X } from "../utils/index.mjs";
-import { GridHeaderCellContainer as N } from "./client/GridHeaderCellContainer.mjs";
-import { HeaderRowDraggable as Y } from "./client/HeaderRowDraggable.mjs";
-import { GridHeaderRowContainer as Z } from "./client/GridHeaderRowContainer.mjs";
-import { GridHeaderCellElementContainer as _ } from "./client/GridHeaderCellElementContainer.mjs";
-import { HeaderCellResizer as $ } from "./client/HeaderCellResizer.mjs";
-const p = {
+import { GridHeaderCell as j } from "./GridHeaderCell.mjs";
+import { uGrid as q, classNames as r, IconWrap as J } from "@progress/kendo-react-common";
+import { HeaderThElement as K } from "@progress/kendo-react-data-tools";
+import { sortAriaLabel as y, messages as Q } from "../messages/index.mjs";
+import { sortAscSmallIcon as U, sortDescSmallIcon as X } from "@progress/kendo-svg-icons";
+import { clientColumn as P, isClientReference as N, resolveCells as Y } from "../utils/index.mjs";
+import { GridHeaderCellContainer as R } from "./client/GridHeaderCellContainer.mjs";
+import { HeaderRowDraggable as Z } from "./client/HeaderRowDraggable.mjs";
+import { GridHeaderRowContainer as _ } from "./client/GridHeaderRowContainer.mjs";
+import { GridHeaderCellElementContainer as $ } from "./client/GridHeaderCellElementContainer.mjs";
+import { HeaderCellResizer as p } from "./client/HeaderCellResizer.mjs";
+const ee = {
   none: "none",
   asc: "ascending",
   desc: "descending"
-}, de = (e) => {
-  const R = e.columnsState || [], c = e.unstyled, s = c && c.uGrid ? c.uGrid : j;
-  let w = 0, x = -1;
-  const A = (a) => {
+}, ue = (e) => {
+  const w = e.columnsState || [], c = e.unstyled, s = c && c.uGrid ? c.uGrid : q;
+  let x = 0, A = -1;
+  const D = (a) => {
     if (!e.sort)
       return null;
-    const n = o(s.sortIcon({}));
+    const n = r(s.sortIcon({}));
     return a >= 0 && [
       /* @__PURE__ */ t.createElement("span", { key: 1, className: n }, /* @__PURE__ */ t.createElement(
-        q,
+        J,
         {
           name: "sort-" + e.sort[a].dir + "-small",
-          icon: e.sort[a].dir === "asc" ? Q : U
+          icon: e.sort[a].dir === "asc" ? U : X
         }
       )),
-      e.sort.length > 1 && /* @__PURE__ */ t.createElement("span", { key: 2, className: n }, /* @__PURE__ */ t.createElement("span", { className: o(s.sortOrder({})) }, a + 1))
+      e.sort.length > 1 && /* @__PURE__ */ t.createElement("span", { key: 2, className: n }, /* @__PURE__ */ t.createElement("span", { className: r(s.sortOrder({})) }, a + 1))
     ];
-  }, D = (a) => a.map((n) => {
-    var I, M, v;
-    const l = e.columns[n], i = R[n], m = (M = (I = l.locked) != null ? I : i == null ? void 0 : i.locked) != null ? M : !1, d = e.sortable && l.sortable, u = e.sort ? e.sort.findIndex((r) => r.field === l.field) : -1, W = u >= 0 && e.sort[u].dir || "none", f = l.columnMenu === null ? null : l.columnMenu || e.columnMenu, O = l.menuIcon || e.columnMenuIcon, T = o(
-      o(
+  }, L = (a) => a.map((n) => {
+    var I, M, v, G;
+    const l = e.columns[n], i = w[n], m = (M = (I = l.locked) != null ? I : i == null ? void 0 : i.locked) != null ? M : !1, d = e.sortable && l.sortable, u = e.sort ? e.sort.findIndex((o) => o.field === l.field) : -1, O = u >= 0 && e.sort[u].dir || "none", f = l.disableColumnMenu ? null : l.columnMenu || e.columnMenu, T = l.menuIcon || e.columnMenuIcon, V = r(
+      r(
         s.headerTh({
           first: l.kFirst,
           filterable: !!f,
           locked: m,
-          sorted: e.sort && e.sort.some((r) => r.field === l.field),
+          sorted: e.sort && e.sort.some((o) => o.field === l.field),
           sortable: d
         })
       ),
       l.headerClassName
     );
     m === !1 && (l.left = 0);
-    const V = e.localization.toLanguageString(y, K[y]), z = l.isAccessible ? {
-      ariaSort: p[W],
+    const z = e.localization.toLanguageString(y, Q[y]), F = l.isAccessible ? {
+      ariaSort: ee[O],
       role: "columnheader",
       ariaColumnIndex: l.ariaColumnIndex,
       ariaSelected: !1,
-      ariaDescription: d ? V : "",
+      ariaDescription: d ? z : "",
       ariaHasPopup: f ? "dialog" : void 0
     } : {
       role: "presentation"
-    }, E = l.declarationIndex >= 0 ? ++x : --w, C = {
+    }, E = l.declarationIndex >= 0 ? ++A : --x, C = {
       field: l.field,
       title: l.title,
+      isGroupColumn: l.isGroupColumn,
       selectionValue: (v = l.headerSelectionValue) != null ? v : e.headerSelectionValue,
-      children: A(u),
+      children: D(u),
       selectionChange: null,
       columnMenuWrapperProps: {
         column: {
-          field: l.field,
+          field: (G = l.groupField) != null ? G : l.field,
           title: l.title,
           locked: m,
           filter: l.filter,
@@ -85,13 +86,13 @@ const p = {
         group: e.group,
         groupable: e.groupable,
         columnMenu: f,
-        columnMenuIcon: O
+        columnMenuIcon: T
       }
     }, b = {
-      ...z,
+      ...F,
       colSpan: l.headerColSpan,
       rowSpan: l.rowSpan,
-      className: T,
+      className: V,
       columnId: l.id,
       navigatable: l.navigatable,
       role: "columnheader"
@@ -100,14 +101,14 @@ const p = {
       sortable: e.sortable,
       sort: e.sort,
       columnMenuWrapperProps: C.columnMenuWrapperProps
-    }, k = l.defaultHeaderCell ? l.defaultHeaderCell : F, H = [
-      /* @__PURE__ */ t.createElement(N, { key: 1, ...S, isClient: G(k) }, /* @__PURE__ */ t.createElement(k, { ...C })),
-      /* @__PURE__ */ t.createElement($, { key: 2, column: g })
-    ], h = X(e.cells, l.cells);
+    }, k = l.defaultHeaderCell ? l.defaultHeaderCell : j, H = [
+      /* @__PURE__ */ t.createElement(R, { key: 1, ...S, isClient: N(k) }, /* @__PURE__ */ t.createElement(k, { ...C })),
+      /* @__PURE__ */ t.createElement(p, { key: 2, column: g })
+    ], h = Y(e.cells, l.cells);
     if (h && h.headerCell) {
-      const r = h.headerCell, B = G(r);
+      const o = h.headerCell, B = N(o);
       return /* @__PURE__ */ t.createElement(
-        N,
+        R,
         {
           key: E,
           ...S,
@@ -115,23 +116,23 @@ const p = {
           isCustom: !0,
           isClient: B
         },
-        /* @__PURE__ */ t.createElement(r, { ...C, thProps: b, index: n }, H)
+        /* @__PURE__ */ t.createElement(o, { ...C, thProps: b, index: n }, H)
       );
     }
-    return /* @__PURE__ */ t.createElement(_, { key: E, column: g }, /* @__PURE__ */ t.createElement(J, { ...b }, H));
-  }), L = e.columns.map(P);
+    return /* @__PURE__ */ t.createElement($, { key: E, column: g }, /* @__PURE__ */ t.createElement(K, { ...b }, H));
+  }), W = e.columns.map(P);
   return /* @__PURE__ */ t.createElement(
-    Z,
+    _,
     {
       sortable: e.sortable,
       sort: e.sort,
       navigatable: e.navigatable,
       groupable: e.groupable,
-      columns: L
+      columns: W
     },
-    e.columnsMap.map((a, n) => /* @__PURE__ */ t.createElement(Y, { key: n, className: o(s.simpleTr({})), ariaRowIndex: n + 1 }, D(a)))
+    e.columnsMap.map((a, n) => /* @__PURE__ */ t.createElement(Z, { key: n, className: r(s.simpleTr({})), ariaRowIndex: n + 1 }, L(a)))
   );
 };
 export {
-  de as HeaderRow
+  ue as HeaderRow
 };

package/index.d.mts

@@ -65,7 +65,9 @@ import { GridNoRecordsProps } from './interfaces/GridNoRecordsProps';
 import { GridSortSettings } from './interfaces/GridSortSettings';
 import { GridScrollableSettings } from './interfaces/GridScrollableSettings';
 import { GridPagerSettings } from './paging/GridPagerSettings.js';
-import { GridGroupableSettings } from './interfaces/GridGroupableSettings';
+import { GridGroupableSettings, GridGroupingMode } from './interfaces/GridGroupableSettings';
+import { GridGroupColumnFn, GridGroupColumnSettings } from './interfaces/GridGroupColumnSettings';
+import { GridColumnMenuGroupBaseProps } from './interfaces/GridColumnMenuGroupBaseProps';
 import { GridColumnMenuItem } from './columnMenu/GridColumnMenuItem.js';
 import { GridColumnMenuItemContent } from './columnMenu/GridColumnMenuItemContent.js';
 import { GridColumnMenuItemGroup } from './columnMenu/GridColumnMenuItemGroup.js';
@@ -95,6 +97,6 @@ export * from './GridSearchBox.js';
 export * from './GridPdfExportButton.js';
 export * from './GridCsvExportButton.js';
 export * from './toolbar-tools/smartbox/index.js';
-export { CompositeHighlightDescriptor, Grid, GridHandle, GridHighlightDescriptor, GridProps, GridColumn, GridColumnProps, GridColSpanProps, GridEditDialogProps, GridColumnChildrenProps, GridCellProps, GridColumnType, GridRowReorderEvent, GridDataType, GridRowReorderSettings, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridReorderDropPosition, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridColumnMenuColumnsList, GridColumnMenuColumnsListProps, GridColumnMenuColumnsChooser, GridColumnMenuColumnsChooserProps, GridColumnMenuColumnProps, GridColumnState, GridRowType, GridToolbar, GridToolbarProps, GridToolbarAIAssistant, GridToolbarAIAssistantHandle, GridToolbarAIAssistantProps, GridToolbarAIAssistantRequestData, GridAIAssistantCommand, GridAICommands, GridAIPrompt, GridAIPromptProps, GridToolbarSpacer, GridToolbarSpacerProps, GridToolbarSeparator, GridToolbarSeparatorProps, GridToolbarCheckboxFilter, GridToolbarCheckboxFilterProps, GridToolbarColumnsChooser, GridToolbarColumnsChooserProps, GridToolbarFilter, GridToolbarFilterProps, GridToolbarSort, GridToolbarSortProps, GridToolbarGroup, GridToolbarGroupProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridScrollableSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridSelectableSettings, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GRID_PREVENT_SELECTION_ELEMENT, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, isColumnMenuSortActive, isColumnMenuFilterActive, GridColumnMenuFilterProps, cellBoolDropdownChange, cellInputChange, cellOperatorChange, booleanFilterValues, operators, combineSmartFilters, parseFilterDates, GridRowSpannableSettings, handleAIResponse, GridAIState, GridAIResponseResult, GridCSVExportOptions, useGridAIRequest, GridAIRequestData, UseGridAIRequestOptions, UseGridAIRequestReturn, GridRowPinChangeEvent, GridWebMcpProps, GridWebMcpToolsCallback, GridWebMcpToolsHelpers, McpToolOption, GridAIRequestConfig, GridAIResponse, GridAIHttpClient, createAxiosAIClient };
+export { CompositeHighlightDescriptor, Grid, GridHandle, GridHighlightDescriptor, GridProps, GridColumn, GridColumnProps, GridColSpanProps, GridEditDialogProps, GridColumnChildrenProps, GridCellProps, GridColumnType, GridRowReorderEvent, GridDataType, GridRowReorderSettings, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridReorderDropPosition, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridColumnMenuColumnsList, GridColumnMenuColumnsListProps, GridColumnMenuColumnsChooser, GridColumnMenuColumnsChooserProps, GridColumnMenuColumnProps, GridColumnState, GridRowType, GridToolbar, GridToolbarProps, GridToolbarAIAssistant, GridToolbarAIAssistantHandle, GridToolbarAIAssistantProps, GridToolbarAIAssistantRequestData, GridAIAssistantCommand, GridAICommands, GridAIPrompt, GridAIPromptProps, GridToolbarSpacer, GridToolbarSpacerProps, GridToolbarSeparator, GridToolbarSeparatorProps, GridToolbarCheckboxFilter, GridToolbarCheckboxFilterProps, GridToolbarColumnsChooser, GridToolbarColumnsChooserProps, GridToolbarFilter, GridToolbarFilterProps, GridToolbarSort, GridToolbarSortProps, GridToolbarGroup, GridToolbarGroupProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridScrollableSettings, GridPagerSettings, GridGroupableSettings, GridGroupingMode, GridGroupColumnFn, GridGroupColumnSettings, GridColumnMenuGroupBaseProps, GridFooterCellProps, GridSelectableMode, GridSelectableSettings, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GRID_PREVENT_SELECTION_ELEMENT, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, isColumnMenuSortActive, isColumnMenuFilterActive, GridColumnMenuFilterProps, cellBoolDropdownChange, cellInputChange, cellOperatorChange, booleanFilterValues, operators, combineSmartFilters, parseFilterDates, GridRowSpannableSettings, handleAIResponse, GridAIState, GridAIResponseResult, GridCSVExportOptions, useGridAIRequest, GridAIRequestData, UseGridAIRequestOptions, UseGridAIRequestReturn, GridRowPinChangeEvent, GridWebMcpProps, GridWebMcpToolsCallback, GridWebMcpToolsHelpers, McpToolOption, GridAIRequestConfig, GridAIResponse, GridAIHttpClient, createAxiosAIClient };
 export { GridPinCell, GridHeaderPinCell };
 export * from './interfaces/GridStackedLayoutSettings';

package/index.d.ts

@@ -65,7 +65,9 @@ import { GridNoRecordsProps } from './interfaces/GridNoRecordsProps';
 import { GridSortSettings } from './interfaces/GridSortSettings';
 import { GridScrollableSettings } from './interfaces/GridScrollableSettings';
 import { GridPagerSettings } from './paging/GridPagerSettings.js';
-import { GridGroupableSettings } from './interfaces/GridGroupableSettings';
+import { GridGroupableSettings, GridGroupingMode } from './interfaces/GridGroupableSettings';
+import { GridGroupColumnFn, GridGroupColumnSettings } from './interfaces/GridGroupColumnSettings';
+import { GridColumnMenuGroupBaseProps } from './interfaces/GridColumnMenuGroupBaseProps';
 import { GridColumnMenuItem } from './columnMenu/GridColumnMenuItem.js';
 import { GridColumnMenuItemContent } from './columnMenu/GridColumnMenuItemContent.js';
 import { GridColumnMenuItemGroup } from './columnMenu/GridColumnMenuItemGroup.js';
@@ -95,6 +97,6 @@ export * from './GridSearchBox.js';
 export * from './GridPdfExportButton.js';
 export * from './GridCsvExportButton.js';
 export * from './toolbar-tools/smartbox/index.js';
-export { CompositeHighlightDescriptor, Grid, GridHandle, GridHighlightDescriptor, GridProps, GridColumn, GridColumnProps, GridColSpanProps, GridEditDialogProps, GridColumnChildrenProps, GridCellProps, GridColumnType, GridRowReorderEvent, GridDataType, GridRowReorderSettings, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridReorderDropPosition, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridColumnMenuColumnsList, GridColumnMenuColumnsListProps, GridColumnMenuColumnsChooser, GridColumnMenuColumnsChooserProps, GridColumnMenuColumnProps, GridColumnState, GridRowType, GridToolbar, GridToolbarProps, GridToolbarAIAssistant, GridToolbarAIAssistantHandle, GridToolbarAIAssistantProps, GridToolbarAIAssistantRequestData, GridAIAssistantCommand, GridAICommands, GridAIPrompt, GridAIPromptProps, GridToolbarSpacer, GridToolbarSpacerProps, GridToolbarSeparator, GridToolbarSeparatorProps, GridToolbarCheckboxFilter, GridToolbarCheckboxFilterProps, GridToolbarColumnsChooser, GridToolbarColumnsChooserProps, GridToolbarFilter, GridToolbarFilterProps, GridToolbarSort, GridToolbarSortProps, GridToolbarGroup, GridToolbarGroupProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridScrollableSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridSelectableSettings, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GRID_PREVENT_SELECTION_ELEMENT, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, isColumnMenuSortActive, isColumnMenuFilterActive, GridColumnMenuFilterProps, cellBoolDropdownChange, cellInputChange, cellOperatorChange, booleanFilterValues, operators, combineSmartFilters, parseFilterDates, GridRowSpannableSettings, handleAIResponse, GridAIState, GridAIResponseResult, GridCSVExportOptions, useGridAIRequest, GridAIRequestData, UseGridAIRequestOptions, UseGridAIRequestReturn, GridRowPinChangeEvent, GridWebMcpProps, GridWebMcpToolsCallback, GridWebMcpToolsHelpers, McpToolOption, GridAIRequestConfig, GridAIResponse, GridAIHttpClient, createAxiosAIClient };
+export { CompositeHighlightDescriptor, Grid, GridHandle, GridHighlightDescriptor, GridProps, GridColumn, GridColumnProps, GridColSpanProps, GridEditDialogProps, GridColumnChildrenProps, GridCellProps, GridColumnType, GridRowReorderEvent, GridDataType, GridRowReorderSettings, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridSelectionCell, GridColumnMenuProps, GridReorderDropPosition, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuFilterCellProps, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridColumnMenuColumnsList, GridColumnMenuColumnsListProps, GridColumnMenuColumnsChooser, GridColumnMenuColumnsChooserProps, GridColumnMenuColumnProps, GridColumnState, GridRowType, GridToolbar, GridToolbarProps, GridToolbarAIAssistant, GridToolbarAIAssistantHandle, GridToolbarAIAssistantProps, GridToolbarAIAssistantRequestData, GridAIAssistantCommand, GridAICommands, GridAIPrompt, GridAIPromptProps, GridToolbarSpacer, GridToolbarSpacerProps, GridToolbarSeparator, GridToolbarSeparatorProps, GridToolbarCheckboxFilter, GridToolbarCheckboxFilterProps, GridToolbarColumnsChooser, GridToolbarColumnsChooserProps, GridToolbarFilter, GridToolbarFilterProps, GridToolbarSort, GridToolbarSortProps, GridToolbarGroup, GridToolbarGroupProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridScrollableSettings, GridPagerSettings, GridGroupableSettings, GridGroupingMode, GridGroupColumnFn, GridGroupColumnSettings, GridColumnMenuGroupBaseProps, GridFooterCellProps, GridSelectableMode, GridSelectableSettings, GridFilterOperators, GridFilterOperator, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE, GRID_PREVENT_SELECTION_ELEMENT, GridCommonDragLogic, rootFilterOrDefault, filterGroupByField, isColumnMenuSortActive, isColumnMenuFilterActive, GridColumnMenuFilterProps, cellBoolDropdownChange, cellInputChange, cellOperatorChange, booleanFilterValues, operators, combineSmartFilters, parseFilterDates, GridRowSpannableSettings, handleAIResponse, GridAIState, GridAIResponseResult, GridCSVExportOptions, useGridAIRequest, GridAIRequestData, UseGridAIRequestOptions, UseGridAIRequestReturn, GridRowPinChangeEvent, GridWebMcpProps, GridWebMcpToolsCallback, GridWebMcpToolsHelpers, McpToolOption, GridAIRequestConfig, GridAIResponse, GridAIHttpClient, createAxiosAIClient };
 export { GridPinCell, GridHeaderPinCell };
 export * from './interfaces/GridStackedLayoutSettings';

package/interfaces/GridCellProps.d.ts

@@ -11,6 +11,7 @@ import { GridRowType } from './GridRowType';
 import { CellProps, GroupState } from '@progress/kendo-react-data-tools';
 import { GridColumnType } from './ColumnType';
 import { IntlService, LocalizationService } from '@progress/kendo-react-intl';
+import { GridGroupingMode } from './GridGroupableSettings';
 /**
  * Represents the props of the GridCell component
  * ([more information](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-grid-cells)).
@@ -28,6 +29,22 @@ export interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
      * The total number of rendered columns in the Grid. Optional.
      */
     columnsCount?: number;
+    /**
+     * @hidden
+     */
+    columnFields?: (string | undefined)[];
+    /**
+     * @hidden
+     */
+    columnTitles?: (string | undefined)[];
+    /**
+     * @hidden
+     */
+    columnGroupFields?: (string | undefined)[];
+    /**
+     * @hidden
+     */
+    hiddenColumnTitleByField?: Record<string, string | undefined>;
     /**
      * Defines a set of custom cell components that the Grid will render instead of the default cell.
      */
@@ -105,6 +122,10 @@ export interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
     /** @hidden */
     intl?: IntlService;
     /** @hidden */
+    groupingMode?: GridGroupingMode;
+    /** @hidden */
+    hasCheckboxColumn?: boolean;
+    /** @hidden */
     _rowSpan?: {
         count: number | null;
         value: any;

package/interfaces/GridCellsSettings.d.ts

@@ -59,6 +59,66 @@ export interface GridCustomCellProps extends GridCellProps {
      * The default children of the table cell.
      */
     children?: React.ReactNode | React.ReactNode[];
+    /**
+     * Indicates that this invocation of the custom `groupColumn.cells.groupHeader` /
+     * `groupColumn.cells.groupFooter` component is for a "filler" cell position that
+     * carries no content of its own, rather than the level's real toggle/value content
+     * cell — ancestor-level spacer columns when `groupable.displayMode` is
+     * `'multipleColumns'`, or (when `displayMode` is `'default'`) ancestor-level indent
+     * cells on the group-header row and every cell on the group-footer row. Check this
+     * flag to render simplified/blank content for such positions instead of the level's
+     * normal group header/footer content.
+     *
+     * @default false
+     */
+    isSpacerCell?: boolean;
+    /**
+     * Pre-calculated column span for ancestor-level group columns (columns before this group level).
+     * Applicable only when `groupable.displayMode` is `'multipleColumns'` or `'singleColumn'` and `rowType` is `'groupFooter'` or `'groupHeader'`.
+     * Use this in the `colSpan` attribute of ancestor-level spacer cells.
+     *
+     * @default undefined
+     */
+    leadingGroupColumnSpan?: number;
+    /**
+     * Pre-calculated column span for the content cell of this group column.
+     * Applicable only when `groupable.displayMode` is `'multipleColumns'` or `'singleColumn'` and `rowType` is `'groupFooter'` or `'groupHeader'`.
+     * Use this in the `colSpan` attribute of the cell containing the main group content.
+     *
+     * @default undefined
+     */
+    contentColumnSpan?: number;
+    /**
+     * Pre-calculated column span for descendant-level group columns (columns after this group level).
+     * Applicable only when `groupable.displayMode` is `'multipleColumns'` or `'singleColumn'` and `rowType` is `'groupFooter'` or `'groupHeader'`.
+     * Use this in the `colSpan` attribute of descendant-level spacer cells.
+     *
+     * @default undefined
+     */
+    trailingGroupColumnSpan?: number;
+    /**
+     * Looks up the rendered column index of a leaf column by its `field`, among the columns
+     * that come after this group column's own cell (the same columns covered by
+     * `trailingGroupColumnSpan`). Use this to align filler/aggregate cells rendered by a
+     * custom `groupColumn.cells.groupHeader` / `groupColumn.cells.groupFooter` template with
+     * a specific data column, without hardcoding column counts or positions.
+     * Applicable only when `groupable.displayMode` is `'multipleColumns'` or `'singleColumn'`
+     * and `rowType` is `'groupFooter'` or `'groupHeader'`. Returns `undefined` if the
+     * specified `field` is not among the rendered columns.
+     *
+     * @default undefined
+     */
+    getColumnIndexForField?: (field: string) => number | undefined;
+    /**
+     * The built-in group-level selection checkbox, when the Grid has a checkbox selection
+     * column configured. Render this wherever you want the checkbox to appear inside a
+     * custom `groupColumn.cells.groupHeader` component instead of reimplementing the
+     * selection state and toggle handling yourself. `undefined` when there is no checkbox
+     * selection column, or for `groupFooter` cells (which never render a checkbox).
+     *
+     * @default undefined
+     */
+    groupSelectionCheckbox?: React.ReactNode;
 }
 /**
  * The properties of the footer Grid Cell.

package/interfaces/GridGroupColumnSettings.d.ts

@@ -0,0 +1,170 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ComponentType } from 'react';
+import { GroupDescriptor } from '@progress/kendo-data-query';
+import { GridColumnMenuGroupBaseProps } from './GridColumnMenuGroupBaseProps';
+import { GridCustomCellProps } from './GridCellsSettings';
+/**
+ * A callback invoked once per synthesized group column, receiving a `GroupDescriptor`,
+ * and returning the settings to apply to that column.
+ *
+ * In `'multipleColumns'` mode there is one synthesized column per active group level, so
+ * the callback runs once per level, each time receiving that level's own `GroupDescriptor`.
+ * In `'singleColumn'` mode there is only ever one synthesized column for all levels, so the
+ * callback runs exactly once, receiving the first group level's `GroupDescriptor` — deeper
+ * levels aren't passed to it even though the same column renders their header/footer rows.
+ *
+ * @example
+ * ```tsx
+ * const groupColumnFn: GridGroupColumnFn = (groupDescriptor) => ({
+ *     title: groupDescriptor.field,
+ *     width: 200,
+ * });
+ *
+ * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: groupColumnFn }} />
+ * ```
+ */
+export type GridGroupColumnFn = (context: GroupDescriptor) => GridGroupColumnSettings;
+/**
+ * The settings for a synthesized group column produced by every `displayMode`. Most
+ * properties (`title`, `width`, `columnMenu`, etc.) only take effect for `'singleColumn'`
+ * and `'multipleColumns'` — the two modes that render the group column as a real, visible
+ * column — see each property's own doc for its exact scope. `cells` is the exception:
+ * it applies universally, including `'default'` and `'compact'` (see its doc below).
+ * Pass as the `groupColumn` property of `GridGroupableSettings` either as a static
+ * object (same settings for every group column) or via a `GridGroupColumnFn` callback (per-level
+ * customization).
+ */
+export interface GridGroupColumnSettings {
+    /**
+     * The column header text.
+     *
+     * @example
+     * ```tsx
+     * <Grid groupable={{ displayMode: 'singleColumn', groupColumn: { title: 'Group' } }} />
+     * ```
+     */
+    title?: string;
+    /**
+     * The initial width of the group column in pixels.
+     *
+     * @example
+     * ```tsx
+     * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { width: 200 } }} />
+     * ```
+     */
+    width?: number;
+    /**
+     * Locks (freezes) the group column so it remains visible while the Grid is scrolled horizontally.
+     * Equivalent to the existing per-column `locked` behavior.
+     * When set, overrides `props.lockGroups` for this specific group level.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { locked: true } }} />
+     * ```
+     */
+    locked?: boolean;
+    /**
+     * Allows the group column to be resized by the user.
+     *
+     * @default true
+     *
+     * @example
+     * ```tsx
+     * <Grid groupable={{ displayMode: 'singleColumn', groupColumn: { resizable: false } }} />
+     * ```
+     */
+    resizable?: boolean;
+    /**
+     * The minimum width of the group column in pixels that the user can resize it to.
+     *
+     * @example
+     * ```tsx
+     * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { minWidth: 80 } }} />
+     * ```
+     */
+    minWidth?: number;
+    /**
+     * The maximum width of the group column in pixels that the user can resize it to.
+     *
+     * @example
+     * ```tsx
+     * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { maxWidth: 400 } }} />
+     * ```
+     */
+    maxWidth?: number;
+    /**
+     * Allows the group column to be reordered by the user via drag and drop.
+     *
+     * @default true
+     *
+     * @example
+     * ```tsx
+     * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { reorderable: false } }} />
+     * ```
+     */
+    reorderable?: boolean;
+    /**
+     * A custom column menu component rendered in the group column header.
+     * The component receives `GridColumnMenuGroupBaseProps`.
+     * Has no effect when `displayMode` is `'default'` or `'compact'`.
+     *
+     * @example
+     * ```tsx
+     * import { GridColumnMenuGroupBaseProps } from '@progress/kendo-react-grid';
+     *
+     * const MyGroupColumnMenu = (props: GridColumnMenuGroupBaseProps) => <div>...</div>;
+     *
+     * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { columnMenu: MyGroupColumnMenu } }} />
+     * ```
+     */
+    columnMenu?: ComponentType<GridColumnMenuGroupBaseProps>;
+    /**
+     * Custom cell components for the group column. Unlike the other `groupColumn`
+     * settings (`title`, `width`, `columnMenu`, etc. — which only apply to `'singleColumn'`
+     * and `'multipleColumns'`, since only those modes render a real, visible group column),
+     * `cells` applies in **every** `displayMode`, including `'default'` and `'compact'` —
+     * the synthesized group column always exists internally and is always rendered through
+     * these templates, even when it has zero width or is split into per-level indent cells.
+     *
+     * - `groupHeader` — Replaces the default `"fieldLabel: value"` content area of the group header cell.
+     *   The expand/collapse toggle button is rendered before this component and is not affected.
+     * - `groupFooter` — Replaces the footer cell content of the group column.
+     *
+     * Both templates may be invoked for "filler" cell positions that carry no content of
+     * their own — ancestor-level spacer columns in `'multipleColumns'` mode, per-level
+     * indent cells in `'default'` mode, and the entire group-footer row in `'default'` mode
+     * (which renders its aggregates through the data columns instead, see
+     * `GridCellsSettings.groupFooter`). These positions are flagged via `isSpacerCell` on
+     * `GridCustomCellProps` so the template can render them distinctly (e.g. blank or
+     * differently styled) from the real toggle/value content cell.
+     *
+     * @example
+     * ```tsx
+     * import { GridCustomCellProps } from '@progress/kendo-react-grid';
+     *
+     * const MyGroupHeader = (props: GridCustomCellProps) =>
+     *     props.isSpacerCell ? <td {...props.tdProps} /> : <span>{props.dataItem}</span>;
+     *
+     * <Grid groupable={{ displayMode: 'singleColumn', groupColumn: { cells: { groupHeader: MyGroupHeader } } }} />
+     * ```
+     */
+    cells?: {
+        /**
+         * Custom component for the group header cell content.
+         */
+        groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for the group footer cell content.
+         */
+        groupFooter?: ComponentType<GridCustomCellProps>;
+    };
+}

package/interfaces/GridGroupableSettings.d.ts

@@ -6,6 +6,17 @@
  *-------------------------------------------------------------------------------------------
  */
 import { GridGroupExpandableSettings } from './GridGroupExpandableSettings';
+import { GridGroupColumnFn, GridGroupColumnSettings } from './GridGroupColumnSettings';
+/**
+ * Specifies the visualization mode for grouped data in the Grid.
+ *
+ * The available options are:
+ * - `'default'` — Renders the legacy indent-cell grouping layout.
+ * - `'compact'` — Removes the empty indent cells and renders group headers across the full row width.
+ * - `'singleColumn'` — Renders a single dedicated group column for all group levels.
+ * - `'multipleColumns'` — Renders one dedicated group column per group level.
+ */
+export type GridGroupingMode = 'default' | 'compact' | 'singleColumn' | 'multipleColumns';
 /**
  * The settings for grouping the data of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/grouping/grouping)).
  */
@@ -45,4 +56,59 @@ export interface GridGroupableSettings {
      * @default false
      */
     stickyFooters?: boolean;
+    /**
+     * Sets the visualization mode for grouped data.
+     *
+     * The available options are:
+     * - `'default'` — Renders the legacy indent-cell grouping layout (default behavior).
+     * - `'compact'` — Removes the empty indent cells; group headers span the full row width.
+     * - `'singleColumn'` — Renders a single dedicated group column for all group levels.
+     * - `'multipleColumns'` — Renders one dedicated group column per group level.
+     *
+     * @default 'default'
+     *
+     * @example
+     * ```tsx
+     * <Grid groupable={{ displayMode: 'singleColumn' }} />
+     * ```
+     */
+    displayMode?: GridGroupingMode;
+    /**
+     * Hides the data column for each field the Grid is grouped by.
+     * Only applies when `displayMode` is `'singleColumn'` or `'multipleColumns'` — the
+     * synthesized group column already displays the grouped field's value, so the
+     * original data column can be hidden to avoid duplication. Has no effect in `'default'` or
+     * `'compact'` modes.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * // Opt in to hide the original data column alongside the group column.
+     * <Grid groupable={{ displayMode: 'multipleColumns', hideGroupedColumns: true }} />
+     * ```
+     */
+    hideGroupedColumns?: boolean;
+    /**
+     * Customizes the synthesized group column(s). Accepts either a settings object
+     * (applied uniformly to every group column) or a `GridGroupColumnFn` callback invoked
+     * once per synthesized column (for per-level customization) — see `GridGroupColumnFn`
+     * for how invocation differs between `'singleColumn'` and `'multipleColumns'`.
+     *
+     * Most settings (`title`, `width`, `columnMenu`, etc.) only take effect for
+     * `'singleColumn'` and `'multipleColumns'` — the two modes that render the group
+     * column as a real, visible column. `cells` (custom `groupHeader`/`groupFooter`
+     * templates) is the exception and applies in every `displayMode`, including
+     * `'default'` and `'compact'` — see `GridGroupColumnSettings.cells`.
+     *
+     * @example
+     * ```tsx
+     * // Object form — same settings applied to every group column
+     * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: { width: 200 } }} />
+     *
+     * // Callback form — per-level customization
+     * <Grid groupable={{ displayMode: 'multipleColumns', groupColumn: (groupDescriptor) => ({ title: groupDescriptor.field }) }} />
+     * ```
+     */
+    groupColumn?: GridGroupColumnFn | GridGroupColumnSettings;
 }

package/interfaces/GridHeaderCellProps.d.ts

@@ -20,4 +20,8 @@ export interface GridHeaderCellProps extends Omit<HeaderCellBaseProps, 'render'>
      * @hidden
      */
     id?: string;
+    /**
+     * @hidden
+     */
+    isGroupColumn?: boolean;
 }

package/messages/index.d.ts

@@ -73,6 +73,10 @@ export declare const groupColumn = "grid.groupColumn";
  * @hidden
  */
 export declare const ungroupColumn = "grid.ungroupColumn";
+/**
+ * @hidden
+ */
+export declare const groupColumnTitle = "grid.groupColumnTitle";
 /**
  * @hidden
  */
@@ -401,6 +405,7 @@ export declare const messages: {
     "grid.toolbarCheckboxFilter": string;
     "grid.groupColumn": string;
     "grid.ungroupColumn": string;
+    "grid.groupColumnTitle": string;
     "grid.columnMenu": string;
     "grid.pagerItemsPerPage": string;
     "grid.pagerInfo": string;