All Components

GridProps

Represents the props of the Kendo UI Grid for React.

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

Fires when cell is about to be rendered, use this to override the default appearance of the cell

columnReorder? (event: GridColumnReorderEvent) => void

Fires when columns are reordered

columnResize? (event: GridColumnResizeEvent) => void

Fires when a column is resized

data any[] | null

Sets the data of the Grid.
If you use paging, the data option
has to contain only the items for the current page.

dataStateChange? (event: GridDataStateChangeEvent) => void

Fires when the data state of the Grid is changed.

detail? any

Specifies a React element that will be cloned and rendered inside the detail rows
of the currently expanded items.
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.

expandChange? (event: GridExpandChangeEvent) => void

Fires when the user tries to expand or collapse a row.

expandField? string

Specifies the name of the field which will provide a Boolean representation
of the expanded state of the item.

filter? CompositeFilterDescriptor

The descriptor by which the data is filtered.
This affects the values and buttons in the FilterRow of the Grid.

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

Fires when filter cell is about to be rendered, use this to override the default appearance of the filter cell

filterChange? (event: GridFilterChangeEvent) => void

Fires when the Grid filter is modified through the UI.
You have to handle the event yourself and filter the data.

filterable? boolean

Enables the filtering of the columns with their field option set.

headerSelectionChange? (event: GridHeaderSelectionChangeEvent) => void

Fires when the user clicks the checkbox of a column header whose field matches selectedField.

itemChange? (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.

pageChange? (event: GridPageChangeEvent) => void

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

pageSize? number

Defines the page size that is used by the Grid pager.
Required by the paging functionality.

pageable? GridPagerSettings | boolean

Configures the pager of the Grid.

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.

resizable? boolean

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

rowClick? (event: GridRowClickEvent) => void

Fires when the user clicks a row.

rowHeight? number

Defines the row height and forces an equal height to all rows.

rowRender? (row: ReactElement, dataItem: any) => React.ReactNode

Fires when row is about to be rendered, use this to override the default appearance of the row

scrollable? ScrollMode

Defines the scroll mode that is used by the Grid.

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.

selectionChange? (event: GridSelectionChangeEvent) => void

Fires when the user tries to select or deselect a row.

skip? number

Defines the number of records that will be skipped by the pager.
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.

sortChange? (event: GridSortChangeEvent) => void

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

sortable? GridSortSettings

Enables the sorting for the columns with their field option set.

style? CSSProperties

Represents the style HTML attribute.

total? number

Defines the total number of data items in all pages.
Required by the paging functionality.

In this article