DataGrid

Data grids are used to organize lists of high density data.

Props#

Column meta props#

These properties are supported by the meta property on ColumnDef.

property	description
href	Set to a string or function to render the cell value in an `a`
isNumeric	Set to true to right align the cell content
isTruncated	Enable or disabled truncated text in cells
headerProps	Props passed to header (Th) components
cellProps	Props passed to cell (Td) components
expanderProps	Props passed to the expander button

DataGrid props#

Accepts all Box properties.

Prop	Type	Default	Description
columns`required`	`ColumnDef<Data, any>[]`		The array of column defs to use for the table.
data`required`	`Data[]`		The data for the table to display. This array should match the type you provided to `table.setRowType<...>`. Columns can access this data via string/index or a functional accessor. When the `data` option changes reference, the table will reprocess the data.
_features	`TableFeature<any>[]`		An array of extra features that you can add to the table instance.
aggregationFns	`Record<string, AggregationFn<any>>`
autoResetAll	`boolean`		Set this option to override any of the `autoReset...` feature options.
autoResetExpanded	`boolean`		Enable this setting to automatically reset the expanded state of the table when expanding state changes.
autoResetPageIndex	`boolean`		If set to `true`, pagination will be reset to the first page when page-altering state changes eg. `data` is updated, filters change, grouping changes, etc.
children	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`		DataGrid children
className	`string`		The table class name attribute
columnResizeDirection	`"ltr" \| "rtl"`		Column resize direction
columnResizeEnabled	`boolean`	`false`	Enable column resizing
columnResizeMode	`"onChange" \| "onEnd"`		Column resize mode
columnVirtualizerOptions	`VirtualizerOptions< HTMLDivElement, HTMLTableRowElement > & { enabled?: boolean \| undefined }`		React Virtual options for the column virtualizer
debugAll	`boolean`		Set this option to `true` to output all debugging information to the console.
debugCells	`boolean`		Set this option to `true` to output cell debugging information to the console.
debugColumns	`boolean`		Set this option to `true` to output column debugging information to the console.
debugHeaders	`boolean`		Set this option to `true` to output header debugging information to the console.
debugRows	`boolean`		Set this option to `true` to output row debugging information to the console.
debugTable	`boolean`		Set this option to `true` to output table debugging information to the console.
defaultColumn	`Partial<ColumnDef<Data, unknown>>`		Default column options to use for all column defs supplied to the table.
emptyState	`FC<any>`		Empty state component, rendered when there is no data and no filters enabled.
enableColumnFilters	`boolean`		Enables/disables column filtering for all columns.
enableColumnPinning	`boolean`		Enables/disables column pinning for the table. Defaults to `true`.
enableColumnResizing	`boolean`		Enables or disables column resizing for the column.
enableExpanding	`boolean`		Enable/disable expanding for all rows.
enableFilters	`boolean`		Enables/disables all filtering for the table.
enableGlobalFilter	`boolean`		Enables/disables global filtering for all columns.
enableGrouping	`boolean`		Enables/disables grouping for the table.
enableHiding	`boolean`		Whether to enable column hiding. Defaults to `true`.
enableMultiRemove	`boolean`		Enables/disables the ability to remove multi-sorts
enableMultiRowSelection	`boolean \| ((row: Row<Data>) => boolean)`		- Enables/disables multiple row selection for all rows in the table OR - A function that given a row, returns whether to enable/disable multiple row selection for that row's children/grandchildren
enableMultiSort	`boolean`		Enables/Disables multi-sorting for the table.
enablePinning	`boolean`
enableRowPinning	`boolean \| ((row: Row<Data>) => boolean)`		Enables/disables row pinning for the table. Defaults to `true`.
enableRowSelection	`boolean \| ((row: Row<Data>) => boolean)`		- Enables/disables row selection for all rows in the table OR - A function that given a row, returns whether to enable/disable row selection for that row
enableSorting	`boolean`		Enables/Disables sorting for the table.
enableSortingRemoval	`boolean`		Enables/Disables the ability to remove sorting for the table. - If `true` then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'none' -> ... - If `false` then changing sort order will circle like: 'none' -> 'desc' -> 'asc' -> 'desc' -> 'asc' -> ...
enableSubRowSelection	`boolean \| ((row: Row<Data>) => boolean)`		Enables/disables automatic sub-row selection when a parent row is selected, or a function that enables/disables automatic sub-row selection for each row. (Use in combination with expanding or grouping features)
filterFns	`Record<string, FilterFn<any>>`
filterFromLeafRows	`boolean`		By default, filtering is done from parent rows down (so if a parent row is filtered out, all of its children will be filtered out as well). Setting this option to `true` will cause filtering to be done from leaf rows up (which means parent rows will be included so long as one of their child or grand-child rows is also included).
focusMode	`FocusMode`	`'list'`	Enable keyboard navigation
getColumnCanGlobalFilter	`(column: Column<Data, unknown>) => boolean`		If provided, this function will be called with the column and should return `true` or `false` to indicate whether this column should be used for global filtering. This is useful if the column can contain data that is not `string` or `number` (i.e. `undefined`).
getExpandedRowModel	`(table: Table<any>) => () => RowModel<any>`		This function is responsible for returning the expanded row model. If this function is not provided, the table will not expand rows. You can use the default exported `getExpandedRowModel` function to get the expanded row model or implement your own.
getFacetedMinMaxValues	`( table: Table<Data>, columnId: string, ) => () => [number, number] \| undefined`
getFacetedRowModel	`( table: Table<Data>, columnId: string, ) => () => RowModel<Data>`
getFacetedUniqueValues	`( table: Table<Data>, columnId: string, ) => () => Map<any, number>`
getFilteredRowModel	`(table: Table<any>) => () => RowModel<any>`		If provided, this function is called once per table and should return a new function which will calculate and return the row model for the table when it's filtered. - For server-side filtering, this function is unnecessary and can be ignored since the server should already return the filtered row model. - For client-side filtering, this function is required. A default implementation is provided via any table adapter's `{ getFilteredRowModel }` export.
getGroupedRowModel	`(table: Table<any>) => () => RowModel<any>`		Returns the row model after grouping has taken place, but no further.
getIsRowExpanded	`(row: Row<Data>) => boolean`		If provided, allows you to override the default behavior of determining whether a row is currently expanded.
getPaginationRowModel	`(table: Table<any>) => () => RowModel<any>`		Returns the row model after pagination has taken place, but no further. Pagination columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
getRowCanExpand	`(row: Row<Data>) => boolean`		If provided, allows you to override the default behavior of determining whether a row can be expanded.
getRowId	`( originalRow: Data, index: number, parent?: Row<Data> \| undefined, ) => string`		This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with `.` using their grandparents' index eg. `index.index.index`). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
getSortedRowModel	`(table: Table<any>) => () => RowModel<any>`		This function is used to retrieve the sorted row model. If using server-side sorting, this function is not required. To use client-side sorting, pass the exported `getSortedRowModel()` from your adapter to your table or implement your own.
getSubRows	`(originalRow: Data, index: number) => Data[] \| undefined`		This optional function is used to access the sub rows for any given row. If you are using nested rows, you will need to use this function to return the sub rows object (or undefined) from the row.
globalFilterFn	`FilterFnOption<Data>`		The filter function to use for global filtering. - A `string` referencing a built-in filter function - A `string` that references a custom filter functions provided via the `tableOptions.filterFns` option - A custom filter function
groupedColumnMode	`false \| "reorder" \| "remove"`		Grouping columns are automatically reordered by default to the start of the columns list. If you would rather remove them or leave them as-is, set the appropriate mode here.
icons	`DataGridIcons`		Custom icons This prop is memoized and will not update after initial render.
initialState	`InitialTableState`		Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. `options.autoResetPageIndex`) or via functions like `table.resetRowSelection()`. Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state. Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.
instanceRef	`type ONLY_FOR_FORMAT = \| ((instance: Table<Data> \| null) => void \| (() => VoidOrUndefinedOnly)) \| RefObject<Table<Data>>`		The React Table instance reference
isExpandable	`boolean`		Enable expandable rows
isHoverable	`boolean`		Enable row hover styles
isMultiSortEvent	`(e: unknown) => boolean`		Pass a custom function that will be used to determine if a multi-sort event should be triggered. It is passed the event from the sort toggle handler and should return `true` if the event should trigger a multi-sort.
isSelectable	`boolean`		Enable row selection
isSortable	`boolean`		Enable sorting on all columns
keepPinnedRows	`boolean`		When `false`, pinned rows will not be visible if they are filtered or paginated out of the table. When `true`, pinned rows will always be visible regardless of filtering or pagination. Defaults to `true`.
manualExpanding	`boolean`		Enables manual row expansion. If this is set to `true`, `getExpandedRowModel` will not be used to expand rows and you would be expected to perform the expansion in your own data model. This is useful if you are doing server-side expansion.
manualFiltering	`boolean`		Disables the `getFilteredRowModel` from being used to filter data. This may be useful if your table needs to dynamically support both client-side and server-side filtering.
manualGrouping	`boolean`		Enables manual grouping. If this option is set to `true`, the table will not automatically group rows using `getGroupedRowModel()` and instead will expect you to manually group the rows before passing them to the table. This is useful if you are doing server-side grouping and aggregation.
manualPagination	`boolean`		Enables manual pagination. If this option is set to `true`, the table will not automatically paginate rows using `getPaginationRowModel()` and instead will expect you to manually paginate the rows before passing them to the table. This is useful if you are doing server-side pagination and aggregation.
manualSorting	`boolean`		Enables manual sorting for the table. If this is `true`, you will be expected to sort your data before it is passed to the table. This is useful if you are doing server-side sorting.
maxLeafRowFilterDepth	`number`		By default, filtering is done for all rows (max depth of 100), no matter if they are root level parent rows or the child leaf rows of a parent row. Setting this option to `0` will cause filtering to only be applied to the root level parent rows, with all sub-rows remaining unfiltered. Similarly, setting this option to `1` will cause filtering to only be applied to child leaf rows 1 level deep, and so on. This is useful for situations where you want a row's entire child hierarchy to be visible regardless of the applied filter.
maxMultiSortColCount	`number`		Set a maximum number of columns that can be multi-sorted.
mergeOptions	`( defaultOptions: TableOptions<Data>, options: Partial<TableOptions<Data>>, ) => TableOptions<Data>`		This option is used to optionally implement the merging of table options.
meta	`TableMeta<Data>`		You can pass any object to `options.meta` and access it anywhere the `table` is available via `table.options.meta`.
noResults	`FC<any>`		No results component, rendered when filters are enabled and there are no results.
onColumnFiltersChange	`OnChangeFn<ColumnFiltersState>`		If provided, this function will be called with an `updaterFn` when `state.columnFilters` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
onColumnOrderChange	`OnChangeFn<ColumnOrderState>`		If provided, this function will be called with an `updaterFn` when `state.columnOrder` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
onColumnPinningChange	`OnChangeFn<ColumnPinningState>`		If provided, this function will be called with an `updaterFn` when `state.columnPinning` changes. This overrides the default internal state management, so you will also need to supply `state.columnPinning` from your own managed state.
onColumnSizingChange	`OnChangeFn<ColumnSizingState>`		If provided, this function will be called with an `updaterFn` when `state.columnSizing` changes. This overrides the default internal state management, so you will also need to supply `state.columnSizing` from your own managed state.
onColumnSizingInfoChange	`OnChangeFn<ColumnSizingInfoState>`		If provided, this function will be called with an `updaterFn` when `state.columnSizingInfo` changes. This overrides the default internal state management, so you will also need to supply `state.columnSizingInfo` from your own managed state.
onColumnVisibilityChange	`OnChangeFn<VisibilityState>`		If provided, this function will be called with an `updaterFn` when `state.columnVisibility` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
onExpandedChange	`OnChangeFn<ExpandedState>`		This function is called when the `expanded` table state changes. If a function is provided, you will be responsible for managing this state on your own. To pass the managed state back to the table, use the `tableOptions.state.expanded` option.
onFocusChange	`FocusChangeHandler<Data>`		Callback fired when a row or cell is focused.
onGlobalFilterChange	`OnChangeFn<any>`		If provided, this function will be called with an `updaterFn` when `state.globalFilter` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
onGroupingChange	`OnChangeFn<GroupingState>`		If this function is provided, it will be called when the grouping state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the `tableOptions.state.grouping` option.
onPaginationChange	`OnChangeFn<PaginationState>`		If this function is provided, it will be called when the pagination state changes and you will be expected to manage the state yourself. You can pass the managed state back to the table via the `tableOptions.state.pagination` option.
onResetFilters	`() => void`		Callback fired when clear filters is clicked.
onRowClick	`( row: Row<Data>, e: MouseEvent<Element, MouseEvent>, meta?: any, ) => void`		Callback fired when a row is clicked.
onRowPinningChange	`OnChangeFn<RowPinningState>`		If provided, this function will be called with an `updaterFn` when `state.rowPinning` changes. This overrides the default internal state management, so you will also need to supply `state.rowPinning` from your own managed state.
onRowSelectionChange	`OnChangeFn<RowSelectionState>`		If provided, this function will be called with an `updaterFn` when `state.rowSelection` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
onScroll	`UIEventHandler<HTMLDivElement>`		Callback fired when the grid is scrolled.
onSelectedRowsChange	`(rows: string[]) => void`		Triggers whenever the row selection changes.
onSortChange	`(columns: ColumnSort[]) => void`		Triggers when sort changed. Use incombination with `manualSortBy` to enable remote sorting.
onSortingChange	`OnChangeFn<SortingState>`		If provided, this function will be called with an `updaterFn` when `state.sorting` changes. This overrides the default internal state management, so you will need to persist the state change either fully or partially outside of the table.
onStateChange	`(updater: Updater<TableState>) => void`		The `onStateChange` option can be used to optionally listen to state changes within the table.
pageCount	`number`		Use this for controlled pagination.
paginateExpandedRows	`boolean`		If `true` expanded rows will be paginated along with the rest of the table (which means expanded rows may span multiple pages). If `false` expanded rows will not be considered for pagination (which means expanded rows will always render on their parents page. This also means more rows will be rendered than the set page size)
renderFallbackValue	`any`		Value used when the desired value is not found in the data.
rowCount	`number`		When manually controlling pagination, you can supply a total `rowCount` value to the table if you know it. The `pageCount` can be calculated from this value and the `pageSize`.
rowVirtualizerOptions	`VirtualizerOptions< HTMLDivElement, HTMLTableRowElement > & { enabled?: boolean \| undefined }`		React Virtual options for the row virtualizer
slotProps	`{ container?: BoxProps \| ((params: { table: Table<Data> }) => BoxProps) \| undefined; inner?: BoxProps \| ((params: { table: Table<Data>; }) => BoxProps) \| undefined; table?: TableProps \| ... 1 more ... \| undefined; header?: DataGridHeaderProps<...> \| ... 1 more ... \| undefined; row?: TableRowProps \| ... 1 more ... \|...`		Pass custom properties to child (slots) components.
sortDescFirst	`boolean`		If `true`, all sorts will default to descending as their first toggle state.
sortingFns	`Record<string, SortingFn<any>>`
state	`Partial<TableState>`		The `state` option can be used to optionally _control_ part or all of the table state. The state you pass here will merge with and overwrite the internal automatically-managed state to produce the final state for the table. You can also listen to state changes via the `onStateChange` option. > Note: Any state passed in here will override both the internal state and any other `initialState` you provide.
stickyHeader	`boolean`	`true`	Set to false to disable sticky headers
sx	`SystemStyleObject`		Grid styles
translations	`Partial<DataGridTranslations>`

DataGridPagination props#

Accepts Box properties.

Prop	Type	Description
children	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`	When children is provided, it will be rendered instead of the default pagination controls
onChange	`(props: { pageIndex: number pageSize: number }) => void`	Callback when page index or page size changes
variant	`ResponsiveValue<string>`	Variant is applied to buttons

Was this helpful?