In-memory tables
The EuiInMemoryTable is a higher level component wrapper around EuiBasicTable aimed at displaying tables data when all the data is in memory. It takes the full set of data (all possible items) and based on its configuration, will display it handling all configured functionality (pagination and sorting) for you.
EuiMemoryTable relies on referential equality of a column's
name field when sorting by that column. For example, if a JSX element is created for the name every render it appears different to the table and prevents sorting. Instead, that value needs to be lifted outside of the render method and preserved between renders.In-memory 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.
In-memory table with search
The example shows how to configure EuiInMemoryTable to display a search bar by passing the search prop. You can read more about the search bar's properties and its syntax
here .In-memory table with 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.
In-memory table with search and external state
The example shows how to configure EuiInMemoryTable when both external and internal search/filter states are in use.
In-memory table with 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.
In-memory table with 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.