Skip to content

Commit

Permalink
Remove EuiDataGrid docs callout mdx nested within bullet points
Browse files Browse the repository at this point in the history
- just use sub-bullet-points instead
  • Loading branch information
cee-chen committed Oct 29, 2024
1 parent 4847ace commit 8479b41
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 33 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,11 @@ id: tabular_content_data_grid_advanced

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.

:::warning 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.
* `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.


:::note Handling cell location
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -404,23 +404,12 @@ If you want complete control over the rendering of the entire cell popover, use

To make falling back to atoms of the default cell popover easier, several props are passed to your custom `renderCellPopover` function:

* `children` - the direct JSX output of the cell's returned `renderCellValue`. It can be used (e.g.) if you want a custom wrapper or cell actions, but default popover content.

* `cellContentsElement` - a direct reference to the cell's HTML content node, which allows accessing the cell's `innerText` for cases where raw non-JSX text is useful (e.g. copying).

* `cellActions` - the direct JSX output of the default popover footer and buttons. Use this prop if you want custom popover content but default cell actions.:::warning Using custom cell actions




If deliberately leaving out the default `cellActions`, you **must** re-implement your cell actions in the popover in some form. Leaving out cell actions available in the cell but not in the popover introduces UX inconsistencies and will confuse the end user.

:::

* `DefaultCellPopover` - the default popover component. Use this component if you only want custom popover content for certain schemas or columns and default popover rendering for other cells.

* `setCellPopoverProps` - this callback is passed to allow customizing the cell expansion popover. Accepts any prop that `EuiPopover` accepts, except for `button` & `closePopover`, which is controlled by the data grid.

* `children` - the direct JSX output of the cell's returned `renderCellValue`. It can be used (e.g.) if you want a custom wrapper or cell actions, but default popover content.
* `cellContentsElement` - a direct reference to the cell's HTML content node, which allows accessing the cell's `innerText` for cases where raw non-JSX text is useful (e.g. copying).
* `cellActions` - the direct JSX output of the default popover footer and buttons. Use this prop if you want custom popover content but default cell actions.
* If deliberately leaving out the default `cellActions`, you **must** re-implement your cell actions in the popover in some form. Leaving out cell actions available in the cell but not in the popover introduces UX inconsistencies and will confuse the end user.
* `DefaultCellPopover` - the default popover component. Use this component if you only want custom popover content for certain schemas or columns and default popover rendering for other cells.
* `setCellPopoverProps` - this callback is passed to allow customizing the cell expansion popover. Accepts any prop that `EuiPopover` accepts, except for `button` & `closePopover`, which is controlled by the data grid.

Take a look at the below example's demo code to see the above props in action.

Expand Down

0 comments on commit 8479b41

Please sign in to comment.