[EuiDataGrid][EuiTables] Fix pagination potentially rendering out view on narrow tables with many pages #5561

cee-chen · 2022-01-25T22:38:08Z

Summary

This attempts to address item 5 in #4458:

It looks like we also need a smarter pagination display on skinny screens/containers.

Repro steps:

Go to https://elastic.github.io/eui/#/tabular-content/data-grid-virtualization
Click on page 200 in the first example
Click on page 196
Note how the rightmost arrow is now cut off due to the small width of the grid and the high amount of pages/content

Before

After

The overflowing pagination UI can now be scrolled to.

Checklist

~~- [ ] Check against all themes for compatibility in both light and dark modes~~

Checked in mobile
Checked in Chrome, Safari, Edge, and Firefox

- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
~~- [ ] Checked Code Sandbox works for any docs examples~~

Added or updated jest and cypress tests

~~- [ ] Checked for breaking changes and labeled appropriately~~

Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

- adding xScroll at least allows users to access the overflowing content

cee-chen · 2022-01-25T22:44:46Z

src/components/table/table_pagination/table_pagination.tsx

@@ -121,6 +121,7 @@ export class EuiTablePagination extends Component<
        justifyContent="spaceBetween"
        alignItems="center"
        responsive={false}
+        className="eui-xScroll"


Just wanted to note while this isn't the most "smart" solution, I think it's the one with the best tradeoffs.

The "smartest" pagination would be one that has a resize observer on itself and the underlying EuiPagination to make sure the width of one doesn't exceed the right bound of the other, but I strongly don't think the extra listeners and perf overhead are worth it vs. a simple overflow-x: auto;.

IMO, extremely small tables/grids are an edge case that we don't need to add a bunch of code for, and should mostly be caught by the responsive behavior of EuiPagination. Providing some way of accessing the overflowing UI via scrollbars should be sufficient until the day container queries become fully standard and we can just use those instead 🙏

kibanamachine · 2022-01-25T23:22:17Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5561/

kibanamachine · 2022-01-25T23:58:24Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5561/

miukimiu

Thanks @constancecchen! 🎉

It's looking great. I just found some issues in Safari 15.2:

Issue 1 in Safari

When clicking a pagination number the .euiDataGridBody outline appears and we see a black border on top of the pagination. I think is safe to set the outline to none.

Issue 2 in Safari

Following you suggestion:

Click on page 200 in the first example
Click on page 196

The arrow right gets cutt off when we reach the end of the horizontal overflow as we can see on the following screenshot:

cee-chen · 2022-01-28T16:11:24Z

The black outline on Safari actually occurs on all data grids (including the main example) in production and isn't related to this specific PR - the underlying cause is likely in our focus JS. Is it okay if I file a separate issue for it and tackle it in another follow-up PR? EDIT: #5577

2nd issue is definitely valid though. Safari and flexbox - name a more iconic garbage duo 😑 I'll look into a fix!

cee-chen · 2022-01-28T18:17:07Z

@miukimiu I looked more into the Safari issue and it appears to be caused by the negative margins we use in our EuiFlexGroup gutter CSS (#5575). Because this issue would apply to all instances of EuiFlexGroup that are being scrolled horizontally in Safari, I think it's better solved at the higher EuiFlexGroup level rather than in this PR.

Would you feel okay also opening a separate issue for the problem and fixing it outside this PR? If not, the approach I would likely take is to rewrite the table pagination component completely to use custom flex CSS instead of the EuiFlexGroup components. Totally up to you though.

EDIT: In the meanwhile I've also reduced the gutter size on the flex group, which helps make the right arrow less cut off on Safari.

- for better small width/scroll behavior and to reduce Safari cutoff

…eui into datagrid/4458/pagination

kibanamachine · 2022-01-28T18:59:00Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5561/

kibanamachine · 2022-01-28T19:59:37Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5561/

kibanamachine · 2022-01-29T00:32:02Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_5561/

miukimiu

Thanks, @constancecchen.

Now we can see all the pagination items and that's the purpose of this PR. In Safari the black outline it's fixed (#5578) and the arrow is not being cut anymore.

So LGTM! 🎉

I'll open a new issue to see if we can have a better pagination design. The EuiFlexGroup gutter CSS (#5575) might improve a little bit the design but not for all scenarios.

cee-chen · 2022-01-31T17:52:32Z

Thanks a million @miukimiu!!

…w on narrow tables with many pages (elastic#5561) * Fix pagination rendering items out of view on small tables - adding xScroll at least allows users to access the overflowing content * Add changelog entry * Reduce gutter size - for better small width/scroll behavior and to reduce Safari cutoff * Update snapshots

Fix pagination rendering items out of view on small tables

90d3505

- adding xScroll at least allows users to access the overflowing content

cee-chen requested a review from chandlerprall January 25, 2022 22:38

Add changelog entry

33ae95e

chandlerprall requested review from miukimiu and removed request for chandlerprall January 25, 2022 22:44

cee-chen commented Jan 25, 2022

View reviewed changes

Merge branch 'main' into datagrid/4458/pagination

6f9b4c7

miukimiu suggested changes Jan 28, 2022

View reviewed changes

Merge branch 'main' into datagrid/4458/pagination

4903fe1

cee-chen mentioned this pull request Jan 28, 2022

[EuiFlexGroup] Switch gutter CSS from negative margins to gap #5575

Closed

6 tasks

cee-chen added 2 commits January 28, 2022 10:20

Reduce gutter size

0e86598

- for better small width/scroll behavior and to reduce Safari cutoff

Merge branch 'datagrid/4458/pagination' of github.com:constancecchen/…

0fdf8fb

…eui into datagrid/4458/pagination

cee-chen mentioned this pull request Jan 28, 2022

[EuiDataGrid] On pagination, focus is not properly restored to a valid data grid cell #5577

Closed

Update snapshots

cfedadb

Merge branch 'main' into datagrid/4458/pagination

54214b1

miukimiu self-requested a review January 31, 2022 17:24

miukimiu approved these changes Jan 31, 2022

View reviewed changes

cee-chen merged commit 2e285e8 into elastic:main Jan 31, 2022

cee-chen deleted the datagrid/4458/pagination branch January 31, 2022 17:54

cee-chen mentioned this pull request Jan 31, 2022

[EuiDataGrid] UX Cleanups #4458

Closed

breehall mentioned this pull request Feb 8, 2022

Upgrade EUI to v48.1.1 elastic/kibana#125023

Merged

cee-chen mentioned this pull request Feb 11, 2022

[8.1] Upgrade EUI to v46.1.1 elastic/kibana#125428

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDataGrid][EuiTables] Fix pagination potentially rendering out view on narrow tables with many pages #5561

[EuiDataGrid][EuiTables] Fix pagination potentially rendering out view on narrow tables with many pages #5561

cee-chen commented Jan 25, 2022 •

edited

Loading

cee-chen Jan 25, 2022 •

edited

Loading

kibanamachine commented Jan 25, 2022

kibanamachine commented Jan 25, 2022

miukimiu left a comment

cee-chen commented Jan 28, 2022 •

edited

Loading

cee-chen commented Jan 28, 2022 •

edited

Loading

kibanamachine commented Jan 28, 2022

kibanamachine commented Jan 28, 2022

kibanamachine commented Jan 29, 2022

miukimiu left a comment

cee-chen commented Jan 31, 2022

[EuiDataGrid][EuiTables] Fix pagination potentially rendering out view on narrow tables with many pages #5561

[EuiDataGrid][EuiTables] Fix pagination potentially rendering out view on narrow tables with many pages #5561

Conversation

cee-chen commented Jan 25, 2022 • edited Loading

Summary

Repro steps:

Before

After

Checklist

cee-chen Jan 25, 2022 • edited Loading

Choose a reason for hiding this comment

kibanamachine commented Jan 25, 2022

kibanamachine commented Jan 25, 2022

miukimiu left a comment

Choose a reason for hiding this comment

Issue 1 in Safari

Issue 2 in Safari

cee-chen commented Jan 28, 2022 • edited Loading

cee-chen commented Jan 28, 2022 • edited Loading

kibanamachine commented Jan 28, 2022

kibanamachine commented Jan 28, 2022

kibanamachine commented Jan 29, 2022

miukimiu left a comment

Choose a reason for hiding this comment

cee-chen commented Jan 31, 2022

cee-chen commented Jan 25, 2022 •

edited

Loading

cee-chen Jan 25, 2022 •

edited

Loading

cee-chen commented Jan 28, 2022 •

edited

Loading

cee-chen commented Jan 28, 2022 •

edited

Loading