@progress/kendo-react-grid 13.3.0-develop.9 → 13.4.0-develop.1

package/interfaces/GridCellsSettings.d.ts

@@ -0,0 +1,366 @@
+/**
+ * @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 { TABLE_COL_INDEX_ATTRIBUTE, HeaderThElementProps } from '@progress/kendo-react-data-tools';
+import { GridCellProps } from './GridCellProps.js';
+import { GridFooterCellProps } from './GridFooterCellProps.js';
+import { GridFilterCellProps } from './GridFilterCellProps.js';
+import { GridHeaderCellProps } from './GridHeaderCellProps.js';
+import { GridStackedCustomCellProps } from '../stacked/GridStackedRow.js';
+/**
+ * Represents the attributes for Grid table cell elements, extending standard HTML td element properties.
+ */
+export interface GridTdAttributes extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * The column index attribute used for grid operations.
+     */
+    [TABLE_COL_INDEX_ATTRIBUTE]?: number;
+    /**
+     * The unique identifier of the column.
+     */
+    columnId?: string;
+    /**
+     * The React key for the element.
+     */
+    key?: string;
+}
+/**
+ * Represents the attributes for Grid header cell elements, extending standard HTML th element properties.
+ */
+export interface GridThAttributes extends HeaderThElementProps {
+    /**
+     * The unique identifier of the column.
+     */
+    columnId: string;
+    /**
+     * The React key for the element.
+     */
+    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 th element by default.
+     */
+    thProps?: GridThAttributes | null;
+    /**
+     * The props and attributes that are applied to the td element by default.
+     */
+    tdProps?: GridTdAttributes | 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 `th` element by default. The property should be used with the [HeaderThElement](https://www.telerik.com/kendo-react-ui/components/datatools/api/headerthelement) component as demonstrated in [this example](https://www.telerik.com/kendo-react-ui/components/grid/cells#toc-group-header-group-footer-header-cell-footer-cell-filter-cell-and-data-cell).
+     */
+    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 {
+    /**
+     * Custom component for rendering the header cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyHeaderCell } from './MyHeaderCell.js';
+     * <Grid cells={{ headerCell: MyHeaderCell }} />
+     * ```
+     */
+    headerCell?: ComponentType<GridCustomHeaderCellProps>;
+    /**
+     * Custom component for rendering the filter cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyFilterCell } from './MyFilterCell.js';
+     * <Grid cells={{ filterCell: MyFilterCell }} />
+     * ```
+     */
+    filterCell?: ComponentType<GridCustomFilterCellProps>;
+    /**
+     * Custom component for rendering the footer cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyFooterCell } from './MyFooterCell.js';
+     * <Grid cells={{ footerCell: MyFooterCell }} />
+     * ```
+     */
+    footerCell?: ComponentType<GridCustomFooterCellProps>;
+    /**
+     * Custom component for rendering the group header cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupHeaderCell } from './MyGroupHeaderCell.js';
+     * <Grid cells={{ groupHeader: MyGroupHeaderCell }} />
+     * ```
+     */
+    groupHeader?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom component for rendering the data cell in table layout mode.
+     *
+     * @example
+     * ```tsx
+     * import { MyDataCell } from './MyDataCell.js';
+     * <Grid cells={{ data: MyDataCell }} />
+     * ```
+     */
+    data?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom component for rendering the data cell in stacked layout mode.
+     * When both `stackedData` and `data` are provided, `stackedData` takes precedence in stacked layout.
+     *
+     * @example
+     * ```tsx
+     * import { MyStackedDataCell } from './MyStackedDataCell.js';
+     * <Grid
+     *   stackedLayout={{ enabled: true }}
+     *   cells={{ stackedData: MyStackedDataCell }}
+     * />
+     * ```
+     */
+    stackedData?: ComponentType<GridStackedCustomCellProps>;
+    /**
+     * Custom component for rendering the group footer cell.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupFooterCell } from './MyGroupFooterCell.js';
+     * <Grid cells={{ groupFooter: MyGroupFooterCell }} />
+     * ```
+     */
+    groupFooter?: ComponentType<GridCustomCellProps>;
+    /**
+     * Custom cell components for selection columns.
+     *
+     * @example
+     * ```tsx
+     * import { MySelectDataCell } from './MySelectDataCell.js';
+     * <Grid cells={{ select: { data: MySelectDataCell } }} />
+     * ```
+     */
+    select?: {
+        /**
+         * Custom component for rendering the group header cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectGroupHeaderCell } from './MySelectGroupHeaderCell.js';
+         * <Grid cells={{ select: { groupHeader: MySelectGroupHeaderCell } }} />
+         * ```
+         */
+        groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectDataCell } from './MySelectDataCell.js';
+         * <Grid cells={{ select: { data: MySelectDataCell } }} />
+         * ```
+         */
+        data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in selection columns.
+         *
+         * @example
+         * ```tsx
+         * import { MySelectGroupFooterCell } from './MySelectGroupFooterCell.js';
+         * <Grid cells={{ select: { groupFooter: MySelectGroupFooterCell } }} />
+         * ```
+         */
+        groupFooter?: ComponentType<GridCustomCellProps>;
+    };
+    /**
+     * Custom cell components for hierarchy columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyHierarchyDataCell } from './MyHierarchyDataCell.js';
+     * <Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />
+     * ```
+     */
+    hierarchy?: {
+        /**
+         * Custom component for rendering the group header cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyGroupHeaderCell } from './MyHierarchyGroupHeaderCell.js';
+         * <Grid cells={{ hierarchy: { groupHeader: MyHierarchyGroupHeaderCell } }} />
+         * ```
+         */
+        groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyDataCell } from './MyHierarchyDataCell.js';
+         * <Grid cells={{ hierarchy: { data: MyHierarchyDataCell } }} />
+         * ```
+         */
+        data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in hierarchy columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyHierarchyGroupFooterCell } from './MyHierarchyGroupFooterCell.js';
+         * <Grid cells={{ hierarchy: { groupFooter: MyHierarchyGroupFooterCell } }} />
+         * ```
+         */
+        groupFooter?: ComponentType<GridCustomCellProps>;
+    };
+    /**
+     * Custom cell components for group columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyGroupDataCell } from './MyGroupDataCell.js';
+     * <Grid cells={{ group: { data: MyGroupDataCell } }} />
+     * ```
+     */
+    group?: {
+        /**
+         * Custom component for rendering the group header cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupGroupHeaderCell } from './MyGroupGroupHeaderCell.js';
+         * <Grid cells={{ group: { groupHeader: MyGroupGroupHeaderCell } }} />
+         * ```
+         */
+        groupHeader?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the data cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupDataCell } from './MyGroupDataCell.js';
+         * <Grid cells={{ group: { data: MyGroupDataCell } }} />
+         * ```
+         */
+        data?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the group footer cell in group columns.
+         *
+         * @example
+         * ```tsx
+         * import { MyGroupGroupFooterCell } from './MyGroupGroupFooterCell.js';
+         * <Grid cells={{ group: { groupFooter: MyGroupGroupFooterCell } }} />
+         * ```
+         */
+        groupFooter?: ComponentType<GridCustomCellProps>;
+    };
+    /**
+     * Custom cell components for edit columns.
+     *
+     * @example
+     * ```tsx
+     * import { MyTextEditCell } from './MyTextEditCell.js';
+     * <Grid cells={{ edit: { text: MyTextEditCell } }} />
+     * ```
+     */
+    edit?: {
+        /**
+         * Custom component for rendering the text edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyTextEditCell } from './MyTextEditCell.js';
+         * <Grid cells={{ edit: { text: MyTextEditCell } }} />
+         * ```
+         */
+        text?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the numeric edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyNumericEditCell } from './MyNumericEditCell.js';
+         * <Grid cells={{ edit: { numeric: MyNumericEditCell } }} />
+         * ```
+         */
+        numeric?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the boolean edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyBooleanEditCell } from './MyBooleanEditCell.js';
+         * <Grid cells={{ edit: { boolean: MyBooleanEditCell } }} />
+         * ```
+         */
+        boolean?: ComponentType<GridCustomCellProps>;
+        /**
+         * Custom component for rendering the date edit cell.
+         *
+         * @example
+         * ```tsx
+         * import { MyDateEditCell } from './MyDateEditCell.js';
+         * <Grid cells={{ edit: { date: MyDateEditCell } }} />
+         * ```
+         */
+        date?: ComponentType<GridCustomCellProps>;
+    };
+}

package/interfaces/GridColSpanProps.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridColumnProps } from './GridColumnProps.js';
+/**
+ * Represents the properties of the callback used when spanning a column.
+ */
+export type GridColSpanProps = {
+    /**
+     * Represents the properties of the spanned column.
+     */
+    column: GridColumnProps;
+    /**
+     * Represents the current row data item.
+     */
+    dataItem: any;
+};

package/interfaces/GridColumnChildrenProps.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ReactElement } from 'react';
+import { GridColumnProps } from './GridColumnProps.js';
+/**
+ * The type of elements that the children property of the Grid accepts.
+ */
+export interface GridColumnChildrenProps extends GridColumnProps, ReactElement<GridColumnProps> {
+    /**
+     * The props object containing GridColumn properties.
+     */
+    props: GridColumnProps;
+}

package/interfaces/GridColumnMenuBaseProps.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridColumnMenuColumnProps } from './GridColumnMenuColumnProps.js';
+/**
+ * @hidden
+ */
+export interface GridColumnMenuBaseProps {
+    /**
+     * The current column options.
+     */
+    column: GridColumnMenuColumnProps;
+    /**
+     * The method that will be called to close the column menu.
+     */
+    onCloseMenu?: Function;
+}

package/interfaces/GridColumnMenuColumnProps.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The column props passed by the ColumnMenu.
+ */
+export interface GridColumnMenuColumnProps {
+    /**
+     * The field to which the column is bound.
+     */
+    field?: string;
+    /**
+     * Defines the filter type that is displayed inside the filter row. Defaults to `text`.
+     */
+    filter?: 'text' | 'numeric' | 'boolean' | 'date';
+    /**
+     * The column locked state.
+     */
+    locked?: boolean;
+    /**
+     * @hidden
+     */
+    title?: string;
+    /**
+     * The column id.
+     */
+    id?: string;
+}

package/interfaces/GridColumnMenuColumnsChooserBaseProps.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridColumnMenuBaseProps } from './GridColumnMenuBaseProps.js';
+import { GridColumnState } from './GridColumnState.js';
+/**
+ *  The props passed to the ColumnMenu ColumnsChooser component.
+ */
+export interface GridColumnMenuColumnsChooserBaseProps extends GridColumnMenuBaseProps {
+    /**
+     * The columns state of the KendoReact GridColumnMenuColumnsChooser component.
+     */
+    columnsState?: GridColumnState[];
+    /**
+     * The method that will be called when the new columns state is applied.
+     */
+    onColumnsStateChange?: Function;
+}

package/interfaces/GridColumnMenuFilterBaseProps.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { CompositeFilterDescriptor } from '@progress/kendo-data-query';
+import { GridColumnMenuBaseProps } from './GridColumnMenuBaseProps.js';
+import { GridFilterOperators } from './GridFilterOperators.js';
+/**
+ * The props passed to the ColumnMenu filter component.
+ */
+export interface GridColumnMenuFilterBaseProps extends GridColumnMenuBaseProps {
+    /**
+     * The current filter state of the Grid.It takes value of type [CompositeFilterDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/compositefilterdescriptor)
+     */
+    filter?: CompositeFilterDescriptor;
+    /**
+     * The filterable option of the column.
+     */
+    filterable?: boolean | undefined;
+    /**
+     * The filter operators for the Grid filters.
+     */
+    filterOperators: GridFilterOperators;
+    /**
+     * The method that will be called to notify the parent Grid about a filter change.
+     */
+    onFilterChange?: (filter: CompositeFilterDescriptor | null, syntheticEvent: React.SyntheticEvent<any>) => any;
+}

package/interfaces/GridColumnMenuFilterUIProps.d.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridFilterCellProps } from './GridFilterCellProps.js';
+import { GridFilterOperator } from './GridFilterOperator.js';
+/**
+ * The props that will be passed to the UI of the ColumnMenu filter component.
+ */
+export interface GridColumnMenuFilterUIProps {
+    /**
+     * The options of the first filter.
+     */
+    firstFilterProps: GridFilterCellProps;
+    /**
+     * The options of the second filter.
+     */
+    secondFilterProps: GridFilterCellProps;
+    /**
+     * The current value of the filter logic.
+     */
+    logicValue?: GridFilterOperator;
+    /**
+     * The list of the filter logic options.
+     */
+    logicData: GridFilterOperator[];
+    /**
+     * The method that will be called to notify the parent about a change in the filter logic.
+     */
+    onLogicChange: (e: any) => void;
+    /**
+     * Indicates if the second filter will be hidden.
+     */
+    hideSecondFilter?: boolean;
+}

package/interfaces/GridColumnMenuGroupBaseProps.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GroupDescriptor } from '@progress/kendo-data-query';
+import { GridColumnMenuBaseProps } from './GridColumnMenuBaseProps.js';
+/**
+ *  The props passed to the ColumnMenu group component.
+ */
+export interface GridColumnMenuGroupBaseProps extends GridColumnMenuBaseProps {
+    /**
+     * The groupable option of the column.
+     */
+    groupable?: boolean;
+    /**
+     * The current group state of the Grid. It takes value of type [GroupDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/groupdescriptor)[]
+     */
+    group?: GroupDescriptor[];
+    /**
+     * The method that will be called to notify the parent Grid about a group change.
+     */
+    onGroupChange?: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLAnchorElement>) => void;
+}

package/interfaces/GridColumnMenuProps.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridColumnMenuColumnsChooserBaseProps } from './GridColumnMenuColumnsChooserBaseProps.js';
+import { GridColumnMenuFilterBaseProps } from './GridColumnMenuFilterBaseProps.js';
+import { GridColumnMenuGroupBaseProps } from './GridColumnMenuGroupBaseProps.js';
+import { GridColumnMenuSortBaseProps } from './GridColumnMenuSortBaseProps.js';
+/**
+ * The props which the ColumnMenu passes to its children.
+ */
+export interface GridColumnMenuProps extends GridColumnMenuFilterBaseProps, GridColumnMenuSortBaseProps, GridColumnMenuGroupBaseProps, GridColumnMenuColumnsChooserBaseProps {
+    /**
+     * Determines if the column menu supports keyboard navigation.
+     */
+    navigatable?: boolean;
+    /**
+     * Determines if the column menu is visible.
+     */
+    show?: boolean;
+}

package/interfaces/GridColumnMenuSortBaseProps.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SortDescriptor } from '@progress/kendo-data-query';
+import { GridSortSettings } from './GridSortSettings.js';
+import { GridColumnMenuBaseProps } from './GridColumnMenuBaseProps.js';
+/**
+ *  The props passed to the ColumnMenu sort component.
+ */
+export interface GridColumnMenuSortBaseProps extends GridColumnMenuBaseProps {
+    /**
+     * The sortable option of the column.
+     */
+    sortable?: GridSortSettings;
+    /**
+     * The current sort state of the Grid. It takes a value of type [SortDescriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/sortdescriptor)[]
+     */
+    sort?: SortDescriptor[];
+    /**
+     * The method that will be called to notify the parent Grid about a sort change.
+     */
+    onSortChange?: (descriptors: SortDescriptor[], e: React.SyntheticEvent<any>) => void;
+}