Data grid schemas and popovers

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.

Defining expansiom

Likewise, you can inject custom content into any of the popovers a cell expands into. Add popoverContents functions to populate a matching schema's popover using a new component. You can see an example of this by clicking into one of the cells in the last column below.

Disabling expansion popovers

Often the popovers are unnecessary for short form content. In the example below we've turned them off by setting isExpandable=false on the boolean column.