canonical / canonical/vanilla-framework
[Component amendment]: TablePagination
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Component/pattern to amend
[Table Pagination Controls](https://canonical.github.io/react-components/?path=/story/components-tablepagination--controls-only)
## Context
The [Vanilla Pagination component](https://vanillaframework.io/docs/patterns/pagination#previous--next-buttons-only) currently documents that paginated datasets with an unknown number of total pages may omit the page number buttons in favor of just using Prev and Next buttons.
The React Components `TablePagination` component currently behaves as if the number of total items must always be known. If `totalItems` is not provided, the page summary message reads `Showing x out of undefined rows`, and shows a disabled page input field:
My intuition is that:
1. The page input field should not be visible when the total number of pages is unknown, following the [Vanilla guidelines](https://vanillaframework.io/docs/patterns/pagination#previous--next-buttons-only)
2. The page summary message should read something like "Showing x rows" or "Showing x rows out of x+ rows", when the total number of rows is unknown.
This would leave the component looking something like this:
## Reference
[Material UI](https://mui.com/x/react-data-grid/pagination/#cursor-based-pagination) handles this by indicating, for example, "1–5 of more than 5" and not showing any page jump inputs.
Contributor guide
Research direction
Start with the linked TablePagination Controls story and the Vanilla Pagination guidance for datasets with an unknown total. Inspect the behavior when totalItems is omitted and decide the appropriate summary wording and control visibility. Done means unknown totals no longer show an undefined count or page input, while Prev and Next remain usable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100