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. |
initialState | 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.