Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA Rows per page select for a table footer that keeps the first visible row on screen when the size changes and announces what is shown.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this beside pagination controls in data tables and long lists.
Do not use it for infinite scroll, or offer more than five sizes.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
total | number | - | Total rows. |
page | number | - | Zero-based current page. |
pageSize | number | - | Rows per page. |
onPageSizeChange | (pageSize: number, page: number) => void | - | New size and the page that keeps the first row visible. |
sizes | number[] | [10, 25, 50, 100] | Offered sizes. |
status states "Showing 51 to 75 of 240", so the effect of a change is announced.| Key | Action |
|---|---|
| Enter or Space | opens the list |
| Arrow keys | move |
| Enter | chooses a size |
The pattern ships a Testing Library test (select-page-size.test.tsx) that covers the status line, keeping the first row on screen, the last range and an empty table.