[Data Grid] Add hidePerPageOptions prop into EuiDataGridPaginationProps

[sulemanof]

Summary

Add hidePerPageOptions prop into EuiDataGridPaginationProps for EuiDataGrid pagination prop:

<EuiDataGrid
  pagination={{
      hidePerPageOptions: true,
      pageIndex: 1,
      pageSize: 20
  }}

In kibana Data table visualization the Rows per page is controlled by vis options tab, so it needs a possibility to hide choosing rows per page.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in IE11 and Firefox
• Props have proper autodocs
• Added documentation
• Checked Code Sandbox works for the any docs examples
• Added or updated jest 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

[kibanamachine]

Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually?

[chandlerprall]

Instead of a new prop for this, I feel making pageSizeOptions optional and/or checking for an empty array is a better approach.

[sulemanof]

Instead of a new prop for this, I feel making pageSizeOptions optional and/or checking for an empty array is a better approach.

I think it's a good idea.
Even more: I thought this should work firstly, so I tried it before and received an exception. So I would say it would be more evident for developers.

But my only concern is:
EuiDataGridPaginationProps and EuiTablePagination props have different props naming and usage of them is a bit confusing (at least for me). I need to check relations between those manually to use a feature:

I assume making such an approach will only cause additional confusing from usage perspective :

But if you feel it's good, I'm OK.
Maybe that's only my vision of complexity 🙂

[chandlerprall]

Yup, I think that's okay. Our existing component pagination prop types are all largely different between inmemorytable, basictable, tablepagination, and pagination. Not much unity to maintain between them, and supporting an empty pageSizeOptions is probably the better path forward.

[chandlerprall]

The reason this was previously props.rowCount < pageSizeOptions[0] is to keep the pagination controls around when switching to a large page size. For example, if there are 30 results and the page options are 5, 25, 50, switching the page size to 50 will cause the controls to disappear.

Maybe, if (props.rowCount < (pageSizeOptions[0] || pageSize)) { instead? Then it uses the active page size if there are no options.

[sulemanof]

Thanks for explanation, I didn't think about it at the first sight!
My only concern is: who guarantees the pageSizeOptions will be in ascending order?
An user can pass it like [100, 50, 25], right?
So I also placed a sorting function to be sure.

[chandlerprall]

One more request :)

[chandlerprall]

jenkins test this

[kibanamachine]

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

[chandlerprall]

Changes LGTM; Pulled & tested existing, empty, and non-existent pageSizeOptions locally. Also tested the logic in displaying page sizes selection when items < the smallest option.