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.

Loading...

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 of min-width: 0 to the EuiFlexItem.

Loading...

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.

Loading...

Constrained by DOM

Loading...

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. Type: 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. Type: 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. Type: CSSDirection ↦	Default value "ltr" ↵
Prop style# ↦	Description and type Optional inline style to attach to outermost element. Type: CSSProperties ↦	Default value ↵
Prop className# ↦	Description and type Optional CSS class to attach to outermost element. Type: 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. Type: (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. The estimated height impacts user scrolling behavior. It is updated whenever new rows are measured. Type: 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. The estimated width impacts user scrolling behavior. It is updated whenever new columns are measured. Type: 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: Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling. Note that overscanning too much can negatively impact performance. By default, grid overscans by one item. Type: 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: Overscanning by one row or column allows the tab key to focus on the next (not yet visible) item. Overscanning slightly can reduce or prevent a flash of empty space when a user first starts scrolling. Note that overscanning too much can negatively impact performance. By default, grid overscans by one item. Type: number ↦	Default value ↵
Prop initialScrollTop# ↦	Description and type Vertical scroll offset for initial render. Type: number ↦	Default value ↵
Prop initialScrollLeft# ↦	Description and type Horizontal scroll offset for initial render. Type: number ↦	Default value ↵
Prop onItemsRendered# ↦	Description and type Called when the items rendered by the grid change. Type: (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: Your collections of items is never sorted or modified Your item renderer is not stateful and does not extend PureComponent If your grid does not satisfy the above constraints, use the itemKey property to specify your own keys for items. Type: 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. Type: ReactElementType ↦	Default value ↵

𐘂𐘂