Skip to content

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

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

Merged
cee-chen merged 8 commits into from
Jan 31, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
90d3505
Fix pagination rendering items out of view on small tables
cee-chen Jan 25, 2022
33ae95e
Add changelog entry
cee-chen Jan 25, 2022
6f9b4c7
Merge branch 'main' into datagrid/4458/pagination
constancecchen Jan 25, 2022
4903fe1
Merge branch 'main' into datagrid/4458/pagination
cee-chen Jan 28, 2022
0e86598
Reduce gutter size
cee-chen Jan 28, 2022
0fdf8fb
Merge branch 'datagrid/4458/pagination' of github.com:constancecchen/…
cee-chen Jan 28, 2022
cfedadb
Update snapshots
cee-chen Jan 28, 2022
54214b1
Merge branch 'main' into datagrid/4458/pagination
constancecchen Jan 28, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
- Fixed EuiDataGrid height issue when in full-screen mode and with scrolling content ([#5557](https://github.com/elastic/eui/pull/5557))
- Fixed a focus bug in `EuiDataGrid` when clicking another cell header with an already-open cell header popover ([#5556](https://github.com/elastic/eui/pull/5556))
- Fixed `EuiDataGrid` to always focus back into the grid on pagination ([#5587](https://github.com/elastic/eui/pull/5587))
- Fixed `EuiDataGrid` and `EuiTable` pagination potentially rendering out view on narrow tables with many pages ([#5561](https://github.com/elastic/eui/pull/5561))

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

Expand Down
4 changes: 3 additions & 1 deletion src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -361,11 +361,13 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
>
<EuiFlexGroup
alignItems="center"
className="eui-xScroll"
gutterSize="s"
justifyContent="spaceBetween"
responsive={false}
>
<div
className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow eui-xScroll"
>
<EuiFlexItem
grow={false}
Expand Down
2 changes: 1 addition & 1 deletion src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EuiDataGrid pagination renders 1`] = `
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow eui-xScroll"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down
4 changes: 2 additions & 2 deletions src/components/table/table_pagination/__snapshots__/table_pagination.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EuiTablePagination is rendered 1`] = `
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow eui-xScroll"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down Expand Up @@ -194,7 +194,7 @@ exports[`EuiTablePagination is rendered 1`] = `

exports[`EuiTablePagination is rendered when hiding the per page options 1`] = `
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow eui-xScroll"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
Expand Down
2 changes: 2 additions & 0 deletions src/components/table/table_pagination/table_pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,8 @@ export class EuiTablePagination extends Component<
justifyContent="spaceBetween"
alignItems="center"
responsive={false}
gutterSize="s"
className="eui-xScroll"
Copy link
Contributor Author

@cee-chen cee-chen Jan 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

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 🙏

>
<EuiFlexItem grow={false}>
{hidePerPageOptions ? null : itemsPerPagePopover}
Expand Down