@progress/kendo-react-grid

/** * @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 { CSVExportOptions } from '@progress/kendo-csv'; 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 CSV export options for the Grid component. * Extends CSVExportOptions from @progress/kendo-csv with all properties optional. * * @example * ```tsx * <Grid csv={{ * fileName: 'export.csv', * preventFormulaInjection: true, * keys: ['ProductID', 'ProductName'], * names: ['ID', 'Name'] * }} /> * ``` */ export interface GridCSVExportOptions extends Omit<Partial<CSVExportOptions>, 'data'> { /** * Specifies the name of the exported CSV file. * * @default "grid-export.csv" * * @example * ```tsx * <Grid csv={{ fileName: 'my-data.csv' }} /> * ``` */ fileName?: string; /** * Optional data to export to CSV instead of using the Grid's data prop. * Useful when you want to export different data than what's displayed in the Grid. * * @example * ```tsx * <Grid csv={{ data: customExportData, fileName: 'export.csv' }} /> * ``` */ data?: any[] | DataResult | null; /** * Specifies whether to export all pages or only the current page when paging is enabled. * When `true`, exports all data ignoring pagination. * When `false`, exports only the current page of data. * * @default true * * @example * ```tsx * // Export only the current page * <Grid csv={{ allPages: false }} /> * * // Export all pages (default behavior) * <Grid csv={{ allPages: true }} /> * ``` */ allPages?: boolean; } /** * 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`—Sets the maximum numeric buttons count before the buttons are collapsed. * - `info: Boolean`—Toggles the information about the current page and the total number of records. * - `type: PagerType`—Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values. * - `pageSizes: Boolean` or `Array<number>`—Shows a menu for selecting the page size. * - `pageSizeValue: String or Number`—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`—Toggles the **Previous** and **Next** buttons. * - `navigatable: Boolean`—Defines if the pager will be navigatable. * - `responsive: Boolean`—Defines if the pager will be responsive. If true, hides the tools that do not fit to the available space. * - `adaptive: Boolean`—Providing different rendering of the page sizes select element based on the screen dimensions. * - `adaptiveTitle: String`—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<[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>; /** * Enables CSV export functionality when set to `true` or provides CSV export configuration options. * * @example * ```jsx * <Grid csv={true} /> * ``` * * @example * ```jsx * <Grid csv={{ delimiter: ';', includeUTF8BOM: true, preventFormulaInjection: true }} /> * ``` */ csv?: boolean | GridCSVExportOptions; /** * Fires when the user clicks the CSV export button. * Allows custom data transformation before export. * * @example * ```jsx * <Grid onCsvExport={(data) => { * return data.filter(item => item.active); * }} /> * ``` */ onCsvExport?: (data: any[]) => any[]; /** * 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`—Renders no scrollbar. * - `scrollable`—This is the default scroll mode. It requires the setting of the `height` option. * - `virtual`—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; }