All Components
Components

Components / React / Grid / API

This website hosts native Kendo UI components built from the ground up with the ultimate performance in mind and intended to be used in the React ecosystem.

GridProps

Represents the props of the Kendo UI Grid component for React.

cellRender? (defaultRendering: ReactElement | null, props: GridCellProps) => ReactElement | null

Fires when a cell is about to be rendered. Used to override the default appearance of the cell
(see example).

data? any[] | DataResult | null

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.

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.
An item will be rendered as expanded if the value of its expandField is true.

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 in the documentation on editing).

expandField? string

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 in the documentation on filtering).
This affects the values and buttons in the FilterRow of the Grid.

filterCellRender? (defaultRendering: ReactElement | null, props: GridFilterCellProps) => ReactElement | null

Fires when a filter cell is about to be rendered. Used to override the default appearance of the filter cell.

filterable? boolean

Enables the filtering of the columns with their field option set
(more information and examples in the documentation on filtering).

group? GroupDescriptor[]

The descriptors by which the data will be grouped
(more information and examples in the documentation on grouping).

groupable? GridGroupableSettings | boolean

Determines if grouping by dragging and dropping the column headers is allowed
(more information and examples in the documentation on grouping).

headerCellRender? (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode

Fires when a filter cell is about to be rendered. Used to override the default appearance of the filter cell.

onColumnReorder? (event: GridColumnReorderEvent) => void

Fires when the columns are reordered.

onColumnResize? (event: GridColumnResizeEvent) => void

Fires when a column is resized

onDataStateChange? (event: GridDataStateChangeEvent) => void

Fires when the data state of the Grid is changed
(more information and example).

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
(more information and examples).
You have to handle the event yourself and filter the data.

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 in the documentation on grouping).

onHeaderSelectionChange? (event: GridHeaderSelectionChangeEvent) => void

Fires when the user clicks the checkbox of a column header whose field matches selectedField.
(more information and example).

onItemChange? (event: GridItemChangeEvent) => void

Fires when the user changes the values of the item.
The event is not debounced and fires on every onChange event of the input in the current EditCell.
(more information and examples in the documentation on editing).

onPageChange? (event: GridPageChangeEvent) => void

Fires when the page of the Grid is changed (see example).
You have to handle the event yourself and page the data.

onRowClick? (event: GridRowClickEvent) => void

Fires when the user clicks a row.

onSelectionChange? (event: GridSelectionChangeEvent) => void

Fires when the user tries to select or deselect a row
(more information and example).

onSortChange? (event: GridSortChangeEvent) => void

Fires when the sorting of the Grid is changed (see example).
You have to handle the event yourself and sort the data.

pageSize? number

Defines the page size that is used by the Grid pager
(see example). Required by the paging functionality.

pageable? GridPagerSettings | boolean

Configures the pager of the Grid (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.

reorderable? boolean

If set to true, the user can reorder columns by dragging their
header cells (see example.

resizable? boolean

If set to true, the user can resize columns by dragging the edges (resize handles) of their
header cells (see example.

rowHeight? number

Defines the row height and forces an equal height to all rows
(see example).

rowRender? (row: ReactElement, props: GridRowProps) => React.ReactNode

Fires when a row is about to be rendered. Used to override the default appearance of the row.

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.

selectedField? string

Specifies the name of the field which will provide a Boolean representation
of the selected state of the item (see example).

skip? number

Defines the number of records that will be skipped by the pager
(see example). Required by the paging functionality.

sort? SortDescriptor[]

The descriptors by which the data is sorted.
Applies the sorting styles and buttons to the affected columns.

sortable? GridSortSettings

Enables the sorting for the columns with their field option set
(see example).

style? CSSProperties

Represents the style HTML attribute.

take? number

Alias of pageSize property. If take is set, pageSize will be ignored.

total? number

Defines the total number of data items in all pages
(see example). Required by the paging functionality.

In this article