PageSize
$ npx shadcn@latest add https://lacodda.github.io/dowel/r/page-size.jsonIts own component rather than part of Pagination. The two usually sit together and are needed apart often enough to be separate: a list that scrolls for ever wants “how many to load at a time” and no page buttons, and a table with a fixed page size wants the buttons and no choice.
<PageSize pageSize={pageSize} onPageSizeChange={(size) => { setPageSize(size); setPage(1) }} label="Rows per page"> Rows per page</PageSize>A Select, never a native one. It is the
control most likely to reintroduce a <select>, since it is three numbers in a
box and looks like the case where it would not matter. The line’s rule has no
exception for small controls, and this is the one that tests it.
It hands back a number, not the text of one. The trigger’s value is a
string, because that is what a Select carries; a caller receiving "50" would
put it in OFFSET n * pageSize and get string concatenation.
label is required and separate from children. The first names the
control for a screen reader; the second is the visible text beside it, for when
there is room. A control that has only the visible one is unnamed the moment
the layout drops it.
Props
Read from the types in ui/page-size.tsx, the file a product copies - so the description of each prop is also what an editor shows over it there.
| Prop | Type | Default | |
|---|---|---|---|
pageSizerequired | number | The current number of rows per page. Should be one of options. | |
options | number[] | [10, 25, 50, 100] | The sizes offered, in the order they are listed. |
onPageSizeChangerequired | (pageSize: number) => void | Called with the chosen size as a number, not the select's string value. | |
labelrequired | string | Names the control for a screen reader, e.g. "Rows per page". | |
children | ReactNode | The visible label, when there is room for one. | |
className | string |
Accessibility
The examples on the stand, through axe 4.14.0 in a browser, in both themes, against WCAG 2.2 A and AA and axe's best practices: 16 rules applied and passed, and none failed. The accessibility report has every item.
History
Each release that changed ui/page-size.tsx - the file a product copies - newest first.