In-memory tables

EuiInMemoryTable is a higher level component wrapper around

EuiBasicTable aimed at automatically handling certain functionality (selection, search, sorting, and pagination) in-memory for you, within certain preset configurations. It takes the full set of data that must include all possible items.

Column names must be referentially stable

EuiMemoryTable relies on referential equality of a column's

name field when sorting by that column. This particularly applies to JSX nodes.

If your JSX name is not defined outside a component render cycle or is not correctly memoized with useMemo, it will break sorting and other in-memory comparisons.

Table selection

To enable selection, both the itemId and selection props must be passed. The following example shows how to use EuiInMemoryTable with both controlled and uncontrolled item selection. It also shows how you can display messages, errors and show loading indication.

For uncontrolled usage, where selection changes are determined entirely to be selected initially by passing an array of items to selection.initialSelected. You can also use selected.onSelectionChange to track or respond to the items that users select.

To completely control table selection, use selection.selected instead (which requires passing selected.onSelectionChange). This can be useful if you want to handle table selections based on user interaction with another part of the UI.

Controlled selection

Searching

Search bar

This example shows how to configure EuiInMemoryTable to display a search bar by passing the search prop. For more detailed information about the syntax and configuration accepted by this prop, see EuiSearchBar.

Search callback

The example shows how to configure EuiInMemoryTable to display a search bar and intercept the search value when it changes so you can perform your own search logic.

External state

The example shows how to configure EuiInMemoryTable when both external and internal search/filter states are in use.

Custom sort values

Sometimes the value displayed in a column is not appropriate to use for sorting, such as pre-formatting values to be human-readable. In these cases it's possible to pass the sortable prop as a function instead of true or false. The function is used to extract or calculate the intended sort value for each item.

Controlled pagination

By default EuiInMemoryTable resets its page index when receiving a new EuiInMemoryTable array. To avoid this behavior the pagination object optionally takes a pageIndex value to control this yourself. Additionally, pageSize can also be controlled the same way. Both of these are provided to your app during the onTableChange callback.

The example below updates the array of users every second, randomly toggling their online status. Pagination state is maintained by the app, preventing it from being reset by the updates.

Props

EuiInMemoryTable

Extends HTMLAttributes


Prop	Description and type	Default value
Prop items#	Description and type A list of objects to appear in the table - an item per row Type: `T[]`	Default value Required
Prop columns#	Description and type An array of one of the objects: #EuiTableFieldDataColumnType, #EuiTableComputedColumnType or #EuiTableActionsColumnType. Type: `EuiBasicTableColumn<T>[]`	Default value Required
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 error#	Description and type Error message to display Type: `string`	Default value
Prop compressed#	Description and type Type: `boolean`	Default value
Prop loading#	Description and type Provides an infinite loading indicator 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. Note that auto tableLayout prevents truncateText from working properly. Type: `"auto" \| "fixed"`	Default value `fixed`
Prop itemId#	Description and type Describes how to extract a unique ID from each item, used for selections & expanded rows Type: `ItemId<T>`	Default value
Prop itemIdToExpandedRowMap#	Description and type Row expansion uses the itemId prop to identify each row Type: `ItemIdToExpandedRowMap`	Default value
Prop cellProps#	Description and type Applied to `EuiTableRowCell` Type: `object \| CellPropsCallback<T>`	Default value
Prop tableCaption#	Description and type Describes the content of the table. If not specified, the caption will be "This table contains {itemCount} rows." Type: `string`	Default value
Prop rowHeader#	Description and type Indicates which column should be used as the identifying cell in each row. Should match a "field" prop in FieldDataColumn Type: `string`	Default value
Prop rowProps#	Description and type Applied to `EuiTableRow` Type: `object \| RowPropsCallback<T>`	Default value
Prop selection#	Description and type Configures #EuiTableSelectionType Type: `EuiTableSelectionType<T>`	Default value
Prop message#	Description and type Type: `ReactNode`	Default value
Prop search#	Description and type Configures #Search. Type: `Search`	Default value
Prop searchFormat#	Description and type By default, tables use `eql` format for search which allows using advanced filters. However, certain special characters (such as quotes, parentheses, and colons) are reserved for EQL syntax and will error if used. If your table does not require filter search and instead requires searching for certain symbols, use a plain `text` search format instead (note that filters will be ignored in this format). Type: `"text" \| "eql"`	Default value `eql`
Prop pagination#	Description and type Configures #Pagination Type: `Pagination`	Default value
Prop sorting#	Description and type Configures #EuiTableSortingType Type: `Sorting`	Default value
Prop allowNeutralSort#	Description and type Set `allowNeutralSort` to false to force column sorting. Defaults to true. Type: `boolean`	Default value
Prop onChange#	Description and type `onChange` is not required when `pagination` and/or `sorting` are configured, but if `onChange` is present it is responsible for handling state for each/both. See #Criteria or #CriteriaWithPagination Type: `((criteria: Criteria<T>) => void) \| ((criteria: CriteriaWithPagination<T>) => void)`	Default value
Prop onTableChange#	Description and type Callback for when table pagination or sorting is changed. This is meant to be informational only, and not used to set any state as the in-memory table already manages this state. See #Criteria or #CriteriaWithPagination. Type: `((nextValues: Criteria<T>) => void) \| ((nextValues: CriteriaWithPagination<T>) => void)`	Default value
Prop executeQueryOptions#	Description and type Type: `{ defaultFields?: string[]; isClauseMatcher?: (...args: any) => boolean; explain?: boolean; enabled?: boolean; }`	Default value
Prop childrenBetween#	Description and type Insert content between the search bar and table components. Type: `ReactNode`	Default value

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