Ref methods

For advanced use cases, and particularly for data grids that manage associated modals/flyouts and need to manually control their grid cell popovers & focus states, we expose certain internal methods via the

ref prop of EuiDataGrid. These methods are:

• setIsFullScreen(isFullScreen) - controls the fullscreen state of the data grid. Accepts a true/false boolean flag.
• setFocusedCell({ rowIndex, colIndex }) - focuses the specified cell in the grid.

  • Using this method is an accessibility requirement if your data grid toggles a modal or flyout. Your modal or flyout should restore focus into the grid on close to prevent keyboard or screen reader users from being stranded.
• openCellPopover({ rowIndex, colIndex }) - opens the specified cell's popover contents.
• closeCellPopover() - closes any currently open cell popover.

Handling cell location

When using setFocusedCell or openCellPopover, keep in mind:

• colIndex is affected by the user reordering or hiding columns.
• If the passed cell indices are outside the data grid's total row count or visible column count, an error will be thrown.
• If the data grid is paginated or sorted, the grid will handle automatically finding specified row index's correct location for you.

react-window methods

EuiDataGrid also exposes several underlying methods from

react-window's VariableSizeGrid imperative API via its ref:

• scrollTo({ scrollLeft: number, scrollTop: number }) - scrolls the grid to the specified horizontal and vertical pixel offsets.
• scrollToItem({ align: string = "auto", columnIndex?: number, rowIndex?: number }) - scrolls the grid to the specified row and columns indices

react-window vs. EUI

Unlike EUI's ref APIs, rowIndex here refers to the visible rowIndex when passed to a method of a native react-window API.

For example: scrollToItem({ rowIndex: 50, columnIndex: 0 }) will always scroll to 51st visible row on the currently visible page, regardless of the content in the cell. In contrast, setFocusedCell({ rowIndex: 50, colIndex: 0 }) will scroll to the 51st row in your data, which may not be the 51st visible row in the grid if it is paginated or sorted.

The below example shows how to use the internal APIs for a data grid that opens a modal via cell actions, that scroll to specific cells, and that can be put into full-screen mode.

Loading...

Props

EuiDataGridRefProps

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop setIsFullScreen# ↦	Description and type Allows manually controlling the fullscreen state of the grid. Type: (isFullScreen: boolean) => void ↦	Default value Required ↵
Prop setFocusedCell# ↦	Description and type Allows manually focusing the specified cell in the grid. Using this method is an accessibility requirement if your EuiDataGrid toggles a modal or flyout - focus must be restored to the grid on close to prevent keyboard or screen reader users from being stranded. Type: (cell: { rowIndex: number; colIndex: number; }) => void ↦	Default value Required ↵
Prop openCellPopover# ↦	Description and type Allows manually opening the popover of the specified cell in the grid. Type: (cell: { rowIndex: number; colIndex: number; }) => void ↦	Default value Required ↵
Prop closeCellPopover# ↦	Description and type Closes any currently open popovers in the data grid. Type: () => void ↦	Default value Required ↵
Prop scrollTo# ↦	Description and type Scrolls to a specified top and left offset. Type: (params: { scrollLeft?: number; scrollTop?: number; }) => void ↦	Default value ↵
Prop scrollToItem# ↦	Description and type Scrolls to a specified rowIndex. Type: (params: { align?: Align; columnIndex?: number; rowIndex?: number; }) => void ↦	Default value ↵

𐘂𐘂