@progress/kendo-react-grid

import { ComponentType } from 'react'; import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query'; import { GridGroupableSettings } from './GridGroupableSettings'; import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridEvent } from './events'; import { ScrollMode } from '../ScrollMode'; import { GridCellProps } from './GridCellProps'; import { GridFilterCellProps } from './GridFilterCellProps'; import { GridSortSettings } from './GridSortSettings'; import { GridPagerSettings } from '../paging/GridPagerSettings'; import { GridRowProps } from '../interfaces/GridRowProps'; import { GridHeaderCellProps } from '../interfaces/GridHeaderCellProps'; import { GridDetailRowProps } from '../interfaces/GridDetailRowProps'; import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps'; /** * Represents the props of the [KendoReact Grid component]({% slug overview_grid %}). */ export interface GridProps { /** * Sets the data of the Grid ([see example]({% slug paging_grid %})). If you use paging, the `data` option has to contain only the items for the current page. */ data?: any[] | DataResult | null; /** * Enables the sorting for the columns with their `field` option set ([see example]({% slug sorting_grid %})). */ sortable?: GridSortSettings; /** * Fires when the sorting of the Grid is changed ([see example]({% slug sorting_grid %})). You have to handle the event yourself and sort the data. */ onSortChange?: (event: GridSortChangeEvent) => void; /** * The descriptors by which the data is sorted. Applies the sorting styles and buttons to the affected columns. */ sort?: SortDescriptor[]; /** * Enables the filtering of the columns with their `field` option set ([more information and examples]({% slug filtering_grid %})). */ filterable?: boolean; /** * The descriptor by which the data is filtered ([more information and examples]({% slug filtering_grid %})). This affects the values and buttons in the `FilterRow` of the Grid. */ filter?: CompositeFilterDescriptor; /** * Fires when the Grid filter is modified through the UI ([more information and examples]({% slug filtering_grid %})). You have to handle the event yourself and filter the data. */ onFilterChange?: (event: GridFilterChangeEvent) => void; /** * Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level. */ columnMenu?: null | ComponentType<GridColumnMenuProps>; /** * The descriptors by which the data will be grouped * ([more information and examples]({% slug groupingbasics_grid %})). */ group?: 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]({% slug groupingbasics_grid %})). */ onGroupChange?: (event: GridGroupChangeEvent) => void; /** * Configures the pager of the Grid ([see example]({% slug paging_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. */ pageable?: GridPagerSettings | boolean; /** * Defines the page size that is used by the Grid pager ([see example]({% slug paging_grid %})). Required by the paging functionality. */ pageSize?: number; /** * Alias of `pageSize` property. If `take` is set, `pageSize` will be ignored. */ take?: number; /** * Fires when the page of the Grid is changed ([see example]({% slug paging_grid %})). You have to handle the event yourself and page the data. */ onPageChange?: (event: GridPageChangeEvent) => void; /** * Defines the total number of data items in all pages ([see example]({% slug paging_grid %})). Required by the paging functionality. */ total?: number; /** * Defines the number of records that will be skipped by the pager ([see example]({% slug paging_grid %})). Required by the paging functionality. */ skip?: number; /** * Fires when the user tries to expand or collapse a row. */ onExpandChange?: (event: GridExpandChangeEvent) => void; /** * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item ([see example]({% slug detailrow_grid %})). */ expandField?: string; /** * Specifies the name of the field which will provide a Boolean representation of the selected state of the item ([see example]({% slug selection_grid %})). */ selectedField?: string; /** * Fires when the user tries to select or deselect a row ([more information and example]({% slug selection_grid %})). */ onSelectionChange?: (event: GridSelectionChangeEvent) => void; /** * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField` ([more information and example]({% slug selection_grid %})). */ onHeaderSelectionChange?: (event: GridHeaderSelectionChangeEvent) => void; /** * Fires when the user clicks a row. */ onRowClick?: (event: GridRowClickEvent) => 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]({% slug editing_inline_grid %})). */ onItemChange?: (event: GridItemChangeEvent) => void; /** * Specifies the name of the field which will provide a Boolean representation of the edit state of the current item ([more information and examples]({% slug editing_inline_grid %})). */ editField?: string; /** * Defines the scroll mode that is used by the Grid ([see example]({% slug scrollmmodes_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. */ scrollable?: ScrollMode; /** * Defines the row height and forces an equal height to all rows ([see example]({% slug scrollmmodes_grid %})). */ rowHeight?: number; /** * Specifies a React element that will be cloned and rendered inside the detail rows of the currently expanded items ([see example]({% slug hierarchy_grid %})). An item will be rendered as expanded if the value of its `expandField` is `true`. */ detail?: null | ComponentType<GridDetailRowProps>; /** * Represents the `style` HTML attribute. */ style?: React.CSSProperties; /** * Fires when the data state of the Grid is changed ([more information]({% slug localoperations_grid %}) and [example]({% slug odataserveroperations_grid %})). */ 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]({% slug resizing_columns_grid %})). */ resizable?: boolean; /** * If set to `true`, the user can reorder columns by dragging their header cells ([see example]({% slug reordering_columns_grid %})). */ reorderable?: boolean; /** * Determines if grouping by dragging and dropping the column headers is allowed ([more information and examples]({% slug groupingbasics_grid %})). */ groupable?: GridGroupableSettings | boolean; /** * Fires when a column is resized. */ onColumnResize?: (event: GridColumnResizeEvent) => void; /** * Fires when the columns are reordered. */ onColumnReorder?: (event: GridColumnReorderEvent) => void; /** * Fires when a row is about to be rendered. Overrides the default appearance of the row. */ rowRender?: (row: React.ReactElement<HTMLTableRowElement>, props: GridRowProps) => React.ReactNode; /** * Fires when a cell is about to be rendered. Used to override the default appearance of the cell ([see example]({% slug groupingaggregates_grid %})). */ cellRender?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GridCellProps) => React.ReactElement<HTMLTableCellElement> | null; /** * Fires when a filter cell is about to be rendered. Overrides the default appearance of the filter cell. */ filterCellRender?: (defaultRendering: React.ReactElement<any> | null, props: GridFilterCellProps) => React.ReactElement<any> | null; /** * Fires when a filter cell is about to be rendered. Overrides the default appearance of the filter cell. */ headerCellRender?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode; /** * Fires when Grid is scrolled. */ onScroll?: (event: GridEvent) => void; /** * Enables virtualization of the columns. If virtualization is enabled, the columns outside the view are not rendered. */ columnVirtualization?: boolean; }