Page selector is not suitable for tables with many pages

Title line template: [Title]: Brief description

The page selector on https://pages.github.ibm.com/security/carbon-addons-security/branch/v2/?path=/story/components-datatablepagination--pagination-data-table component is not suitable for tables with many pages

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

The page selector on https://pages.github.ibm.com/security/carbon-addons-security/branch/v2/?path=/story/components-datatablepagination--pagination-data-table component that we are using in our app is unsuitable when there are many pages in the table - would it be possible to use a different component?

Expected behavior -

User should be able to enter a number to select the page via, for example, a TextInput or a NumberInput component

Actual behavior -

The control is a Select inside the Pagination component, and when there are many pages the it is displayed outside the confines of the browser page, and user has to scroll up and down to find the required page and then select it. This is not an acceptable User Experience.

Steps to reproduce the issue

1. Create around 650 entries in the data table pagination table
2. Select 10 items per page
3. Click on the page selector and observe it’s behaviour when trying to select a page, say page 60

Affected browsers All browsers, but worse on Chrome (as shown in screenshot)

[jendowns]

@tw15egan Sorry for the delay getting back to you – we are slowly working this out in @carbon/ibm-security 😅

The plan is to refactor the Pagination component to be more like “building blocks”, similar to the UIShell for example, so that way folks have several options to deal with this issue:

• Option 1 - do not include a child component we are calling the PageSelector (i.e., the select element that gets REALLY big when you have a bunch of numbers) at all.
• Option 2 - pass a size attribute to the PageSelector to reduce the height of the selector (allow you to scroll within it). This was a proposal originally in https://github.com/carbon-design-system/carbon/pull/4378 but the reviewers weren’t fond of it (understandably so, due to the way it looked) – BUT on our end we are at least going to give people this option.
• Option 3 - allow a number input instead of a select (this is not implemented yet & needs to be added)
• Option 4?? - due to the building blocks style approach here, theoretically a consumer could make their OWN “Page Selector” or whatever the case may be, and then handle these large page numbers in their own way.

Anyway, now the plan is to polish this refactored pagination component – currently called UNSTABLE__Pagination in our library & then propose it back up to Carbon. It would be a breaking change, for sure.

EDIT: our UNSTABLE__Pagination (work in progress) is here: https://ibm-security.carbondesignsystem.com/?path=/story/components-unstable-pagination--default Again I’m still working on the optional number input. But right now you can leave out the select element, if you want, which would help people dealing with a LOT of pages that creates a performance hit.

[designertyler]

@asudoh We mentioned a number input solution way back in https://github.com/carbon-design-system/carbon/pull/4378#issuecomment-546019688 and thought a number input would be a good solution for a large number of pages.

Carbon designers haven’t created design specs, @jendowns have you guys already done that for your option 3?