Custom tables

If you need more custom behavior than either EuiBasicTable or EuiInMemoryTable allow, you can opt to completely construct your own table from EUI's low-level table building block components, like EuiTableHeader and EuiTableRowCell.

There are several important caveats to keep in mind while doing so:

Selection and filtering

Custom table implementations must completely handle their own selection and filtering.

Mobile headers

You must supply a mobileOptions.header prop equivalent to the column header on each EuiTableRowCell so that the mobile version will use that to populate the per cell headers.

Also, in order to add mobile support for selection and filtering toolbars, you will need to implement the EuiTableHeaderMobile component as a wrapper around these and use EuiTableSortMobile and EuiTableSortMobileItem components to supply mobile sorting. See demo below.

Cell text behavior

Set individual props like the truncateText prop to cells to enforce a single-line behavior and truncate their contents, or set the textOnly prop to false if you need the contents to be a direct descendent of the cell.

Below is one of many ways you might set up a custom table that account for all the above notes:

Sticky headers Beta

The stickyHeader prop keeps the table header fixed at the top of the viewport as users scroll through long tables. This enhances usability by maintaining column context during vertical scrolling and unifies the scrolling experience between EuiTable components and EuiDataGrid.

This feature should be used in places where it's possible for the table to grow longer than the viewport.

Sticky horizontal scrollbar Beta

When a table is taller than the viewport, the horizontal scrollbar at the bottom becomes hard to reach. Enable stickyScrollbar to display a scrollbar that sticks to the bottom of the viewport when needed.

Props

EuiTable

Extends HTMLAttributes


Prop	Description and type	Default value
Prop compressed#	Description and type Type: `boolean`	Default value
Prop responsiveBreakpoint#	Description and type Named breakpoint. Below this size, the table will collapse into responsive cards. Pass `false` to never collapse to a mobile view, or inversely, `true` to always render mobile-friendly cards. Type: `string \| boolean`	Default value `m`
Prop tableLayout#	Description and type Sets the table-layout CSS property Type: `"fixed" \| "auto"`	Default value `'fixed'`
Prop hasBackground#	Description and type Toggle the table's background Type: `boolean`	Default value `true`
Prop scrollableInline#	Description and type Allow the table to grow over 100% of the container inline size (width in horizontal writing-mode) and enable scrolling on overflow. This should only be used with [`tableLayout`]{@link EuiTableProps#tableLayout } set to `auto`. @beta Type: `boolean`	Default value `false`
Prop stickyScrollbar#	Description and type Make the horizontal scrollbar visible even if the table is larger than the viewport height. Useful for long tables when the native browser scrollbar is at the bottom of the table and hard to reach. This prop requires [scrollableInline](#scrollableInline) to be `true`. @beta Type: `boolean`	Default value `false`
Prop stickyHeader#	Description and type When enabled, the table header will stick to the top of the viewport as users scroll through long tables. This enhances usability by maintaining column context during vertical scrolling and unifies the scrolling experience between EuiTable components and EuiDataGrid. This feature should be used in places where it's possible for the table to grow longer than the viewport. @beta Type: `boolean`	Default value `false`
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value

EuiTableBody


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop bodyRef#	Description and type Type: `Ref<HTMLTableSectionElement>`	Default value

EuiTableFooter


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value

EuiTableFooterCell

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop width#	Description and type Type: `string \| number`	Default value
Prop minWidth#	Description and type Type: `string \| number`	Default value
Prop maxWidth#	Description and type Type: `string \| number`	Default value
Prop sticky#	Description and type Whether the cell should stick to a side of the table. This option is not applied in the responsive cards layout - see {@link EuiTableProps#responsiveBreakpoint `responsiveBreakpoint`}. Currently, it can only be used when the cell is in the first or the last column of a table. When set to `true` and `hasBackground: false` is set on the table, `--euiTableCellStickyBackgroundColor` CSS variable should be set to match the background color of the element containing the table. Otherwise, the sticky cell will use the default `backgroundBasePlain` background color. @internal @beta Type: `EuiTableStickyCellOptions`	Default value `false`

EuiTableHeader

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop children#	Description and type Children must be valid DOM structure residing within `<thead>`. Use `<td> \| <th>` by default, or `<tr><th/></tr>` when `wrapWithTableRow=false` Type: `ReactNode`	Default value
Prop wrapWithTableRow#	Description and type Automatically adds a wrapping `<tr>` element around the children Type: `boolean`	Default value `true`

EuiTableHeaderCell

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop width#	Description and type Type: `string \| number`	Default value
Prop minWidth#	Description and type Type: `string \| number`	Default value
Prop maxWidth#	Description and type Type: `string \| number`	Default value
Prop align#	Description and type Type: `HorizontalAlignment`	Default value `left`
Prop isSortAscending#	Description and type Type: `boolean`	Default value
Prop isSorted#	Description and type Type: `boolean`	Default value
Prop mobileOptions#	Description and type Type: `Pick<EuiTableRowCellMobileOptionsShape, "show" \| "only">`	Default value
Prop onSort#	Description and type Type: `NoArgCallback<void>`	Default value
Prop scope#	Description and type Type: `"col" \| "colgroup" \| "row" \| "rowgroup"`	Default value
Prop tooltipProps#	Description and type Allows adding an icon with a tooltip displayed next to the name Type: `EuiTableColumnNameTooltipProps`	Default value
Prop description#	Description and type Type: `string`	Default value
Prop readOnly#	Description and type Shows the sort indicator but removes the button Type: `boolean`	Default value
Prop append#	Description and type Content rendered outside the visible cell content wrapper. Useful for, e.g. screen reader text. Used by EuiBasicTable to render hidden copy markers Type: `ReactNode`	Default value
Prop sticky#	Description and type Whether the cell should stick to a side of the table. This option is not applied in the responsive cards layout - see {@link EuiTableProps#responsiveBreakpoint `responsiveBreakpoint`}. Currently, it can only be used when the cell is in the first or the last column of a table. When set to `true` and `hasBackground: false` is set on the table, `--euiTableCellStickyBackgroundColor` CSS variable should be set to match the background color of the element containing the table. Otherwise, the sticky cell will use the default `backgroundBasePlain` background color. @internal @beta Type: `EuiTableStickyCellOptions`	Default value `false`

EuiTableHeaderCellCheckbox

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop append#	Description and type Type: `ReactNode`	Default value
Prop width#	Description and type Type: `string \| number`	Default value
Prop minWidth#	Description and type Type: `string \| number`	Default value
Prop maxWidth#	Description and type Type: `string \| number`	Default value

EuiTablePagination


Prop	Description and type	Default value
Prop showPerPageOptions#	Description and type Option to completely hide the "Rows per page" selector. Type: `boolean`	Default value `true`
Prop itemsPerPage#	Description and type Current selection for "Rows per page". Pass `0` to display the selected "Show all" option and hide the pagination. Type: `number`	Default value `10`
Prop itemsPerPageOptions#	Description and type Custom array of options for "Rows per page". Pass `0` as one of the options to create a "Show all" option. Type: `number[]`	Default value `[10, 25, 50]`
Prop onChangeItemsPerPage#	Description and type Click handler that passes back selected `pageSize` number Type: `ItemsPerPageChangeHandler`	Default value
Prop onChangePage#	Description and type Type: `(pageIndex: number) => void`	Default value
Prop aria-controls#	Description and type Requires the `id` of the table being controlled Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop responsive#	Description and type Automatically reduces to the `compressed` version on smaller screens. Remove completely with `false` or provide your own list of responsive breakpoints. Type: `false \| string[]`	Default value
Prop compressed#	Description and type If true, will only show next/prev arrows and simplified number set. Type: `boolean`	Default value
Prop pageCount#	Description and type The total number of pages. Pass `0` if total count is unknown. Type: `number`	Default value
Prop activePage#	Description and type The current page using a zero based index. So if you set the activePage to 1, it will activate the second page. Pass `-1` for forcing to last page. Type: `number`	Default value

EuiTableRow

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop hasSelection#	Description and type Indicates if the table has a single column of checkboxes for selecting rows (used for mobile styling) Type: `boolean`	Default value
Prop isSelectable#	Description and type Indicates that the current row's checkbox is selectable / not disabled Type: `boolean`	Default value
Prop isSelected#	Description and type Indicates the current row has been selected Type: `boolean`	Default value
Prop hasActions#	Description and type Indicates if the table has a dedicated column for actions (used for mobile styling and desktop action hover behavior) Type: `boolean \| "custom"`	Default value
Prop isExpandable#	Description and type Indicates if the row will have an expanded row Type: `boolean`	Default value
Prop isExpandedRow#	Description and type Indicates if the row will be the expanded row Type: `boolean`	Default value

EuiTableRowCell

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop valign#	Description and type Vertical alignment of the content in the cell Type: `"top" \| "bottom" \| "baseline" \| "middle"`	Default value `middle`
Prop setScopeRow#	Description and type Indicates whether the cell should be marked as the heading for its row Type: `boolean`	Default value
Prop hasActions#	Description and type Indicates if the cell is dedicated to row actions (used for mobile styling and desktop action hover behavior) Type: `boolean \| "custom"`	Default value
Prop isExpander#	Description and type Indicates if the column is dedicated as the expandable row toggle Type: `boolean`	Default value
Prop mobileOptions#	Description and type Mobile options for displaying differently at small screens; See `EuiTableRowCellMobileOptionsShape` Type: `EuiTableRowCellMobileOptionsShape`	Default value
Prop append#	Description and type Content rendered outside the visible cell content wrapper. Useful for, e.g. screen reader text. Used by EuiBasicTable to render hidden copy markers Type: `ReactNode`	Default value
Prop sticky#	Description and type Whether the cell should stick to a side of the table. This option is not applied in the responsive cards layout - see {@link EuiTableProps#responsiveBreakpoint `responsiveBreakpoint`}. Currently, it can only be used when the cell is in the first or the last column of a table. When set to `true` and `hasBackground: false` is set on the table, `--euiTableCellStickyBackgroundColor` CSS variable should be set to match the background color of the element containing the table. Otherwise, the sticky cell will use the default `backgroundBasePlain` background color. @internal @beta Type: `EuiTableStickyCellOptions`	Default value `false`
Prop textOnly#	Description and type Creates a text wrapper around cell content that helps word break or truncate long text correctly. Type: `boolean`	Default value `true`
Prop truncateText#	Description and type Indicates whether this column should truncate overflowing text content. Set to `true` to enable single-line truncation. To enable multi-line truncation, use a configuration object with `lines` set to a number of lines to truncate to. Type: `boolean \| { lines: number; }`	Default value `false`
Prop minWidth#	Description and type Type: `string \| number`	Default value
Prop maxWidth#	Description and type Type: `string \| number`	Default value

EuiTableRowCellCheckbox

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop append#	Description and type Type: `ReactNode`	Default value

EuiTableSortMobile


Prop	Description and type	Default value
Prop anchorPosition#	Description and type Type: `"upCenter" \| "upLeft" \| "upRight" \| "downCenter" \| "downLeft" \| "downRight" \| "leftCenter" \| "leftUp" \| "leftDown" \| "rightCenter" \| "rightUp" \| "rightDown"`	Default value
Prop items#	Description and type Type: `ItemProps[]`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value

EuiTableSortMobileItem


Prop	Description and type	Default value
Prop onSort#	Description and type Callback to know when an item has been clicked Type: `() => void`	Default value
Prop isSorted#	Description and type Indicates current option is the sorted on column Type: `boolean`	Default value
Prop isSortAscending#	Description and type Indicates which direction the current column is sorted on Type: `boolean`	Default value
Prop ariaLabel#	Description and type Type: `string`	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value

EuiTableHeaderMobile

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop responsiveBreakpoint#	Description and type Named breakpoint. Below this size, the table will collapse into responsive cards. Pass `false` to never collapse to a mobile view, or inversely, `true` to always render mobile-friendly cards. Type: `string \| boolean`	Default value `m`