Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Data grid ref methods docs review #5

Closed
wants to merge 2 commits into from
Closed

Data grid ref methods docs review #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
36201c6
Improve changelog
cee-chen Feb 1, 2022
cacc5a4
Data grid ref methods docs review
elizabetdev Feb 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## [`main`](https://github.com/elastic/eui/tree/main)

- Added the ability to access certain `EuiDataGrid` internal methods via the `ref` prop ([#5499](https://github.com/elastic/eui/pull/5499))
- Added the ability to control internal `EuiDataGrid` fullscreen, cell focus, and cell popover state via the `ref` prop ([#5590](https://github.com/elastic/eui/pull/5590))
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably doing something wrong.. What is this file appearing? 🤣


## [`46.2.0`](https://github.com/elastic/eui/tree/v46.2.0)

Expand Down
51 changes: 29 additions & 22 deletions src-docs/src/views/datagrid/datagrid_ref_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,8 @@ export const DataGridRefExample = {
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 <EuiCode>ref</EuiCode> prop of EuiDataGrid. These methods are:
the <EuiCode>ref</EuiCode> prop of <strong>EuiDataGrid</strong>.
These methods are:
</p>
<ul>
<li>
Expand All @@ -56,6 +57,7 @@ export const DataGridRefExample = {
iconType="accessibility"
title="Using this method is an accessibility requirement if your data
grid toggles a modal or flyout."
color="warning"
>
Your modal or flyout should restore focus into the grid on close
to prevent keyboard or screen reader users from being stranded.
Expand All @@ -65,27 +67,6 @@ export const DataGridRefExample = {
<li>
<EuiCode>openCellPopover({'{ rowIndex, colIndex }'})</EuiCode> -
opens the specified cell&apos;s popover contents.
<EuiSpacer size="s" />
<EuiCallOut iconType="mapMarker" title="Handling cell location">
When using <EuiCode>setFocusedCell</EuiCode> or{' '}
<EuiCode>openCellPopover</EuiCode>, keep in mind:
<ul>
<li>
colIndex is affected by the user reordering or hiding
columns.
</li>
<li>
If the passed cell indices are outside the data grid&apos;s
total row count or visible column count, an error will be
thrown.
</li>
<li>
If the data grid is paginated or sorted, the grid will
handle automatically finding specified row index&apos;s
correct location for you.
</li>
</ul>
</EuiCallOut>
<EuiSpacer size="m" />
</li>
<li>
Expand All @@ -95,6 +76,32 @@ export const DataGridRefExample = {
</p>
</li>
</ul>

<EuiSpacer size="s" />

<EuiCallOut title="Handling cell location">
When using <EuiCode>setFocusedCell</EuiCode> or{' '}
<EuiCode>openCellPopover</EuiCode>, keep in mind:
<ul>
<li>
<EuiCode>colIndex</EuiCode> is affected by the user reordering
or hiding columns.
</li>
<li>
If the passed cell indices are outside the data grid&apos;s
total row count or visible column count, an error will be
thrown.
</li>
<li>
If the data grid is paginated or sorted, the grid will handle
automatically finding specified row index&apos;s correct
location for you.
</li>
</ul>
</EuiCallOut>

<EuiSpacer />

<p>
The below example shows how to use the internal APIs for a data grid
that opens a modal via cell actions.
Expand Down