Skip to content

[Data Grid] Add hidePerPageOptions prop into EuiDataGridPaginationProps#3700

Merged
chandlerprall merged 8 commits intoelastic:masterfrom
sulemanof:data_grid/pagination_hide_per_page
Jul 23, 2020
Merged

[Data Grid] Add hidePerPageOptions prop into EuiDataGridPaginationProps#3700
chandlerprall merged 8 commits intoelastic:masterfrom
sulemanof:data_grid/pagination_hide_per_page

Conversation

@sulemanof
Copy link
Copy Markdown
Contributor

@sulemanof sulemanof commented Jul 7, 2020 •
edited
Loading

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.

image

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
Copy link
Copy Markdown

kibanamachine commented Jul 7, 2020

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?

@sulemanof sulemanof requested a review from chandlerprall July 7, 2020 11:25
@sulemanof sulemanof marked this pull request as ready for review July 7, 2020 11:25
chandlerprall
chandlerprall reviewed Jul 7, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

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

@sulemanof
Copy link
Copy Markdown
Contributor Author

sulemanof commented Jul 8, 2020

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:
pagination_props

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

pagination_props_hide

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

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Jul 8, 2020

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.

@sulemanof sulemanof requested a review from chandlerprall July 15, 2020 10:34
chandlerprall
chandlerprall suggested changes Jul 15, 2020
View reviewed changes
src/components/datagrid/data_grid.tsx Outdated
const pageCount = Math.ceil(props.rowCount / pageSize);

if (props.rowCount < pageSizeOptions[0]) {
if (pageCount <= 1) {
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall Jul 15, 2020

Choose a reason for hiding this comment

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

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.

Copy link
Copy Markdown
Contributor Author

@sulemanof sulemanof Jul 17, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

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
chandlerprall suggested changes Jul 22, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

One more request :)

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Jul 23, 2020

jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jul 23, 2020

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

chandlerprall
chandlerprall approved these changes Jul 23, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment •
edited
Loading

Choose a reason for hiding this comment

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

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.

@chandlerprall chandlerprall merged commit 499dedd into elastic:master Jul 23, 2020
@thompsongl thompsongl mentioned this pull request Jul 31, 2020
Merged
@snide snide mentioned this pull request Aug 8, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@chandlerprall chandlerprall chandlerprall approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@sulemanof @kibanamachine @chandlerprall