EuiDataGrid: fixed Rows per page controls disappear when there's only a single page by anishagg17 · Pull Request #2978 · elastic/eui

anishagg17 · 2020-03-04T09:29:53Z

Summary

Fixes : #2972
fixed Rows per page controls disappear when there's only a single 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
Improved documentation 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 · 2020-03-04T09:29:56Z

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?

anishagg17 · 2020-03-04T10:07:26Z

@cchaos it was just a minor logical error in the onChangeItemsPerPage function of doc's

cchaos · 2020-03-04T15:02:22Z

Jenkins, test this

kibanamachine · 2020-03-04T15:20:01Z

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

cchaos · 2020-03-04T16:04:58Z

Thanks @anishagg17, this does fix part of the issue described in #2972 (but only for that one example). Could you update the rest of the examples to behave the same? Unless, @chandlerprall, you think there's a way for EuiDataGrid to handle this directly?

The other half of the issue is that EuiDataGrid, hides all pagination controls when there's only a single page. Meaning, once I've decided to display all 100 results per page, I can't get back to displaying only 25 per page.

anishagg17 · 2020-03-04T16:49:15Z

The other half of the issue is that EuiDataGrid, hides all pagination controls when there's only a single page. Meaning, once I've decided to display all 100 results per page, I can't get back to displaying only 25 per page.

I too noticed that issue and will soon fix that issue too.

chandlerprall · 2020-03-04T16:54:01Z

@chandlerprall, you think there's a way for EuiDataGrid to handle this directly?

Yep, the problematic logic is at

eui/src/components/datagrid/data_grid.tsx

Line 202 in 9bc89c0

if (pageCount === 1) {

…are less than current number of rows to datagrid

anishagg17 · 2020-03-04T19:36:04Z

@cchaos now both issues are fixed , you may have a look .

@chandlerprall you think there's a way for EuiDataGrid to handle this directly?

Don't you think users should have complete flexibility of their own and should reset pageIndex according to their need

cchaos · 2020-03-05T13:35:33Z

Jenkins, test this

kibanamachine · 2020-03-05T13:54:40Z

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

chandlerprall

Don't you think users should have complete flexibility of their own and should reset pageIndex according to their need

EuiDataGrid was built with that being the intention - the application can decide whether or not to reset the current page. Best practice is to reset (so thank you for updating the examples to act that way), but we've had the opposite functionality requested (or at least brought up) around EUIs tables, so the option is left to the application. So, long answer short, yes.

chandlerprall · 2020-03-05T18:15:39Z

src/components/datagrid/data_grid.tsx


  if (pageCount === 1) {
-    return null;
+    newPageSizeOptions = [];


I don't think we want to modify the page size options, for a few reasons:

the data may be filtered outside the grid, e.g. there's a search box on the page that is used to load new data; data sets of different sizes would change the availability of page sizes

this logic almost enforces pagination, as it keeps the page size under the total number of pages

an extension of the previous point, this artificial limiting would only apply once the pageCount is 1, meaning the available sizes could change after the user interacts with the original set of page sizes

@chandlerprall should I just return the normal pagination if the page count is 1 also

anishagg17 · 2020-03-06T11:47:48Z

@chandlerprall I noticed in my application that in
Data grid schemas and popovers section the table is passed pageSizeOptions : [5,10,25]
but it only has 5 items , and when page-size is switched to 25 their is no change in the table so I think it would be fine if we let pageSizeOptions unaltered and let is pass through the pagination even in case of a single page also.

anishagg17 · 2020-03-06T11:49:19Z

src/components/datagrid/data_grid.tsx

  const pageCount = Math.ceil(props.rowCount / pageSize);

-  if (pageCount === 1) {
+  if (props.rowCount === 0) {


I have removed pagination only if there is no content to render

chandlerprall · 2020-03-06T15:41:07Z

jenkins test this

kibanamachine · 2020-03-06T15:59:24Z

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

chandlerprall

Changes LGTM; Pulled & tested locally.

@cchaos are you good with the idea of always showing pagination except when the grid is told there are 0 rows of content?

cchaos · 2020-03-06T19:05:42Z

Hey @anishagg17 , @chandlerprall & @snide & I talked around this a bit and decided that the best experience for data grid users would be to only show the pagination controls IF the length of the data (total number of rows) is less than the lowest number of rows per page.

For example, since 10 is the lowest number in this list:

Then the pagination controls will hide if the table contains less than 10 rows.

Can you update the logic to support this?

…to minimum page size

anishagg17 · 2020-03-06T19:22:53Z

@cchaos Done !

cchaos · 2020-03-06T19:41:50Z

Jenkins, test this

kibanamachine · 2020-03-06T20:00:33Z

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

cchaos

Great, I think this works well! Just cleaned up the changelog language a bit

CHANGELOG.md

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

snide · 2020-03-06T21:06:40Z

Thanks for the PR!

anishagg17 · 2020-03-06T21:07:20Z

Thanks for merging @snide

fixed Rows per page controls disappear when there's only a single page

e7b7fbe

cchaos changed the title ~~fixed Rows per page controls disappear when there's only a single page~~ [Docs] EuiDataGrid: fixed Rows per page controls disappear when there's only a single page Mar 4, 2020

anishagg17 and others added 2 commits March 5, 2020 01:00

added reset page to all examples in docs and render page sizes which …

075e796

…are less than current number of rows to datagrid

Update CHANGELOG.md

0c3bbe3

chandlerprall suggested changes Mar 5, 2020

View reviewed changes

restored pageSizeOptions

e0fd7cd

anishagg17 requested a review from chandlerprall March 6, 2020 11:48

anishagg17 commented Mar 6, 2020

View reviewed changes

chandlerprall approved these changes Mar 6, 2020

View reviewed changes

cchaos changed the title ~~[Docs] EuiDataGrid: fixed Rows per page controls disappear when there's only a single page~~ EuiDataGrid: fixed Rows per page controls disappear when there's only a single page Mar 6, 2020

pagination renders if total number of rows are greater than or equal …

13b4ce1

…to minimum page size

chandlerprall approved these changes Mar 6, 2020

View reviewed changes

cchaos approved these changes Mar 6, 2020

View reviewed changes

CHANGELOG.md Outdated Show resolved Hide resolved

anishagg17 and others added 2 commits March 7, 2020 02:30

Update CHANGELOG.md

f9946ae

Co-Authored-By: Caroline Horn <549577+cchaos@users.noreply.github.com>

Merge branch 'master' into row

ef8233a

snide merged commit 4427816 into elastic:master Mar 6, 2020

anishagg17 deleted the row branch March 6, 2020 21:07

chandlerprall mentioned this pull request Mar 16, 2020

Upgrade EUI to 21.0.1 elastic/kibana#60282

Merged

Conversation

anishagg17 commented Mar 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

kibanamachine commented Mar 4, 2020

Uh oh!

anishagg17 commented Mar 4, 2020

Uh oh!

cchaos commented Mar 4, 2020

Uh oh!

kibanamachine commented Mar 4, 2020

Uh oh!

cchaos commented Mar 4, 2020

Uh oh!

anishagg17 commented Mar 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chandlerprall commented Mar 4, 2020

Uh oh!

anishagg17 commented Mar 4, 2020

Uh oh!

cchaos commented Mar 5, 2020

Uh oh!

kibanamachine commented Mar 5, 2020

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Uh oh!

chandlerprall Mar 5, 2020

Choose a reason for hiding this comment

Uh oh!

anishagg17 Mar 5, 2020

Choose a reason for hiding this comment

Uh oh!

anishagg17 commented Mar 6, 2020

Uh oh!

anishagg17 Mar 6, 2020

Choose a reason for hiding this comment

Uh oh!

chandlerprall commented Mar 6, 2020

Uh oh!

kibanamachine commented Mar 6, 2020

Uh oh!

chandlerprall left a comment

Choose a reason for hiding this comment

Uh oh!

cchaos commented Mar 6, 2020

Uh oh!

anishagg17 commented Mar 6, 2020

Uh oh!

cchaos commented Mar 6, 2020

Uh oh!

kibanamachine commented Mar 6, 2020

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

snide commented Mar 6, 2020

Uh oh!

anishagg17 commented Mar 6, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

anishagg17 commented Mar 4, 2020 •

edited

Loading

anishagg17 commented Mar 4, 2020 •

edited

Loading