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 #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 #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 #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 #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 #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 #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 #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 #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 #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 #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 #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 #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 #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 autodectect 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 #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 #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 superceded by what the user decides. cellPadding: 'm', fontSize: 'm', footer: 'overline' }} ↵
Prop rowHeightsOptions A #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. ↵

𐘂𐘂