Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsUtilitiesPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
  • Tabular content
    • Data grid
      • Schema & columns
      • Cells & popovers
      • Toolbar
      • Style & display
      • Container constraints
      • Advanced use cases
    • Tables
  • Templates
  • Editors and syntax
  • EUI
  • Tabular content
  • Data grid

Data grid

EuiDataGrid is for displaying large amounts of tabular data. It is a better choice over

EUI tables when there are many columns, the data in those columns is fairly uniform, and when schemas and sorting are important for comparison. Although it is similar to traditional spreedsheet software, EuiDataGrid's current strengths are in rendering rather than creating content.

Core concepts

  • The grid allows you to optionally define an in memory level to have the grid automatically handle updating your columns. Depending upon the level chosen, you may need to manage the content order separately from the grid.
  • Schemas allow you to tailor the render and sort methods for each column. The component ships with a few automatic schema detection and types, but you can also pass in custom ones.
  • Unlike tables, the data grid forces truncation. To display more content your can customize popovers to display more content and actions into popovers.
  • Grid styling can be controlled by the engineer, but augmented by user preference depending upon the features you enable.
  • Control columns allow you to add repeatable actions and controls like checkboxes or buttons to your grid.
  • The toolbar offers the user ways to manipulate the display and order of the data.
Loading...

Top level props

The below table contains a list of all top level EuiDataGrid props and sample snippets used to configure or customize them.

For a full list of all data grid types, including lower level configurations, see the /datagrid/data_grid_types.ts definition file, or view the props tables of individual datagrid sub-pages.

๐˜‚๐˜‚
โœ„๐˜—โœ„๐˜—
Prop
โ†ฆ
Sample snippet
โ†ต
Prop
rowCount

The total number of rows in the dataset (used by e.g. pagination to know how many pages to list).

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—rowCount={200}
โ†ต
Prop
columns

An array of {@link EuiDataGridColumn} objects. Lists the columns available and the schema and settings tied to it.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—columns={[
  {
    id: 'A', // required
    display: <>Column A <EuiIcon type="dot" /></>, // optional column header rendering
    displayAsText: 'Column A', // column header as plain text
    displayHeaderCellProps: { className: 'eui-textCenter' }, // optional column header cell props
    initialWidth: 150, // starting width of 150px
    isResizable: false, // prevents the user from resizing width
    isExpandable: false, // doesn't allow clicking in to see the content in a popup
    isSortable: false, // prevents the user from sorting the data grid by this column
    defaultSortDirection: 'asc', // sets the default sort direction
    schema: 'franchise', // custom schema later defined under schemaDetectors
    actions: false, // no column header actions are displayed
    actions: { showMoveLeft: false, showMoveRight: false }, // doesn't show move actions in column header
    cellActions: [ // provides one additional cell action that triggers an alert once clicked
      ({ Component }) => <Component iconType="heart" onClick={() => alert('test')}>Custom action</Component>,
    ],
    visibleCellActions: 2, // configures the number of cell action buttons immediately visible on a cell
  },
]}
โ†ต
Prop
leadingControlColumns

An array of {@link EuiDataGridControlColumn} objects. Used to define ancillary columns on the left side of the data grid. Useful for adding items like checkboxes and buttons.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—leadingControlColumns={[
  {
    id: 'selection',
    width: 31,
    headerCellRender: () => <span>Select a row</span>,
    headerCellProps: { className: 'eui-textCenter' },
    rowCellRender: () => <div><EuiCheckbox ... /></div>,
    footerCellRender: () => <span>Select a row</span>,
    footerCellProps: { className: 'eui-textCenter' },
  },
]}
โ†ต
Prop
trailingControlColumns

An array of {@link EuiDataGridControlColumn} objects. Used to define ancillary columns on the right side of the data grid. Useful for adding items like checkboxes and buttons.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—trailingControlColumns={[
  {
    id: 'actions',
    width: 40,
    headerCellRender: () => 'Actions',
    headerCellProps: { className: 'euiScreenReaderOnly' },
    rowCellRender: MyGridActionsComponent,
    footerCellRender: () => null,
    footerCellProps: { data-test-subj: 'emptyFooterCell' },
  },
]}
โ†ต
Prop
columnVisibility

An array of {@link EuiDataGridColumnVisibility} objects. Defines which columns are intitially visible in the grid and the order they are displayed. Users can still turn their visibility on/off when toolbarVisibility.showColumnSelector = true (which is the default).

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—columnVisibility={{
  visibleColumns: ['A'],
  setVisibleColumns: () => {},
  canDragAndDropColumns: true,
}}
โ†ต
Prop
onColumnResize

A callback for when a column's size changes. Callback receives { columnId: string, width: number }.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—onColumnResize={({columnId, width}) => {}}
โ†ต
Prop
schemaDetectors

An array of custom {@link EuiDataGridSchemaDetector} objects. You can inject custom schemas to the grid to define the classnames applied.

โ†ฆ
Sample snippet
See Schemas & columns for full details.
โ†ต
Prop
renderCellValue

A function called to render a cell's value. Behind the scenes it is treated as a React component allowing hooks, context, and other React concepts to be used. The function receives {@link EuiDataGridCellValueElementProps} as its only argument.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—renderCellValue={({ rowIndex, columnId }) => {}}
โ†ต
Prop
cellContext

An optional object of props passed to the renderCellValue component. This API exists to make it easier to define your renderCellValue function component statically, and not rerender due to other dependent state.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—cellContext={{
  // Will be passed to your `renderCellValue` function/component as a prop
  yourData,
}}
renderCellValue={({ rowIndex, columnId, yourData }) => {}}
โ†ต
Prop
renderCellPopover

An optional function that can be used to completely customize the rendering of cell popovers.

If not specified, defaults to an <EuiText> wrapper around the rendered cell value and an <EuiPopoverFooter> around the cell actions.

Behind the scenes it is treated as a React component allowing hooks, context, and other React concepts to be used. The function receives {@link EuiDataGridCellPopoverElementProps} as its only argument.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—renderCellPopover={({ children, cellActions }) => (
  <>
    <EuiPopoverTitle>I'm a custom popover!</EuiPopoverTitle>
    {children}
    {cellActions}
  </>
)}
โ†ต
Prop
renderFooterCellValue

An optional function called to render a footer cell. If not specified, no footer row is rendered.

Behind the scenes it is treated as a React component allowing hooks, context, and other React concepts to be used. The function receives {@link EuiDataGridCellValueElementProps} as its only argument.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—renderFooterCellValue={({ rowIndex, columnId }) => {}}
โ†ต
Prop
renderCustomToolbar

An optional function called to customize placement of controls in EuiDataGrid's toolbar. This can be used to add custom buttons or reorder existing ones.

Behind the scenes, this function is treated as a React component, allowing hooks, context, and other React concepts to be used. It receives {@link EuiDataGridCustomToolbarProps} as its only argument.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—renderCustomToolbar={({ displayControl }) => <div>Custom toolbar content {displayControl}</div>}
โ†ต
Prop
renderCustomGridBody

An optional function called to completely customize and control the rendering of EuiDataGrid's body and cell placement. This can be used to, e.g. remove EuiDataGrid's virtualization library, or roll your own.

This component is only meant as an escape hatch for extremely custom use cases.

Behind the scenes, this function is treated as a React component, allowing hooks, context, and other React concepts to be used. It receives {@link EuiDataGridCustomBodyProps} as its only argument.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—// Optional; advanced usage only. This render function is an escape hatch for consumers who need to opt out of virtualization or otherwise need total custom control over how data grid cells are rendered.

renderCustomGridBody={({ visibleColumns, visibleRowData, Cell }) => (
  <Cell colIndex={mappedFromVisibleColumns} visibleRowIndex={mappedFromVisibleRowData} />
)}
โ†ต
Prop
pagination

A {@link EuiDataGridPaginationProps} object. Omit to disable pagination completely.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—pagination={{
  pageIndex: 1,
  pageSize: 100, // If not specified, defaults to EuiTablePagination.itemsPerPage
  pageSizeOptions: [50, 100, 200], // If not specified, defaults to EuiTablePagination.itemsPerPageOptions
  onChangePage: () => {},
  onChangeItemsPerPage: () => {},
}}
โ†ต
Prop
sorting

A {@link EuiDataGridSorting} object that provides the sorted columns along with their direction. Provides a callback for when it changes. Optional, but required when inMemory is set. Omit to disable, but you'll likely want to also turn off the user sorting controls through the toolbarVisibility prop.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—sorting={{
  columns: [{ id: 'A', direction: 'asc' }],
  onSort: () => {},
}}
โ†ต
Prop
inMemory

A {@link EuiDataGridInMemory} object to define the level of high order schema-detection and sorting logic to use on your data. Try to set when possible. If omitted, disables all enhancements and assumes content is flat strings.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—// Will try to autodetect schemas and do sorting and pagination in memory.
inMemory={{ level: 'sorting' }}
โ†ต
Prop
toolbarVisibility

Allows you to configure what features the toolbar shows.

Accepts either a boolean or {@link EuiDataGridToolBarVisibilityOptions} object. When used as a boolean, defines the display of the entire toolbar. When passed an object allows you to turn off individual controls within the toolbar as well as add additional buttons.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—toolbarVisibility={{
  showColumnSelector: false,
  showDisplaySelector: false,
  showSortSelector: false,
  showKeyboardShortcuts: false,
  showFullScreenSelector: false,
  additionalControls: {
    left: <EuiButtonEmpty size="xs" />,
    right: <EuiButtonIcon size="xs" />,
  },
}}
โ†ต
Prop
minSizeForControls

Defines a minimum width for the grid to show all controls in its toolbar.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—minSizeForControls={500}
โ†ต
Prop
gridStyle

Defines the initial style of the grid. Accepts a partial {@link EuiDataGridStyle} object. Settings provided may be overwritten or merged with user defined preferences if toolbarVisibility.showDisplaySelector.allowDensity = true (which is the default).

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—gridStyle={{
  border: 'none',
  stripes: true,
  rowHover: 'highlight',
  header: 'underline',
  // If showDisplaySelector.allowDensity={true} from toolbarVisibility, fontSize and cellPadding will be superseded by what the user decides.
  cellPadding: 'm',
  fontSize: 'm',
  footer: 'overline'
}}
โ†ต
Prop
rowHeightsOptions

A {@link EuiDataGridRowHeightsOptions} object that provides row heights options. Allows configuring both default and specific heights of grid rows. Settings provided may be overwritten or merged with user defined preferences if toolbarVisibility.showDisplaySelector.allowRowHeight = true (which is the default).

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—rowHeightsOptions={{
  defaultHeight: {
    lineCount: 3 // default every row to 3 lines of text
  },
  lineHeight: '2em', // default every cell line-height to 2em
  rowHeights: {
    1: {
      lineCount: 5, // row at index 1 will show 5 lines
    },
    4: 200, // row at index 4 will adjust the height to 200px
    6: 'auto', // row at index 6 will automatically adjust the height
  },
  scrollAnchorRow: 'start', // compensate for layout shift when auto-sized rows are scrolled into view
}}
โ†ต
Prop
ref
โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—// Optional. For advanced control of internal data grid state, passes back an object of imperative API methods
ref={dataGridRef}
โ†ต
Prop
virtualizationOptions

Allows customizing the underlying react-window grid props.

โ†ฆ
Sample snippet
โœ„๐˜—
tsx code block:
โœ„๐˜—// Optional. For advanced control of the underlying react-window virtualization grid.
virtualizationOptions={{
  className: 'virtualizedGridClass',
  style: {},
  direction: 'ltr',
  estimatedRowHeight: 50,
  overscanColumnCount: 1,
  overscanRowCount: 1,
  initialScrollLeft: 0,
  initialScrollTop: 0,
  onScroll: () => {},
  onItemsRendered: () => {},
  itemKey: () => {},
  outerElementType: 'div',
}}
// Properties not listed above are used by EuiDataGrid internals and cannot be overridden.
โ†ต
๐˜‚๐˜‚
Edit this page
Previous
Color palette picker
Next
Schema & columns
  • Core concepts
  • Top level props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with โค by Elastic