The Grid is a root container component designed to process and display data specified via the rows property. You can use the columns property to configure columns.
The Grid's functionality (data visualization and data processing) is implemented in several plugins specified as child components.
The Grid is a PluginHost and can contain only other plugins and plugin primitives.
Use the following statement to import a plugin with embedded theme components:
import { Grid } from '@devexpress/dx-react-grid-material-ui';
// import { Grid } from '@devexpress/dx-react-grid-bootstrap4';
// import { Grid } from '@devexpress/dx-react-grid-bootstrap3';If you want to use custom components, you can import the themeless plugin:
import { Grid } from '@devexpress/dx-react-grid';| Name | Type | Default | Description |
|---|---|---|---|
| rows | ReadonlyArray<any> | An array containing custom data. A user defines the access to this data. Refer to Data Accessors for details. | |
| columns | ReadonlyArray<Column> | Specifies for which row fields columns are created. | |
| getRowId? | (row: any) => number | string | Specifies the function used to get a unique row identifier. Define this function if the identifier is different than the row index. | |
| getCellValue? | (row: any, columnName: string) => any | Specifies the function used to get a cell's value. | |
| rootComponent | ComponentType<Grid.RootProps> | A component that renders the grid root layout. | |
| children? | ReactNode | A React node used to render the grid content. |
Defines the column configuration object. Used to display data stored in a row.
| Field | Type | Description |
|---|---|---|
| name | string | Specifies the column name or the name of a row field whose value the column displays. If the column name does not match any field name, specify the getCellValue function. |
| title? | string | Specifies the column title. |
| getCellValue? | (row: any, columnName: string) => any | Specifies the function used to get the column value for a given row. |
Describes properties passed to a component that renders the grid root layout.
| Field | Type | Description |
|---|---|---|
| children? | ReactNode | A React node to be placed in the root layout. |
| Name | Properties | Description |
|---|---|---|
| Grid.Root | Grid.RootProps | A component that renders the grid root layout. |
Additional properties are added to the component's root element.
| Name | Plugin | Type | Description |
|---|---|---|---|
| rows | Getter | Array<any> | Grid rows. |
| getRowId | Getter | (row: any) => number | string | A function used to get a unique row identifier. |
| columns | Getter | Array<Column> | Grid columns. |
| getCellValue | Getter | (row: any, columnName: string) => any | A function used to get a given row's column value. |
| root | Template | object? | A template that renders the grid root layout. |
| header | Template | object? | A template that renders the grid header. |
| body | Template | object? | A template that renders the grid body. |
| footer | Template | object? | A template that renders the grid footer. |