canonical / canonical/vanilla-framework

[Component amendment]: TablePagination

Open
#5,581 3 comments 0 reactions 0 assignees View on GitHub
Priority: Medium Tier: Apps WG: Validated
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:

Image

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:

Image

## 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.

Image

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.