GridProps

Represents the props of the KendoReact Grid component.

Name	Type	Default	Description
ariaLabel?	string		Deprecated. The accessible label of the Grid. Use (messages) instead.
autoProcessData?	boolean | { filter?: boolean; group?: boolean; page?: boolean; search?: boolean; sort?: boolean; }	false	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. jsx <Grid autoProcessData={{ filter: true, search: true, sort: true, group: true, page: true }} />
cellRender?	(defaultRendering: "null" | ReactElement<HTMLTableCellElement>, props: GridCellProps) => "null" | ReactElement<HTMLTableCellElement> | ReactElement<HTMLTableCellElement>[]		Fires when a cell is about to be rendered. Used to override the default appearance of the cell (see example).
cells?	GridCellsSettings		Defines a set of custom cell components that the Grid will render instead of the default cells. jsx import { GridCustomCellProps } from '@progress/kendo-react-grid'; const CustomCell = (props: GridCustomCellProps) => ( <td {...props.tdProps}> {props.dataItem[props.field]} </td> ); <Grid cells={{ data: CustomCell }} />
children?	React.ReactNode		Determines the children nodes.
className?	string		Sets a class for the Grid DOM element. jsx <Grid className="custom-grid-class" />
clipboard?	boolean | ClipboardSettings		Enables clipboard copy, cut, and paste manipulations. Accepts ClipboardSettings or a boolean value. jsx <Grid clipboard={true} />
columnMenu?	"null" | ComponentType<GridColumnMenuProps>		Specifies a React element that will be cloned and rendered inside the column menu of the Grid. jsx <Grid columnMenu={() => <div>Custom Column Menu</div>} />
columnMenuIcon?	SVGIcon		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) property.
columnsState?	GridColumnState[]		The collection of column states of the grid. jsx <Grid columnsState={[{ field: 'ProductName', locked: true }]} />
columnVirtualization?	boolean		Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered. jsx <Grid columnVirtualization={true} />
contextMenu?	boolean | GridContextMenuOptions | (options: GridCellBaseOptions) => boolean | GridContextMenuOptions		Specifies the context menu settings applied to the Grid. jsx <Grid contextMenu={true} />
data?	"null" | any[] | DataResult		Sets the data of the Grid (see example). 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 Accepts values of type null, any[], or DataResult. jsx <Grid data={data} />
dataItemKey?	string		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. jsx <Grid dataItemKey="id" />
defaultColumnsState?	GridColumnState[]		The default columns state, used only for the initial load. jsx <Grid defaultColumnsState={[{ field: 'ProductName', locked: false }]} />
defaultDetailExpand?	DetailExpandDescriptor		The default detailExpand state applied to the Grid when using uncontrolled mode. jsx <Grid defaultDetailExpand={{ ['item-data-key-id']: true }} />
defaultEdit?	EditDescriptor		The default edit state applied to the Grid when using uncontrolled mode. jsx <Grid defaultEdit={{ ['item-data-key-id']: true }} />
defaultFilter?	CompositeFilterDescriptor		The default filter state applied to the Grid when using uncontrolled mode. jsx <Grid defaultFilter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />
defaultGroup?	GroupDescriptor[]		The default group state applied to the Grid when using uncontrolled mode. jsx <Grid defaultGroup={[{ field: 'CategoryName' }]} />
defaultGroupExpand?	GroupExpandDescriptor[]		The default groupExpand state applied to the Grid when using uncontrolled mode. jsx <Grid defaultGroupExpand={[{ field: 'CategoryName', expanded: true }]} />
defaultSearch?	CompositeFilterDescriptor		The descriptor by which the data is searched by default. Its first FilterDescriptor populates the GridSearchBox. jsx <Grid defaultSearch={{ logic: 'or', filters: [{ field: 'category', operator: 'eq', value: 'electronics' }] }} />
defaultSelect?	SelectDescriptor		The default select state applied to the Grid when using uncontrolled mode. jsx <Grid defaultSelect={{ ['item-data-key-id']: true }} />
defaultSkip?	number		The default skip state applied to the Grid when using uncontrolled mode. jsx <Grid defaultSkip={10} />
defaultSort?	SortDescriptor[]		The default sort state applied to the Grid when using uncontrolled mode. (see example) jsx <Grid defaultSort={[{ field: 'name', dir: 'asc' }]} />
defaultTake?	number		The default take state applied to the Grid when using uncontrolled mode. jsx <Grid defaultTake={20} />
detail?	"null" | ComponentType<GridDetailRowProps>		Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items (see example). jsx <Grid detail={()=>(<div>Detail Content</div>)} />
detailExpand?	DetailExpandDescriptor		The descriptor by which the detail row is expanded. jsx <Grid detailExpand={{ ['item-data-key-id']: true }} />
detailRowHeight?	number		Defines the detail row height and forces an equal height to all detail rows. jsx <Grid detailRowHeight={100} />
edit?	EditDescriptor		The descriptor by which the in-edit mode of an item is defined. jsx <Grid edit={{ ['item-data-key-id']: true }} />
editable?	boolean | GridEditableSettings		The Grid editable settings. jsx <Grid editable={{ enabled: true, mode: 'inline' }} />
editField?	string		Specifies the name of the field which will provide a Boolean representation of the edit state of the current item (more information and examples). jsx <Grid editField="inEdit" />
expandField?	string		Specifies the name of the field which will provide a Boolean representation of the expanded state of the item. Specifies the name of the field which will provide a Boolean representation of the expanded state of the item (see example).
filter?	CompositeFilterDescriptor		The descriptor by which the data is filtered (more information and examples). This affects the values and buttons in the FilterRow of the Grid. jsx <Grid filter={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'John' }] }} />
filterable?	boolean		Enables filtering for the columns with their field option set. jsx <Grid filterable={true} />
filterCellRender?	(defaultRendering: "null" | ReactElement<any>, props: GridFilterCellProps) => "null" | ReactElement<any>		Fires when a filter cell is about to be rendered. Overrides the default appearance of the filter cell.
filterOperators?	GridFilterOperators		The filter operators for the Grid filters. jsx <Grid filterOperators={{ text: [{ text: 'grid.filterContainsOperator', operator: 'contains' }] }} />
fixedScroll?	boolean		Determines if the scroll position will be updated after a data change. If set to true, the scroll will remain in the same position.
group?	GroupDescriptor[]		The descriptors[] by which the data will be grouped (more information and examples). jsx <Grid group={[{ field: 'CategoryName' }]} />
groupable?	boolean | GridGroupableSettings		Determines if grouping by dragging and dropping the column headers is allowed (more information and examples). jsx <Grid groupable={true} />
groupExpand?	GroupExpandDescriptor[]		The descriptor by which the group is expanded. jsx <Grid groupExpand={[{ field: 'CategoryName', expanded: true }]} />
headerCellRender?	(defaultRendering: ReactNode, props: GridHeaderCellProps) => ReactNode		Fires when a header cell is about to be rendered. Overrides the default appearance of the header cell.
id?	string		Sets the id property of the top div element of the component. jsx <Grid id="custom-grid-id" />
language?	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. jsx <Grid language="en" />
loader?	React.ReactNode		A custom component that the Grid will render instead of the built-in loader. jsx <Grid loader={<div>Custom Loader...</div>} />
locale?	string		Sets the locale of the Grid when used as a server component. Have not effect when the Grid is used as a client component. jsx <Grid locale="en-US" />
lockGroups?	boolean		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. jsx <Grid lockGroups={true} />
navigatable?	boolean | NavigatableSettings		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. jsx <Grid navigatable={true} />
onClipboard?	(event: GridClipboardEvent) => void		Fires when clipboard support is enabled, and one of the actions (e.g., copy) is triggered. Accepts a GridClipboardEvent object. jsx <Grid clipboard={true} onClipboard={(event) => console.log('Clipboard action:', event.action)} />
onColumnReorder?	(event: GridColumnReorderEvent) => void		Fires when the columns are reordered. jsx <Grid onColumnReorder={(event) => console.log('Column reordered:', event)} />
onColumnResize?	(event: GridColumnResizeEvent) => void		Fires when a column is resized. Only fired when the Grid is run as a client component. jsx <Grid onColumnResize={(event) => console.log('Column resized:', event)} />
onColumnsStateChange?	(event: GridColumnsStateChangeEvent) => void		Fires when the columns state of the Grid is changed. jsx <Grid onColumnsStateChange={(event) => console.log('Columns state changed:', event)} />
onContextMenu?	(event: GridContextMenuEvent) => void		The event that is fired when the ContextMenu is activated. Only fired when the Grid is run as a client component. jsx <Grid onContextMenu={(event) => console.log('Context menu activated:', event)} />
onContextMenuItemClick?	(event: GridContextMenuItemClickEvent) => void		The event that is fired when the ContextMenu item is clicked. Only fired when the Grid is run as a client component. jsx <Grid onContextMenuItemClick={(event) => console.log('Context menu item clicked:', event)} />
onDataStateChange?	(event: GridDataStateChangeEvent) => void		Fires when the data state of the Grid is changed (more information and example). jsx <Grid onDataStateChange={(event) => console.log('Data state changed:', event)} />
onDetailExpandChange?	(event: GridDetailExpandChangeEvent) => void		Fires when the user expands or collapses a detail row. jsx <Grid onDetailExpandChange={(event) => console.log('Detail expand changed:', event)} />
onEditChange?	(event: GridEditChangeEvent) => void		Fires when the user enters or exits an in-edit mode of a row or cell. jsx <Grid onEditChange={(event) => console.log('Edit changed:', event)} />
onExpandChange?	(event: GridExpandChangeEvent) => void		Fires when the user tries to expand or collapse a row.
onFilterChange?	(event: GridFilterChangeEvent) => void		Fires when the Grid filter is modified through the UI. You must handle the event and filter the data. jsx <Grid filterable={true} onFilterChange={(event) => console.log('Filter changed:', event.filter)} />
onGroupChange?	(event: GridGroupChangeEvent) => void		Fires when the grouping of the Grid is changed. You have to handle the event yourself and group the data (more information and examples). jsx <Grid onGroupChange={(event) => console.log('Group changed:', event.group)} />
onGroupExpandChange?	(event: GridGroupExpandChangeEvent) => void		Fires when the user expands or collapses a group. jsx <Grid onGroupExpandChange={(event) => console.log('Group expand changed:', event)} />
onHeaderSelectionChange?	(event: GridHeaderSelectionChangeEvent) => void		Fires when the user clicks the checkbox of a column header whose field matches selectedField. jsx <Grid onHeaderSelectionChange={(event) => console.log('Header selection changed:', event)} />
onItemChange?	(event: GridItemChangeEvent) => void		Fires when the user changes the values of the item. jsx <Grid onItemChange={(event) => console.log('Item changed:', event)} />
onKeyDown?	(event: GridKeyDownEvent) => void		Fires when the user press keyboard key. Only fired when the Grid is run as a client component. jsx <Grid onKeyDown={(event) => console.log('Key pressed:', event)} />
onNavigationAction?	(event: GridNavigationActionEvent) => void		Fires when Grid keyboard navigation position is changed. Only fired when the Grid is run as a client component. jsx <Grid onNavigationAction={(event) => console.log('Navigation action:', event)} />
onPageChange?	(event: GridPageChangeEvent) => void		Fires when the page of the Grid is changed. jsx <Grid onPageChange={(event) => console.log('Page changed:', event.page)} />
onRowClick?	(event: GridRowClickEvent) => void		Fires when the user clicks a row. jsx <Grid onRowClick={(event) => console.log('Row clicked:', event)} />
onRowDoubleClick?	(event: GridRowDoubleClickEvent) => void		Fires when the user double clicks a row. jsx <Grid onRowDoubleClick={(event) => console.log('Row double clicked:', event)} />
onRowReorder?	(event: GridRowReorderEvent) => void		Fires when the user reorders a row. jsx <Grid onRowReorder={(event) => console.log('Row reordered:', event)} />
onScroll?	(event: GridEvent) => void		Fires when Grid is scrolled. Only fired when the Grid is run as a client component. jsx <Grid onScroll={(event) => console.log('Grid scrolled:', event)} />
onSearchChange?	(event: GridSearchChangeEvent) => void		Fires when the search value of the GridSearchBox is changed. jsx <Grid onSearchChange={(event) => console.log('Search changed:', event)} />
onSelectionChange?	(event: GridSelectionChangeEvent) => void		Fires when the user tries to select or deselect a row or cell. jsx <Grid onSelectionChange={(event) => console.log('Selection changed:', event)} />
onSortChange?	(event: GridSortChangeEvent) => void		Fires when the sorting of the Grid is changed. You must handle the event and sort the data. (see example) jsx <Grid sortable={true} onSortChange={(event) => console.log('Sort changed:', event.sort)} />
pageable?	boolean | GridPagerSettings		Configures the pager of the Grid. Accepts GridPagerSettings or a boolean value.(see example) 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. previousNext: Boolean—Toggles the Previous and Next buttons. navigatable: Boolean—Defines if the pager will be navigatable. jsx <Grid pageable={{ pageSizes: true }} />
pager?	"null" | ComponentType<PagerProps>		The pager component that the Grid will render instead of the built-in pager. It takes values of type null and ComponentType<PagerProps&gt jsx <Grid pager={() => <div>Custom Pager</div>} />
pageSize?	number		Defines the page size used by the Grid pager. Required for paging functionality. jsx <Grid pageSize={10} />
reorderable?	boolean		If set to true, the user can reorder columns by dragging their header cells (see example). jsx <Grid reorderable={true} />
resizable?	boolean		If set to true, the user can resize columns by dragging the edges (resize handles) of their header cells (see example). jsx <Grid resizable={true} />
rowHeight?	number		Defines the row height and forces an equal height to all rows (see example). jsx <Grid rowHeight={50} />
rowRender?	(row: ReactElement<HTMLTableRowElement>, props: GridRowProps) => ReactNode		Fires when a row is about to be rendered. Overrides the default appearance of the row.
rowReorderable?	boolean | GridRowReorderSettings		Defines the row reorder settings. jsx <Grid rowReorderable={true} />
rows?	GridRowsSettings		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 }} />
rowSpannable?	boolean | GridRowSpannableSettings		Enables the built-in row span feature of the Grid. jsx <Grid rowSpannable={true} />
scrollable?	ScrollMode		Defines the scroll mode that is used by the Grid (see example). 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. jsx <Grid scrollable="virtual" />
search?	CompositeFilterDescriptor		The descriptor by which the data is searched. Its first FilterDescriptor populates the GridSearchBox. jsx <Grid search={{ logic: 'and', filters: [{ field: 'name', operator: 'contains', value: 'test' }] }} />
searchFields?	string | SearchField[]		Defines the fields of the data that are filtered by the GridSearchBox. jsx <Grid searchFields={['name', 'category']} />
select?	SelectDescriptor		The descriptor 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. jsx <Grid select={{ ['item-data-key-id']: true }} />
selectable?	boolean | GridSelectableSettings		The Grid selectable settings. jsx <Grid selectable={{ enabled: true, mode: 'single' }} />
selectedField?	string		Specifies the name of the field which will provide a: Boolean representation of the selected state of the item (see example) for row selection String array of the selected columns of the item for cell selection
showLoader?	boolean		Specifies whether the loader of the Grid will be displayed. jsx <Grid showLoader={true} loader={<div>Loading...</div>} />
size?	"small" | "medium"	medium	Configures the size of the Grid. The available options are: small medium jsx <Grid size="small" />
skip?	number		Defines the number of records that will be skipped by the pager (see example). Required by the paging functionality. jsx <Grid skip={10} />
sort?	SortDescriptor[]		The (descriptors) by which the data is sorted. Applies the sorting styles and buttons to the affected columns. jsx <Grid sort={[{ field: 'name', dir: 'asc' }]} />
sortable?	SortSettings		Enables sorting for the columns with their field option set. (see example) jsx <Grid sortable={true} />
style?	React.CSSProperties		Represents the style HTML attribute. jsx <Grid style={{ backgroundColor: 'lightblue' }} />
take?	number		Alias for the pageSize property. If take is set, pageSize will be ignored. jsx <Grid take={20} />
total?	number		Defines the total number of data items in all pages. Required for paging functionality. jsx <Grid total={100} />