[EuiBasicTable] Fixed number of rows for table

[smith]

Sometimes we would like to have a table that's a certain height. For example, in elastic/kibana#81135, we have tables with fixed height that can have 0-5 rows on the page.

We would like to be able to specify a fixed number rows that would make it so the table is always the same height and "pin" the pagination controls to the bottom. (We hacked together something that does this here https://github.com/elastic/kibana/pull/83360/files#diff-5dd9d72bca046db230734fcecb97df2d62159338286931cc38ea787349648e05R24-R56.)

[github-actions]

👋 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.

[snide]

This is essentially how Data Grid works. You can see an example here. https://elastic.github.io/eui/#/tabular-content/data-grid-styling-and-control#data-grid-adapts-to-its-container

Curious if that would work, or if you specifically need EuiBasicTable specifically?

[smith]

Curious if that would work, or if you specifically need EuiBasicTable specifically?

@snide we're doing this in the context of the APM service overview, where there's a fixed-height chart next to a table, which is related and fixed at the same height.

Having the table be fixed height works without any modifications, but if you have pagination controls they are directly below the end of the table and move up and down depending on how many rows are visible in the table. The CSS linked on the issue description is what we did to "pin" the pagination controls to always be at the bottom of the panel.

I'm sure EuiDataGrid would work in this situation, but we're using EuiBasicTable in most places in APM so we haven't tried it.

[cchaos]

In your specific case, it seems that you are limiting the table to always 5 rows, and using that calculated height to apply to your chart. But you're showing pagination when there's only a single page (which is when there are less than 5 rows). It seems you just need to not show the pagination when there are less than 5 rows.

Yes this might still shift the pagination up on the last page, but that's a different solution.

[github-actions]

👋 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]

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