[EuiDataGrid] Show footer when there is less than `pageSize` rows

[j-m]

Just upgraded from 31.0.0 to 31.12.0 and spotted that datagrids with less than pageSize rows don't show the pageSizeOptions or pagination components. However, they still take up pageSize * rowHeight - footerHeight space. As soon as there is exactly pageSize rows, the footer is displayed, even though there is only 1 page.

I would like the footer to always be shown to avoid cumulative layout shift when the number of rows changes.

[j-m]

As an example, using the sandbox of the first DataGrid example, change line 42 to for (let i = 0; i < 9; i++) {

This issue is very noticeable when a table with no footer (i.e. fewer than pageSize rows) is next to a table with a footer.

Worth noting that this issue is tied to the minimum of pageSizeOptions. For example, if pageSizeOptions={[10,50,100]} and the default pageSize is fetched from localstorage as 50, and there are 10<x<50 rows, the footer is displayed.

I see this problem often as I set pageSizeOptions={[5, 10, 20, 50,100]} but my default pageSize is rarely 5.

[cee-chen]

@snide @chandlerprall is this actually a bug? This appears to be a conscious design decision per our code comments.

https://github.com/elastic/eui/blob/dff7a774b7065119838a3791ae77c9536f2ccf4c/src/components/datagrid/utils/data_grid_pagination.tsx#L48-L55

[chandlerprall]

Agreed that this would be a change to an intentional decision. Maybe we could add an option to opt into a behaviour, and we should probably decide that at a larger pagination-across-eui level. I'll add this as a question to the team's sync doc for next week.

[cchaos]

We've actually discussed this at length now as to what the guidelines should be for pagination during certain states of the table.

We have an open PR that adds pagination guidelines including implementing some of these directly into the component such as:

Keep the choices simple and only show “Rows per page” if there are more rows than the smallest option. For example, if there are only 9 rows and the smallest option is 10 rows per page, hide the selector.

Though I think the EuiDataGrid implementation may still not match up to these new guidelines and we should check the logic.

[j-m]

Keep the choices simple and only show “Rows per page” if there are more rows than the smallest option. For example, if there are only 9 rows and the smallest option is 10 rows per page, hide the selector.

I agree, but only if there is 1 table on the page. I have dashboard and summary pages that have multiple tables next to each other. It looks odd having it visible for some tables and not others; adding an opt-in to always show pagination would be perfect

[github-actions[bot]]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions[bot]]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.