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

package/interfaces/GridProps.d.ts

@@ -0,0 +1,1083 @@
+/**
+ * @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 { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
+import { GridGroupableSettings } from './GridGroupableSettings.js';
+import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridEvent, GridRowDoubleClickEvent, GridNavigationActionEvent, GridKeyDownEvent, GridContextMenuEvent, GridContextMenuItemClickEvent, GridEditChangeEvent, GridDetailExpandChangeEvent, GridGroupExpandChangeEvent, GridRowReorderEvent, GridSearchChangeEvent, GridColumnsStateChangeEvent, GridHighlightChangeEvent } from './events.js';
+import { ScrollMode } from '../ScrollMode.js';
+import { GridSortSettings } from './GridSortSettings.js';
+import { GridPagerSettings } from '../paging/GridPagerSettings.js';
+import { GridDetailRowProps } from '../interfaces/GridDetailRowProps.js';
+import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps.js';
+import { GridFilterOperators } from './GridFilterOperators.js';
+import { GridSelectableSettings } from './GridSelectableSettings.js';
+import { ClipboardSettings, EditDescriptor, PagerProps, NavigatableSettings, SelectDescriptor, GroupExpandDescriptor, DetailExpandDescriptor, SearchField, GridClipboardEvent } from '@progress/kendo-react-data-tools';
+import { GridClassStructure, KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { GridCellsSettings } from './GridCellsSettings.js';
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import { IntlService, LocalizationService } from '@progress/kendo-react-intl';
+import { GridCellBaseOptions, GridContextMenuOptions } from '../contextMenu/GridContextMenu.js';
+import { GridEditableSettings } from './GridEditableSettings.js';
+import { GridRowReorderSettings } from './GridRowReorderSettings.js';
+import { GridRowSpannableSettings } from './GridRowSpannableSettings.js';
+import { GridRowsSettings } from './GridRowsSettings.js';
+import { GridColumnState } from './GridColumnState.js';
+import { GridEditDialogProps } from './GridEditDialogProps.js';
+import { GridHighlightDescriptor } from './GridHighlightDescriptor.js';
+import { GridDataLayoutMode, GridStackedLayoutSettings } from './GridStackedLayoutSettings.js';
+/**
+ * Represents the props of the [KendoReact Grid component](https://www.telerik.com/kendo-react-ui/components/grid).
+ */
+export interface GridProps extends KendoReactComponentBaseProps {
+    /**
+     * Enables data-processing inside the GridComponent based on its state.
+     * Provides an easy, built-in way to handle data operations like sorting, filtering, grouping, and paging.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   autoProcessData={{
+     *     filter: true,
+     *     search: true,
+     *     sort: true,
+     *     group: true,
+     *     page: true
+     *   }}
+     * />
+     * ```
+     */
+    autoProcessData?: boolean | {
+        filter?: boolean;
+        search?: boolean;
+        sort?: boolean;
+        group?: boolean;
+        page?: boolean;
+    };
+    /**
+     * Sets the Grid row key prop to the value of this field in the dataItem.
+     * If not set, the dataItem index will be used for the row key, which might lead to rows not updating during paging or scrolling.
+     *
+     * @example
+     * ```jsx
+     * <Grid dataItemKey="ID" />
+     * ```
+     */
+    dataItemKey?: string;
+    /**
+     * Sets a class for the Grid DOM element.
+     *
+     * @example
+     * ```jsx
+     * <Grid className="custom-grid-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Defines a set of custom cell components that the Grid will render instead of the default cells.
+     *
+     * @example
+     * ```jsx
+     * import { GridCustomCellProps } from '@progress/kendo-react-grid';
+     *
+     * const CustomCell = (props: GridCustomCellProps) => (
+     *   <td {...props.tdProps}>
+     *     {props.dataItem[props.field]}
+     *   </td>
+     * );
+     *
+     * <Grid
+     *   cells={{
+     *     data: CustomCell
+     *   }}
+     * />
+     * ```
+     */
+    cells?: GridCellsSettings;
+    /**
+     *
+     * @example
+     * ```jsx
+     * import { GridCustomRowProps } from '@progress/kendo-react-grid';
+     *
+     * const CustomRow = (props: GridCustomRowProps) => (
+     *   <tr {...props.trProps} style={{ backgroundColor: props.dataItem?.highlight ? 'yellow' : 'white' }}>
+     *     {props.children}
+     *   </tr>
+     * );
+     *
+     * <Grid
+     *   rows={{
+     *     data: CustomRow
+     *   }}
+     * />
+     * ```
+     */
+    rows?: GridRowsSettings;
+    /**
+     * Sets the data of the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging)). If you use paging, the `data` option has to contain only the items for the current page. It takes values of type null, any or [DataResult](https://www.telerik.com/kendo-react-ui/components/datatools/api/dataresult)
+     * Accepts values of type `null`, `any[]`, or `DataResult`.
+     *
+     * @example
+     * ```jsx
+     * <Grid data={data} />
+     * ```
+     */
+    data?: any[] | DataResult | null;
+    /**
+     * Enables sorting for the columns with their `field` option set.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
+     *
+     * @example
+     * ```jsx
+     * <Grid sortable={true} />
+     * ```
+     */
+    sortable?: GridSortSettings;
+    /**
+     * Enables clipboard copy, cut, and paste manipulations. Accepts `ClipboardSettings` or a boolean value.
+     *
+     * @example
+     * ```jsx
+     * <Grid clipboard={true}  />
+     * ```
+     */
+    clipboard?: ClipboardSettings | boolean;
+    /**
+     * Fires when clipboard support is enabled, and one of the actions (e.g., copy) is triggered.
+     * Accepts a `GridClipboardEvent` object.
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   clipboard={true}
+     *   onClipboard={(event) => console.log('Clipboard action:', event.action)}
+     * />
+     * ```
+     */
+    onClipboard?: (event: GridClipboardEvent) => void;
+    /**
+     * Fires when the sorting of the Grid is changed. You must handle the event and sort the data.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   sortable={true}
+     *   onSortChange={(event) => console.log('Sort changed:', event.sort)}
+     * />
+     * ```
+     */
+    onSortChange?: (event: GridSortChangeEvent) => void;
+    /**
+     * The ([descriptors](https://www.telerik.com/kendo-react-ui/components/datatools/api/sortdescriptor)) by which the data is sorted. Applies the sorting styles and buttons to the affected columns.
+     *
+     * @example
+     * ```jsx
+     * <Grid sort={[{ field: 'name', dir: 'asc' }]} />
+     * ```
+     */
+    sort?: SortDescriptor[];
+    /**
+     * The default `sort` state applied to the Grid when using uncontrolled mode.
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/grid/sorting))
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultSort={[{ field: 'name', dir: 'asc' }]} />
+     * ```
+     */
+    defaultSort?: SortDescriptor[];
+    /**
+     * Enables filtering for the columns with their `field` option set.
+     *
+     * @example
+     * ```jsx
+     * <Grid filterable={true} />
+     * ```
+     */
+    filterable?: boolean;
+    /**
+     * The [descriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/compositefilterdescriptor) by which
+     * the data is filtered ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/filtering)). This affects
+     * the values and buttons in the `FilterRow` of the Grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid filter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />
+     * ```
+     */
+    filter?: CompositeFilterDescriptor;
+    /**
+     * The default `filter` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultFilter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />
+     * ```
+     */
+    defaultFilter?: CompositeFilterDescriptor;
+    /**
+     * The filter operators for the Grid filters.
+     *
+     * @example
+     * ```jsx
+     * <Grid filterOperators={{ text: [{ text: 'grid.filterContainsOperator', operator: 'contains' }] }} />
+     * ```
+     */
+    filterOperators?: GridFilterOperators;
+    /**
+     * Fires when the Grid filter is modified through the UI. You must handle the event and filter the data.
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   filterable={true}
+     *   onFilterChange={(event) => console.log('Filter changed:', event.filter)}
+     * />
+     * ```
+     */
+    onFilterChange?: (event: GridFilterChangeEvent) => void;
+    /**
+     * Fires when the Grid highlight is modified. You must handle the event and filter the data.
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   onHighlightChange={(event) => console.log('Highlight changed:', event.highlight)}
+     * />
+     * ```
+     */
+    onHighlightChange?: (event: GridHighlightChangeEvent) => void;
+    /**
+     * Specifies whether the loader of the Grid will be displayed.
+     *
+     * @example
+     * ```jsx
+     * <Grid
+     *   showLoader={true}
+     *   loader={<div>Loading...</div>}
+     * />
+     * ```
+     */
+    showLoader?: boolean;
+    /**
+     * A custom component that the Grid will render instead of the built-in loader.
+     *
+     * @example
+     * ```jsx
+     * <Grid loader={<div>Custom Loader...</div>} />
+     * ```
+     */
+    loader?: React.ReactNode;
+    /**
+     * Fires when the user reorders a row.
+     *
+     * @example
+     * ```jsx
+     * <Grid onRowReorder={(event) => console.log('Row reordered:', event)} />
+     * ```
+     */
+    onRowReorder?: (event: GridRowReorderEvent) => void;
+    /**
+     * Specifies a React element that will be cloned and rendered inside the column menu of the Grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid columnMenu={() => <div>Custom Column Menu</div>} />
+     * ```
+     */
+    columnMenu?: null | ComponentType<GridColumnMenuProps>;
+    /**
+     * Specifies the context menu settings applied to the Grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid contextMenu={true} />
+     * ```
+     */
+    contextMenu?: boolean | GridContextMenuOptions | ((options: GridCellBaseOptions) => boolean | GridContextMenuOptions);
+    /**
+     * Globally overrides the default (three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level
+     *  using the ([menuIcon](https://www.telerik.com/kendo-react-ui/components/grid/api/gridcolumnprops#toc-menuicon)) property.
+     */
+    columnMenuIcon?: SVGIcon;
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
+    /**
+     * The [descriptors](https://www.telerik.com/kendo-react-ui/components/datatools/api/groupdescriptor)[] by which the data will be grouped
+     * ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
+     *
+     * @example
+     * ```jsx
+     * <Grid group={[{ field: 'CategoryName' }]} />
+     * ```
+     */
+    group?: GroupDescriptor[];
+    /**
+     * The default `group` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultGroup={[{ field: 'CategoryName' }]} />
+     * ```
+     */
+    defaultGroup?: GroupDescriptor[];
+    /**
+     * Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data
+     * ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
+     *
+     * @example
+     * ```jsx
+     * <Grid onGroupChange={(event) => console.log('Group changed:', event.group)} />
+     * ```
+     */
+    onGroupChange?: (event: GridGroupChangeEvent) => void;
+    /**
+     * Configures the pager of the Grid. Accepts `GridPagerSettings` or a boolean value.([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging))
+     *
+     * The available options are:
+     * - `buttonCount: Number`&mdash;Sets the maximum numeric buttons count before the buttons are collapsed.
+     * - `info: Boolean`&mdash;Toggles the information about the current page and the total number of records.
+     * - `type: PagerType`&mdash;Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values.
+     * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size.
+     * - `pageSizeValue: String or Number`&mdash;Sets the selected value of the page size Dropdownlist. It is useful when the selected value could also be a string not only a number.
+     * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons.
+     * - `navigatable: Boolean`&mdash;Defines if the pager will be navigatable.
+     * - `responsive: Boolean`&mdash;Defines if the pager will be responsive. If true, hides the tools that do not fit to the available space.
+     * - `adaptive: Boolean`&mdash;Providing different rendering of the page sizes select element based on the screen dimensions.
+     * - `adaptiveTitle: String`&mdash;Specifies the text that is rendered as title in the adaptive page sizes select element.
+     *
+     * @example
+     * ```jsx
+     * <Grid pageable={{ pageSizes: true }} />
+     * ```
+     */
+    pageable?: GridPagerSettings | boolean;
+    /**
+     * Defines the page size used by the Grid pager. Required for paging functionality.
+     *
+     * @example
+     * ```jsx
+     * <Grid pageSize={10} />
+     * ```
+     */
+    pageSize?: number;
+    /**
+     * The pager component that the Grid will render instead of the built-in pager.
+     *  It takes values of type null and ComponentType&lt;[PagerProps](https://www.telerik.com/kendo-react-ui/components/datatools/api/pagerprops)&gt
+     *
+     * @example
+     * ```jsx
+     * <Grid pager={() => <div>Custom Pager</div>} />
+     * ```
+     */
+    pager?: null | ComponentType<PagerProps>;
+    /**
+     * When set to true the Grid pdf export will be enabled.
+     * If set to an object, the Grid will use the provided settings to export the PDF.
+     *
+     * @example
+     * ```jsx
+     * <Grid pdf={true} />
+     * ```
+     */
+    pdf?: boolean | GridProps;
+    /**
+     * Fires when the user clicks the PDF export button.
+     *
+     * @example
+     * ```jsx
+     *
+     * <Grid onPdfExport={async (event) => {
+     *        const pdf = await import('@progress/kendo-react-pdf');
+     *        await pdf.saveGridPDF(event.target);
+     *  }} />
+     * ```
+     */
+    onPdfExport?: (event: {
+        target: HTMLDivElement;
+    }) => Promise<void>;
+    /**
+     * Alias for the `pageSize` property. If `take` is set, `pageSize` will be ignored.
+     *
+     * @example
+     * ```jsx
+     * <Grid take={20} />
+     * ```
+     */
+    take?: number;
+    /**
+     * The default `take` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultTake={20} />
+     * ```
+     */
+    defaultTake?: number;
+    /**
+     * Fires when the page of the Grid is changed.
+     *
+     * @example
+     * ```jsx
+     * <Grid onPageChange={(event) => console.log('Page changed:', event.page)} />
+     * ```
+     */
+    onPageChange?: (event: GridPageChangeEvent) => void;
+    /**
+     * Defines the total number of data items in all pages. Required for paging functionality.
+     *
+     * @example
+     * ```jsx
+     * <Grid total={100} />
+     * ```
+     */
+    total?: number;
+    /**
+     * Defines the number of records that will be skipped by the pager ([see example](https://www.telerik.com/kendo-react-ui/components/grid/paging)). Required by the paging functionality.
+     *
+     * @example
+     * ```jsx
+     * <Grid skip={10} />
+     * ```
+     */
+    skip?: number;
+    /**
+     * The default `skip` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultSkip={10} />
+     * ```
+     */
+    defaultSkip?: number;
+    /**
+     * Determines if the scroll position will be updated after a data change.
+     * If set to `true`, the scroll will remain in the same position.
+     */
+    fixedScroll?: boolean;
+    /**
+     * The descriptor by which the detail row is expanded.
+     *
+     * @example
+     * ```jsx
+     * <Grid detailExpand={{ ['item-data-key-id']: true }} />
+     * ```
+     */
+    detailExpand?: DetailExpandDescriptor;
+    /**
+     * Sets a custom edit dialog component that the Grid will render instead of the built-in edit dialog.
+     */
+    editDialog?: (props: GridEditDialogProps) => React.ReactNode;
+    /**
+     * The default `detailExpand` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultDetailExpand={{ ['item-data-key-id']: true }} />
+     * ```
+     */
+    defaultDetailExpand?: DetailExpandDescriptor;
+    /**
+     * Fires when the user expands or collapses a detail row.
+     *
+     * @example
+     * ```jsx
+     * <Grid onDetailExpandChange={(event) => console.log('Detail expand changed:', event)} />
+     * ```
+     */
+    onDetailExpandChange?: (event: GridDetailExpandChangeEvent) => void;
+    /**
+     * The descriptor by which the group is expanded.
+     *
+     * @example
+     * ```jsx
+     * <Grid groupExpand={[{ field: 'CategoryName', expanded: true }]} />
+     * ```
+     */
+    groupExpand?: GroupExpandDescriptor[];
+    /**
+     * The default `groupExpand` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultGroupExpand={[{ field: 'CategoryName', expanded: true }]} />
+     * ```
+     */
+    defaultGroupExpand?: GroupExpandDescriptor[];
+    /**
+     * Fires when the user expands or collapses a group.
+     *
+     * @example
+     * ```jsx
+     * <Grid onGroupExpandChange={(event) => console.log('Group expand changed:', event)} />
+     * ```
+     */
+    onGroupExpandChange?: (event: GridGroupExpandChangeEvent) => void;
+    /**
+     * The [descriptor](https://www.telerik.com/kendo-react-ui/components/datatools/api/selectdescriptor) by which the selected state of an item is defined.
+     * Passing a boolean value will select the whole row, while passing an array of strings will select individual.
+     *
+     * @example
+     * ```jsx
+     * <Grid select={{ ['item-data-key-id']: true }} />
+     * ```
+     */
+    select?: SelectDescriptor;
+    /**
+     *  The descriptor by which the highlight state of an item is defined.
+     * Passing a boolean value will highlight the whole row, while passing an object will highlight individual cells by their field.
+     *
+     * @example
+     * ```jsx
+     * <Grid highlight={{ ['item-data-key-id']: true }} />
+     * <Grid highlight={{ ['item-data-key-id']: [2, 3] }} />
+     * ```
+     */
+    highlight?: GridHighlightDescriptor;
+    /**
+     * The default `select` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultSelect={{ ['item-data-key-id']: true }} />
+     * ```
+     */
+    defaultSelect?: SelectDescriptor;
+    /**
+     * The Grid selectable settings.
+     *
+     * @example
+     * ```jsx
+     * <Grid selectable={{ enabled: true, mode: 'single' }} />
+     * ```
+     */
+    selectable?: boolean | GridSelectableSettings;
+    /**
+     * Fires when the user tries to select or deselect a row or cell.
+     *
+     * @example
+     * ```jsx
+     * <Grid onSelectionChange={(event) => console.log('Selection changed:', event)} />
+     * ```
+     */
+    onSelectionChange?: (event: GridSelectionChangeEvent) => void;
+    /**
+     * Fires when the user clicks the checkbox of a column header whose type is set to `checkbox`.
+     *
+     * @example
+     * ```jsx
+     * <Grid onHeaderSelectionChange={(event) => console.log('Header selection changed:', event)} />
+     * ```
+     */
+    onHeaderSelectionChange?: (event: GridHeaderSelectionChangeEvent) => void;
+    /**
+     * Fires when the user clicks a row.
+     *
+     * @example
+     * ```jsx
+     * <Grid onRowClick={(event) => console.log('Row clicked:', event)} />
+     * ```
+     */
+    onRowClick?: (event: GridRowClickEvent) => void;
+    /**
+     * Fires when the user double clicks a row.
+     *
+     * @example
+     * ```jsx
+     * <Grid onRowDoubleClick={(event) => console.log('Row double clicked:', event)} />
+     * ```
+     */
+    onRowDoubleClick?: (event: GridRowDoubleClickEvent) => void;
+    /**
+     * Fires when the user changes the values of the item.
+     *
+     * @example
+     * ```jsx
+     * <Grid onItemChange={(event) => console.log('Item changed:', event)} />
+     * ```
+     */
+    onItemChange?: (event: GridItemChangeEvent) => void;
+    /**
+     * The descriptor by which the in-edit mode of an item is defined.
+     *
+     * @example
+     * ```jsx
+     * <Grid edit={{ ['item-data-key-id']: true }} />
+     * ```
+     */
+    edit?: EditDescriptor;
+    /**
+     * The default `edit` state applied to the Grid when using uncontrolled mode.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultEdit={{ ['item-data-key-id']: true }} />
+     * ```
+     */
+    defaultEdit?: EditDescriptor;
+    /**
+     * The Grid editable settings.
+     *
+     * @example
+     * ```jsx
+     * <Grid editable={{ enabled: true, mode: 'inline' }} />
+     * ```
+     */
+    editable?: boolean | GridEditableSettings;
+    /**
+     * Fires when the user enters or exits an in-edit mode of a row or cell.
+     *
+     * @example
+     * ```jsx
+     * <Grid onEditChange={(event) => console.log('Edit changed:', event)} />
+     * ```
+     */
+    onEditChange?: (event: GridEditChangeEvent) => void;
+    /**
+     * Defines the scroll mode that is used by the Grid ([see example](https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes)).
+     *
+     *  The available options are:
+     *  - `none`&mdash;Renders no scrollbar.
+     *  - `scrollable`&mdash;This is the default scroll mode. It requires the setting of the `height` option.
+     *  - `virtual`&mdash;Displays no pager and renders a portion of the data (optimized rendering) while the user is scrolling the content.
+     *
+     * @example
+     * ```jsx
+     * <Grid scrollable="virtual" />
+     * ```
+     */
+    scrollable?: ScrollMode;
+    /**
+     * Defines the row height and forces an equal height to all rows ([see example](https://www.telerik.com/kendo-react-ui/components/grid/scroll-modes)).
+     *
+     * @example
+     * ```jsx
+     * <Grid rowHeight={50} />
+     * ```
+     */
+    rowHeight?: number;
+    /**
+     * Defines the detail row height and forces an equal height to all detail rows.
+     *
+     * @example
+     * ```jsx
+     * <Grid detailRowHeight={100} />
+     * ```
+     */
+    detailRowHeight?: number;
+    /**
+     * Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items ([see example](https://www.telerik.com/kendo-react-ui/components/grid/hierarchy)).
+     *
+     * @example
+     * ```jsx
+     * <Grid detail={()=>(<div>Detail Content</div>)} />
+     * ```
+     */
+    detail?: null | ComponentType<GridDetailRowProps>;
+    /**
+     * The descriptor by which the data is searched. Its first FilterDescriptor populates the GridSearchBox.
+     *
+     * @example
+     * ```jsx
+     * <Grid search={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'test' }] }} />
+     * ```
+     */
+    search?: CompositeFilterDescriptor;
+    /**
+     * The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultSearch={{ logic: 'or', filters: [{ field: 'category', operator: 'eq', value: 'electronics' }] }} />
+     * ```
+     */
+    defaultSearch?: CompositeFilterDescriptor;
+    /**
+     * Defines the fields of the data that are filtered by the GridSearchBox.
+     *
+     * @example
+     * ```jsx
+     * <Grid searchFields={['name', 'category']} />
+     * ```
+     */
+    searchFields?: (string | SearchField)[];
+    /**
+     * Fires when the search value of the GridSearchBox is changed.
+     *
+     * @example
+     * ```jsx
+     * <Grid onSearchChange={(event) => console.log('Search changed:', event)} />
+     * ```
+     */
+    onSearchChange?: (event: GridSearchChangeEvent) => void;
+    /**
+     * Represents the `style` HTML attribute.
+     *
+     * @example
+     * ```jsx
+     * <Grid style={{ backgroundColor: 'lightblue' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Fires when the data state of the Grid is changed ([more information](https://www.telerik.com/kendo-react-ui/components/grid/data-operations/local-operations) and [example](https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations)).
+     *
+     * @example
+     * ```jsx
+     * <Grid onDataStateChange={(event) => console.log('Data state changed:', event)} />
+     * ```
+     */
+    onDataStateChange?: (event: GridDataStateChangeEvent) => void;
+    /**
+     * If set to `true`, the user can resize columns by dragging the edges (resize handles) of their header cells ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/resizing)).
+     *
+     * @example
+     * ```jsx
+     * <Grid resizable={true} />
+     * ```
+     */
+    resizable?: boolean;
+    /**
+     * If set to `true`, the user can reorder columns by dragging their header cells ([see example](https://www.telerik.com/kendo-react-ui/components/grid/columns/reordering)).
+     *
+     * @example
+     * ```jsx
+     * <Grid reorderable={true} />
+     * ```
+     */
+    reorderable?: boolean;
+    /**
+     * Defines the row reorder settings.
+     *
+     * @example
+     * ```jsx
+     * <Grid rowReorderable={true} />
+     * ```
+     */
+    rowReorderable?: boolean | GridRowReorderSettings;
+    /**
+     * Determines if grouping by dragging and dropping the column headers is allowed ([more information and examples](https://www.telerik.com/kendo-react-ui/components/grid/grouping)).
+     *
+     * @example
+     * ```jsx
+     * <Grid groupable={true} />
+     * ```
+     */
+    groupable?: GridGroupableSettings | boolean;
+    /**
+     * Fires when a column is resized. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onColumnResize={(event) => console.log('Column resized:', event)} />
+     * ```
+     */
+    onColumnResize?: (event: GridColumnResizeEvent) => void;
+    /**
+     * Fires when the columns are reordered.
+     *
+     * @example
+     * ```jsx
+     * <Grid onColumnReorder={(event) => console.log('Column reordered:', event)} />
+     * ```
+     */
+    onColumnReorder?: (event: GridColumnReorderEvent) => void;
+    /**
+     * Fires when Grid is scrolled. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onScroll={(event) => console.log('Grid scrolled:', event)} />
+     * ```
+     */
+    onScroll?: (event: GridEvent) => void;
+    /**
+     * Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.
+     *
+     * @example
+     * ```jsx
+     * <Grid columnVirtualization={true} />
+     * ```
+     */
+    columnVirtualization?: boolean;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Grid.
+     * By default, navigation is disabled and the Grid content is accessible in the normal tab sequence.
+     *
+     * @example
+     * ```jsx
+     * <Grid navigatable={true} />
+     * ```
+     */
+    navigatable?: boolean | NavigatableSettings;
+    /**
+     * Fires when Grid keyboard navigation position is changed. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onNavigationAction={(event) => console.log('Navigation action:', event)} />
+     * ```
+     */
+    onNavigationAction?: (event: GridNavigationActionEvent) => void;
+    /**
+     * Fires when the user press keyboard key. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onKeyDown={(event) => console.log('Key pressed:', event)} />
+     * ```
+     */
+    onKeyDown?: (event: GridKeyDownEvent) => void;
+    /**
+     * Defines if the group descriptor columns are locked (frozen or sticky).
+     * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
+     * Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <Grid lockGroups={true} />
+     * ```
+     */
+    lockGroups?: boolean;
+    /**
+     * Configures the `size` of the Grid.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <Grid size="small" />
+     * ```
+     */
+    size?: 'small' | 'medium';
+    /**
+     * The event that is fired when the ContextMenu is activated. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onContextMenu={(event) => console.log('Context menu activated:', event)} />
+     * ```
+     */
+    onContextMenu?: (event: GridContextMenuEvent) => void;
+    /**
+     * The event that is fired when the ContextMenu item is clicked. Only fired when the Grid is run as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid onContextMenuItemClick={(event) => console.log('Context menu item clicked:', event)} />
+     * ```
+     */
+    onContextMenuItemClick?: (event: GridContextMenuItemClickEvent) => void;
+    /**
+     * Sets the `id` property of the top div element of the component.
+     *
+     * @example
+     * ```jsx
+     * <Grid id="custom-grid-id" />
+     * ```
+     */
+    id?: string;
+    /**
+     * @hidden
+     */
+    unstyled?: GridClassStructure;
+    /**
+     * Enables the built-in row span feature of the Grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid rowSpannable={true} />
+     * ```
+     */
+    rowSpannable?: boolean | GridRowSpannableSettings;
+    /**
+     * The collection of column states of the grid.
+     *
+     * @example
+     * ```jsx
+     * <Grid columnsState={[{ field: 'ProductName', locked: true }]} />
+     * ```
+     */
+    columnsState?: GridColumnState[];
+    /**
+     * The default columns state, used only for the initial load.
+     *
+     * @example
+     * ```jsx
+     * <Grid defaultColumnsState={[{ field: 'ProductName', locked: false }]} />
+     * ```
+     */
+    defaultColumnsState?: GridColumnState[];
+    /**
+     * Fires when the columns state of the Grid is changed.
+     *
+     * @example
+     * ```jsx
+     * <Grid onColumnsStateChange={(event) => console.log('Columns state changed:', event)} />
+     * ```
+     */
+    onColumnsStateChange?: (event: GridColumnsStateChangeEvent) => void;
+    /**
+     * Sets the locale of the Grid when used as a server component.
+     * Have not effect when the Grid is used as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid locale="en-US" />
+     * ```
+     */
+    locale?: string;
+    /**
+     * Sets the language of the Grid when used as a server component.
+     * Have not effect when the Grid is used as a client component.
+     *
+     * @example
+     * ```jsx
+     * <Grid language="en" />
+     * ```
+     */
+    language?: string;
+    /**
+     * Specifies the data layout mode for the Grid.
+     *
+     * - `"columns"`: Traditional column-based table layout (default).
+     * - `"stacked"`: Card-based layout where each row displays as a vertical
+     *   stack of field label/value pairs. Useful for responsive layouts
+     *   and mobile devices.
+     *
+     * The stacked mode is independent of `adaptiveMode` and can be used separately.
+     *
+     * > Note: Row/column spanning is not supported in stacked mode.
+     *
+     * @default "columns"
+     *
+     * @example
+     * ```tsx
+     * // Traditional column layout (default)
+     * <Grid dataLayoutMode="columns" data={data}>
+     *   <GridColumn field="name" title="Name" />
+     *   <GridColumn field="email" title="Email" />
+     * </Grid>
+     *
+     * // Stacked card layout
+     * <Grid dataLayoutMode="stacked" data={data}>
+     *   <GridColumn field="name" title="Name" />
+     *   <GridColumn field="email" title="Email" />
+     * </Grid>
+     * ```
+     */
+    dataLayoutMode?: GridDataLayoutMode;
+    /**
+     * Configuration for the stacked layout mode.
+     * Only applicable when `dataLayoutMode="stacked"`.
+     *
+     * The `cols` property defines how stacked cells are arranged:
+     * - As a number: Creates that many equal-width columns
+     * - As an array: The length defines column count, values define widths
+     *
+     * @example
+     * ```tsx
+     * // Two-column stacked layout with equal widths
+     * <Grid
+     *   dataLayoutMode="stacked"
+     *   stackedLayoutSettings={{ cols: 2 }}
+     *   data={data}
+     * >
+     *   <GridColumn field="name" title="Name" />
+     *   <GridColumn field="email" title="Email" />
+     * </Grid>
+     *
+     * // Three columns with custom widths using fr units
+     * <Grid
+     *   dataLayoutMode="stacked"
+     *   stackedLayoutSettings={{ cols: ['1fr', '2fr', '1fr'] }}
+     *   data={data}
+     * >
+     *   ...
+     * </Grid>
+     *
+     * // Custom widths with pixel and fraction units
+     * <Grid
+     *   dataLayoutMode="stacked"
+     *   stackedLayoutSettings={{ cols: [{ width: 200 }, { width: '1fr' }] }}
+     *   data={data}
+     * >
+     *   ...
+     * </Grid>
+     * ```
+     */
+    stackedLayoutSettings?: GridStackedLayoutSettings;
+}
+/**
+ * @hidden
+ */
+export interface GridComponentProps extends GridProps {
+    /**
+     * @hidden
+     */
+    localization?: LocalizationService;
+    /**
+     * @hidden
+     */
+    intl?: IntlService;
+    /**
+     * @hidden
+     */
+    scrollLeftRef?: {
+        current: number;
+    };
+    /**
+     * @hidden
+     */
+    widthRef?: {
+        current: number;
+    };
+    /**
+     * @hidden
+     */
+    containerHeightRef?: {
+        current: number;
+    };
+    /**
+     * @hidden
+     */
+    minRowHeightRef?: {
+        current: number;
+    };
+    /**
+     * @hidden
+     */
+    virtualSkipRef?: {
+        current: number;
+    };
+    /**
+     * @hidden
+     */
+    forceUpdate?: React.DispatchWithoutAction;
+    /**
+     * @hidden
+     */
+    isClient?: boolean;
+    /**
+     * @hidden
+     */
+    innerGrid?: any;
+}