text: GridProps
  Represents the props of the KendoReact Grid component.
  cellRender? (defaultRendering: ReactElement<HTMLTableCellElement> | null, props: GridCellProps) => ReactElement<HTMLTableCellElement> | null
  Fires when a cell is about to be rendered. Used to override the default appearance of the cell (see example).
  className? string
  Sets a class of the Grid DOM element.
  columnMenu? null | ComponentType<GridColumnMenuProps>
  Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level.
  columnVirtualization? boolean
  Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered.
  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).
  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). This affects the values and buttons in the
  FilterRow of the Grid.
  filterCellRender? (defaultRendering: ReactElement<any> | null, props: GridFilterCellProps) => ReactElement<any> | null
  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.
  const customFilterOperators = { 'text': [ { text: 'grid.filterContainsOperator', operator: 'contains' } ], 'numeric': [ { text: 'grid.filterGtOperator', operator: 'gt' } ], 'date': [ { text: 'grid.filterAfterOperator', operator: 'gt' } ] } class App extends React.Component { constructor(props) { super(props); this.state = { data: [ { 'foo': 'A1', 'bar': 'B1' }, { 'foo': 'A2', 'bar': 'B2' }, { 'foo': 'A3', 'bar': 'B2' } ] }; } render() { return ( <div> <Grid data={this.state.data} reorderable={true} filterable filterOperators={customFilterOperators} > <GridColumn field="foo" /> <GridColumn field="bar" /> </Grid> </div> ); } } ReactDOM.render(<App />, document.querySelector('my-app'));
  filterable? boolean
  Enables the filtering of the columns with their
  field option set (more information and examples).
  group? GroupDescriptor[]
  The descriptors by which the data will be grouped (more information and examples).
  groupable? GridGroupableSettings | boolean
  Determines if grouping by dragging and dropping the column headers is allowed (more information and examples).
  headerCellRender? (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode
  Fires when a header cell is about to be rendered. Overrides the default appearance of the header 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).
  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).
  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.
  onRowDoubleClick? (event: GridRowDoubleClickEvent) => void
  Fires when the user double clicks a row.
  onScroll? (event: GridEvent) => void
  Fires when Grid is scrolled.
  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: Booleanor
  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<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode
  Fires when a row is about to be rendered. Overrides 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
  heightoption.
  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.