Container constraints
Data grid adapts to its container
When wrapped inside a container, like a dashboard panel, the grid will start hiding controls and adopt a more strict flex layout. Use the
minSizeForControls prop to control the min width to enables/disables grid controls based on available width.
When placed within an
EuiFlexGroup and EuiFlexItem, the data grid will have trouble shrinking to fit. To fix this, you will need to manually add a style ofmin-width: 0 to the EuiFlexItem.
Virtualization
Creating a lot of DOM nodes is computationally expensive, and EuiDataGrid uses a couple wrapping divs to build each cell. To help offset the cost of larger tables, cell virtualization can be opted into by constraining the grid's height and/or width. There are two ways to enable this functionality. First, height and/or width can be passed as props, which are applied to the grid's container style. Alternatively, if EuiDataGrid is unable to render at the full dimensions it needs due to screen real estate or other DOM constraints, it will overflow within a scrollable container and only render the visible cells.
Never toggle the height between a value and undefined.
Similar to React's rule of not switching between a controlled and uncontrolled input, EuiDataGrid does not accommodate for its height switching to or from undefined. For demonstration purposes, the example below uses a key to force EuiDataGrid to completely remount when its height changes between constrained & constrained heights.
Constrained by DOM
Props
EuiDataGridProps
Prop | Description and type | Default value |
|---|---|---|
Prop width# | Description and type Sets the grid's width, forcing it to overflow in a scrollable container with cell virtualization. Width<string | number> | Default value |
Prop height# | Description and type Sets the grid's height, forcing it to overflow in a scrollable container with cell virtualization. Height<string | number> | Default value |
EuiDataGridVirtualizationOptions
Prop | Description and type | Default value |
|---|---|---|
Prop direction# | Description and type Determines the direction of text and horizontal scrolling. This property also automatically sets the CSS direction style for the grid component. CSSDirection | Default value "ltr" |
Prop style# | Description and type Optional inline style to attach to outermost element. CSSProperties | Default value |
Prop className# | Description and type Optional CSS class to attach to outermost element. string | Default value |
Prop onScroll# | Description and type Called when the grid scroll positions changes, as a result of user scrolling or scroll-to method calls. (props: GridOnScrollProps) => any | Default value |
Prop estimatedRowHeight# | Description and type Average (or estimated) row height for unrendered rows. This value is used to calculated the estimated total height of a Grid before its rows have all been measured. number | Default value |
Prop estimatedColumnWidth# | Description and type Average (or estimated) column width for unrendered columns. This value is used to calculated the estimated total width of a Grid before its columns have all been measured. number | Default value |
Prop overscanRowCount# | Description and type The number of rows to render outside of the visible area. This property can be important for two reasons:
Note that overscanning too much can negatively impact performance. By default, grid overscans by one item. number | Default value |
Prop overscanColumnCount# | Description and type The number of columns to render outside of the visible area. This property can be important for two reasons:
Note that overscanning too much can negatively impact performance. By default, grid overscans by one item. number | Default value |
Prop initialScrollTop# | Description and type Vertical scroll offset for initial render. number | Default value |
Prop initialScrollLeft# | Description and type Horizontal scroll offset for initial render. number | Default value |
Prop onItemsRendered# | Description and type Called when the items rendered by the grid change. (props: GridOnItemsRenderedProps) => any | Default value |
Prop itemKey# | Description and type By default, grids will use an item's indices as its key. This is okay if:
If your grid does not satisfy the above constraints, use the itemKey property to specify your own keys for items. GridItemKeySelector<any> | Default value |
Prop outerElementType# | Description and type Tag name passed to document.createElement to create the outer container element. This is an advanced property; in most cases, the default ("div") should be used. ReactElementType | Default value |