API
The Data Grid API provides the following props:
| Params | Required | Description |
|---|---|---|
data | true | The full set of data to display in the grid. |
columns | true | The list of defined columns using the column helper. |
pagination | false | The initial state of the grid for pagination settings. |
rowSize | false | The size of each row in pixels or one of the predefined sizes. |
toolbar | false | The component to render in the grid toolbar slot. |
overlays | false | Optional overlays to render within the viewport. |
footer | false | The component to render in the grid footer slot. |
theme | false | Custom style options to apply to the grid layout. |
Overlay Slots
The overlays prop expects an Object of the following optional properties in the table below. Each property expects a ReactNode value:
| Name | Description |
|---|---|
noContent | Displays when there are no rows present in the data or if the data has filtered out all rows to an empty state. |
pending | Displays when the data grid is still loading. |
initial | Displays when the data grid has finished the initial pending phase. |
Slot Attributes
Each slot layer is assigned a unique data-part attribute for styling and targeting
specific slot layers.
| Name | Value | Description |
|---|---|---|
data-scope | data-grid | The scope of the components. |
data-part | toolbar | The container of the toolbar slot. |
data-part | root | The container Data Grid family. |
data-part | viewport | The container of the viewport slot. |
data-part | head-cell | The container of the head cell slot. |
data-part | row | The container of the row slot. |
data-part | row-cell | The container of the row cell slot. |
data-part | footer | The container of the footer slot. |
Note
Any other slot part displayed in the Grid is inherited from the Cerberus React component API for that item.
Pagination Options
The pagination prop allows you to configure the pagination options for the grid.
| Name | Type | SSR | Description |
|---|---|---|---|
defaultPage | number | No | The page cound to start on. |
pageSize | number | No | The number of rows to display per page. |
customRange | number[] | No | The custom range of pages to display. |
count | number | Yes | The total number of pages. This will eject from client-side pagination handing off all pagination logic to the server. |
onPageChange | PaginationRootProps['onPageChange'] | Yes | A callback that is invoked when the page index changes. |
onPageSizeChange | PaginationRootProps['onPageSizeChange'] | Yes | A callback that is invoked when the page size changes. |
onSortChange | GridStore<unknown>['setSort'] | Yes | A callback that is invoked when the sort changes. |
onFilterChange | (filters: ColumnFilterState) => void | Yes | A callback that is invoked when the filter changes. |