Data grid schema & columns
Schemas
Schemas are data types you pass to grid columns to affect how the columns and expansion popovers render. Schemas also allow you to define individual sorting comparators so that sorts can do more than just A-Z comparisons. By default, EuiDataGrid ships with a few built-in schemas for
numeric, currency, datetime, boolean and json data. When the inMemory prop is in use it will automatically try to figure out the best schema based on the inMemory:{{ level: value }} you set, but this will come with the caveat that you will need to provide and manage sorting outside the component. In general we recommend passing schema information to your columns instead of using auto-detection when you have that knowledge of your data available during ingestion.Defining custom schemas
Custom schemas are passed as an array to schemaDetectors and are constructed against the EuiDataGridSchemaDetector interface. You can see an example of a simple custom schema used on the last column below. In addition to schemas being useful to map against for cell and expansion rendering, any schema will also add aclassName="euiDataGridRowCell--schemaName" to each matching cell.
Column widths
By default, visible columns are given equal widths to fill up available space in the grid and can be resized by the user to any desired width. There are two parameters on EuiDataGridColumn to change this default behavior. initialWidth is a numeric value providing the starting width of a column, in pixels. Second, the isResizable value can be set to false to remove the user's ability to resize column.
Below, the first column is given an initial width and is not resizable. The second column is also given an initial width but its width can still be changed.
Column actions
By default, columns provide actions for sorting, moving and hiding. These can be extended with custom actions. You can customize the actions by setting the actions value of EuiDataGridColumn. Setting it to false removes the action menu displayed. You can configure it by passing an object of type EuiDataGridColumnAction. This allows you a hide, configure the existing actions and add new ones.
Below, the first column provides no action, the second doesn't provide the ability to hide the columns, the 3rd provides an additional action, the 4th overwrites the hide action with a custom label and icon.
Control columns
Control columns can be used to include ancillary cells not based on the dataset, such as row selection checkboxes or action buttons. These columns can be placed at either side of the data grid, and users are unable to resize, sort, or rearrange them.
These custom columns are defined by passing an array of EuiDataGridControlColumn objects (see Props tab below) to leadingControlColumns and/or trailingControlColumns.
As with the data grid's renderCellValue, the control columns' headerCellRender and rowCellRender props are treated as React components.
Footer row
A footer row can be used to include value aggregations to the grid. Values could be based on the dataset, such as sum/average/min/max of numeric values in a column, or any other necessary data.
The footer row is defined by passing renderFooterCellValue function prop into EuiDataGrid. This function acts like a React component, receiving EuiDataGridCellValueElementProps and returning a React node.
When rendering footer cell values, we encourage turning off cell expansion on cells without content with setCellProps({ isExpandable: false }).
Control columns will render empty footer cells by default, unless a custom footerCellRender function is passed.