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 a className="euiDataGridRowCell--schemaName" to each matching cell.

Columns

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.

Draggable columns

To reorder columns directly instead of via the actions menu popover, you can enable draggable EuiDataGrid header columns via the columnVisibility.canDragAndDropColumns prop. This will allow you to reorder the column by dragging them.

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.

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.

Props

EuiDataGridColumn


Prop	Description and type	Default value
Prop id#	Description and type The unique identifier for this column Type: `string`	Default value Required
Prop display#	Description and type A `ReactNode` used when rendering the column header. When providing complicated content, please make sure to utilize CSS to respect truncation as space allows. Check the docs example. Type: `ReactNode`	Default value
Prop displayAsText#	Description and type Display name as text for the column. This can be used to display a readable column name in column hiding/sorting, where `display` won't be used. This will also be used as a `title` attribute that will display on mouseover (useful if the display text is being truncated by the column width). If not passed, `id` will be shown as the column name. Passing this together with `display` is useful to ensure an accessible label is added to the column. Type: `string`	Default value
Prop displayHeaderCellProps#	Description and type Optional props to pass to the column header cell Type: `HTMLAttributes<HTMLDivElement>`	Default value
Prop initialWidth#	Description and type Initial width (in pixels) of the column Type: `number`	Default value
Prop isExpandable#	Description and type Defaults to true, always true if cellActions are defined. Defines whether or not the column's cells can be expanded with a popup onClick / keydown. Type: `boolean`	Default value
Prop isResizable#	Description and type Whether this column's width can be changed by the user, defaults to true Type: `boolean`	Default value
Prop isSortable#	Description and type Whether this column is sortable Type: `boolean`	Default value
Prop defaultSortDirection#	Description and type Default sort direction of the column Type: `"asc" \| "desc"`	Default value
Prop schema#	Description and type A Schema to use for the column. Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection). In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection. Type: `string`	Default value
Prop actions#	Description and type Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column. Type: `false \| EuiDataGridColumnActions`	Default value
Prop cellActions#	Description and type Additional actions displayed as icon on hover / focus, and in the expanded view of the cell containing the value Type: `EuiDataGridColumnCellAction[]`	Default value
Prop visibleCellActions#	Description and type Configures the amount of cell action buttons immediately visible on a cell. Any cell actions above this number will only display in the cell expansion popover. Defaults to 2. Type: `number`	Default value

EuiDataGridColumnActions


Prop	Description and type	Default value
Prop showHide#	Description and type Show/hide/configure the action to hide a column, provided EuiListGroupItemProps are merged Type: `boolean \| EuiListGroupItemProps`	Default value
Prop showMoveLeft#	Description and type Show/hide/configure the action that switches the actual column with the column to the left side, provided EuiListGroupItemProps are merged Type: `boolean \| EuiListGroupItemProps`	Default value
Prop showMoveRight#	Description and type Show/hide/configure the action that switches the actual column with the column to the right side, provided EuiListGroupItemProps are merged Type: `boolean \| EuiListGroupItemProps`	Default value
Prop showSortAsc#	Description and type Show/hide/configure the action to sort ascending by the actual column, provided EuiListGroupItemProps are merged Type: `boolean \| EuiListGroupItemProps`	Default value
Prop showSortDesc#	Description and type Show/hide/configure the action to sort descending by the actual column, provided EuiListGroupItemProps are merged Type: `boolean \| EuiListGroupItemProps`	Default value
Prop additional#	Description and type Append additional actions Type: `EuiListGroupItemProps[]`	Default value

EuiDataGridColumnCellActionProps


Prop	Description and type	Default value
Prop rowIndex#	Description and type The index of the row that contains cell's data Type: `number`	Default value Required
Prop colIndex#	Description and type The index of the column that contains cell's data Type: `number`	Default value Required
Prop columnId#	Description and type The id of the column that contains the cell's data Type: `string`	Default value Required
Prop Component#	Description and type React component representing the action displayed in the cell. On cell hover/focus, an EuiButtonIcon will be displayed that cannot have its size or color customized, only its icon. On cell expand, an EuiButtonEmpty will be displayed in the cell popover that can have any sizing, color, or text. Type: `FunctionComponent<(DisambiguateSet<EuiButtonEmptyPropsForAnchor, EuiButtonEmptyPropsForButton> & CommonEuiButtonEmptyProps & { ...; } & ButtonHTMLAttributes<...>) \| (DisambiguateSet<...> & ... 2 more ... & AnchorHTMLAttributes<...>)> \| FunctionComponent<...>`	Default value Required
Prop isExpanded#	Description and type Determines whether the cell's action is displayed expanded (in the Popover) Type: `boolean`	Default value Required

EuiDataGridColumnVisibility


Prop	Description and type	Default value
Prop visibleColumns#	Description and type An array of #EuiDataGridColumn `id`s dictating the order and visibility of columns. Type: `string[]`	Default value Required
Prop setVisibleColumns#	Description and type A callback for when a column's visibility or order is modified by the user. Type: `(visibleColumns: string[]) => void`	Default value Required
Prop canDragAndDropColumns#	Description and type Enables reordering grid columns on drag and drop via the headers cells Type: `boolean`	Default value

EuiDataGridControlColumn


Prop	Description and type	Default value
Prop id#	Description and type Used as the React `key` when rendering content Type: `string`	Default value Required
Prop width#	Description and type Width of the column, users are unable to change this Type: `number`	Default value Required
Prop headerCellRender#	Description and type Component to render in the column header Type: `ComponentType`	Default value Required
Prop rowCellRender#	Description and type Component to render for each row in the column Type: `RenderCellValue`	Default value Required
Prop headerCellProps#	Description and type Optional props to pass to the column header cell Type: `HTMLAttributes<HTMLDivElement>`	Default value
Prop footerCellRender#	Description and type Component to render in the optional column footer Type: `RenderCellValue`	Default value
Prop footerCellProps#	Description and type Optional props to pass to the column footer cell Type: `HTMLAttributes<HTMLDivElement>`	Default value

EuiDataGridSchemaDetector


Prop	Description and type	Default value
Prop type#	Description and type The name of this data type, matches #EuiDataGridColumn / `schema` Type: `string`	Default value Required
Prop detector#	Description and type The function given the text value of a cell and returns a score of [0...1] of how well the value matches this data type Type: `(value: string) => number`	Default value Required
Prop icon#	Description and type The icon used to visually represent this data type. Accepts any `EuiIcon IconType`. Type: `IconType`	Default value Required
Prop sortTextAsc#	Description and type Text for how to represent an ascending sort of this data type, e.g. 'A -> Z' Type: `ReactNode`	Default value Required
Prop sortTextDesc#	Description and type Text for how to represent a descending sort of this data type, e.g. 'Z -> A' Type: `ReactNode`	Default value Required
Prop comparator#	Description and type A custom comparator function when performing in-memory sorting on this data type, takes `(a: string, b: string, direction: 'asc' \| 'desc', indexes: {aIndex: number, bIndex: number}) => -1 \| 0 \| 1` Type: `(a: string, b: string, direction: "asc" \| "desc", indexes: { aIndex: number; bIndex: number; }) => 0 \| 1 \| -1`	Default value
Prop color#	Description and type The color associated with this data type; it's used to color the icon token Type: `string`	Default value
Prop isSortable#	Description and type Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level Type: `boolean`	Default value
Prop textTransform#	Description and type This property controls the capitalization of text Type: `"capitalize" \| "lowercase" \| "uppercase"`	Default value
Prop defaultSortDirection#	Description and type Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level Type: `"asc" \| "desc"`	Default value

Schemas.css-1pgbpvp{-webkit-margin-start:8px;margin-inline-start:8px;opacity:0;}.css-1pgbpvp:focus,.heading:hover .css-1pgbpvp{opacity:1;}