Data grid in-memory

What is the difference in the examples?

These examples show the same grid built with the four available

inMemory settings. While they may look the same, look at the source to see how they require different levels of data management in regards to sorting and pagination.

The grid has levels of in-memory settings that can be set. It is in the consuming application's best interest to put as much of the data grid in memory as performance allows. Try to use the highest level inMemory="sorting" whenever possible. The following values are available.

• undefined (default): When not in use the grid will not autodetect schemas. The sorting and pagination is the responsibility of the consuming application.
• enhancements: Provides no in-memory operations. If set, the grid will try to autodetect schemas only based on the content currently available (the current page of data).
• pagination: Schema detection works as above and pagination is performed in-memory. The pagination callbacks are still triggered on user interactions, but the row updates are performed by the grid.
• sorting (suggested): Schema detection and pagination are performed as above, and sorting is applied in-memory too. The onSort callback is still called and the application must own the column sort state, but data sorting is done by the grid based on the defined and/or detected schemas.

When enabled, in-memory renders cell data off-screen and uses those values to detect schemas and perform sorting. This detaches the user experience from the raw data; the data grid never has access to the backing data, only what is returned by renderCellValue.

When in-memory is not used

When inMemory is not in use the grid will not autodetect schemas. In the below example only the amount column has a schema because it is manually set. Sorting and pagination data management is the responsibility of the consuming application. Column sorting in particular is going to be imprecise because there is no backend service to call, and data grid instead defaults to naively applying JavaScript's default array sort which doesn't work well with numeric data and doesn't sort React elements such as the links. This is a good example of what happens when you don't utilize schemas for complex data.

Loading...

Enhancements only in-memory

With inMemory={{ level: 'enhancements' }} the grid will now autodetect schemas based on the content it has available on the currently viewed page. Notice that the field list under Sort fields has detected the type of data each column contains.

Loading...

Pagination only in-memory

With inMemory={{ level: 'pagination' }} the grid will now take care of managing the data cleanup for pagination. Like before it will autodetect schemas when possible.

Loading...

Sorting and pagination in-memory

With inMemory={{ level: 'sorting' }} the grid will now take care of managing the data cleanup for sorting as well as pagination. Like before it will autodetect schemas when possible.

Loading...

Props

EuiDataGridInMemory

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop level# ↦	Description and type Given the data flow Sorting->Pagination: Each step can be performed by service calls or in-memory by the grid. However, we cannot allow any service calls after an in-memory operation. E.g. if Pagination requires a service call the grid cannot perform in-memory Sorting. This means a single value representing the service / in-memory boundary can be used. Thus there are four states for in-memory's level: "enhancements" - no in-memory operations, but use the available data to enhance the grid "pagination" - only pagination is performed in-memory "sorting" - sorting & pagination is performed in-memory Type: "pagination" | "sorting" | "enhancements" ↦	Default value Required ↵
Prop skipColumns# ↦	Description and type An array of column ids for the in-memory processing to skip Type: string[] ↦	Default value ↵

𐘂𐘂

EuiDataGridPaginationProps

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop pageIndex# ↦	Description and type The index of the current page, starts at 0 for the first page Type: number ↦	Default value Required ↵
Prop onChangeItemsPerPage# ↦	Description and type A callback for when the user changes the page size selection Type: (itemsPerPage: number) => void ↦	Default value Required ↵
Prop onChangePage# ↦	Description and type A callback for when the current page index changes Type: (pageIndex: number) => void ↦	Default value Required ↵
Prop pageSize# ↦	Description and type How many rows should initially be shown per page. Pass 0 to display the selected "Show all" option and hide the pagination. Type: number ↦	Default value 10 ↵
Prop pageSizeOptions# ↦	Description and type An array of page sizes the user can select from. Pass 0 as one of the options to create a "Show all" option. Pass an empty array to hide "Rows per page" select button. Type: number[] ↦	Default value [10, 25, 50] ↵

𐘂𐘂

EuiDataGridSorting

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop onSort# ↦	Description and type A function that receives updated column sort details in response to user interactions in the toolbar controls Type: (columns: EuiDataGridColumnSortingConfig[]) => void ↦	Default value Required ↵
Prop columns# ↦	Description and type An array of the column ids currently being sorted and their sort direction. The array order determines the sort order. { id: 'A'; direction: 'asc' } Type: EuiDataGridColumnSortingConfig[] ↦	Default value Required ↵

𐘂𐘂