DataGrid
/datagridDataGridPropsPreview
Props
37| Prop | Type | Default |
|---|---|---|
activeFilters | readonly DataGridFilterChip[] | [] |
bulkActions | readonly DataGridBulkAction[] | [] |
caption | string | — |
captionVisible | boolean | false |
className | string | — |
columns required | readonly ColumnDef<T>[] | — |
data required | readonly T[] | — |
defaultHiddenColumns | readonly string[] | [] |
defaultSelected | readonly string[] | [] |
defaultSorting | SortingState | [] |
empty | ReactNode | — |
exportCsv | boolean | DataGridExport | false |
filterPanel | ReactNode | — |
getRowId | ((row: T, index: number) => string) | — |
hiddenColumns | readonly string[] | — |
labels | Partial<DataGridLabels> | — |
loading | boolean | false |
maxHeight | number | 520 |
onClearFilters | (() => void) | — |
onHiddenColumnsChange | ((ids: string[]) => void) | — |
onRowClick | ((row: T) => void) | — |
onSearchChange | ((query: string) => void) | — |
onSelectedChange | ((keys: string[]) => void) | — |
onSortingChange | ((sorting: SortingState) => void) | — |
pageSize | number | 25 |
resizable | boolean | false |
rowHeight | number | 44 |
search | string | — |
searchPlaceholder | string | — |
selectable | boolean | false |
selected | readonly string[] | — |
sorting | SortingState | — |
toolbarSection | ReactNode | — |
virtualizeFrom | number | 50 |
withColumnMenu | boolean | false |
withPagination | boolean | true |
withToolbar | boolean | false |
Slot props
21Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
bulkBarProps The bulk-actions bar. Only with a selection and with `bulkActions`. | BoxSlotProps | — |
bulkCountProps The selected count in that bar. It carries `aria-live`, so it is announced when it changes. | TextSlotProps | — |
captionProps The table label when `captionVisible` is false: it lands on the `span` inside the `caption`. With `captionVisible` the label renders directly and there is no node to adjust. | BoxSlotProps | — |
chipsProps The active-filters row. Only when there are any. | BoxSlotProps | — |
columnMenuProps The column menu trigger. Only with `withColumnMenu` and when the menu has entries. | ActionIconProps | — |
emptyProps The empty table cell. It covers both the loading state and the no-data one. | BoxSlotProps | — |
footProps The footer with the pagination. | BoxSlotProps | — |
headCellProps The row inside the `th`, with the label, the menu and the resize handle. | BoxSlotProps | — |
headProps The table header. | BoxSlotProps | — |
panelProps The filter panel. Only rendered with `filterPanel`. | BoxSlotProps | — |
resizerProps The handle that changes the width. Only on resizable columns; it carries `data-resizing`. | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | — |
rowProps Every data row. It spreads over all of them; the selected one carries `data-selected`. | Omit<DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> | — |
scrollerProps The scrolling area. Its height comes from `maxHeight`; the slot composes with it. | BoxSlotProps | — |
sortButtonProps The sort button. Only on sortable columns. | Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> | — |
sortIconProps The sort arrow of that button, which says ascending, descending or unsorted. | BoxSlotProps | — |
tableProps The table. It carries `aria-busy` while loading, plus the grid keyboard handler. | Omit<DetailedHTMLProps<TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> | — |
tdProps Every data cell. Its height comes from `rowHeight`. | Omit<DetailedHTMLProps<TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> | — |
thProps Every header cell. It spreads over ALL of them. | Omit<DetailedHTMLProps<ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> | — |
toolbarActionsProps The row where `toolbarSection` and the export and restore-columns buttons land. It shares a class with the pagination row in the footer, but the slot only lands on the toolbar one. | BoxSlotProps | — |
toolbarProps The whole toolbar. | BoxSlotProps | — |
toolbarSearchProps The search slot. Only with `onSearchChange`. | BoxSlotProps | — |
Also accepts
On top of its own props, this component forwards these groups.