Pagination
Aligned with J&J DS v1.2 (Figma 12632:16974 / 16952). Paginationis the data-table footer with rows-per-page + first/prev/next/last + “X of Y”. PaginationThumbnail is the carousel companion.
Data-table pagination
Rows per page
1–25 of 183
1 / 8
Show sourceHide source
<Pagination
page={page}
pageSize={pageSize}
total={183}
onPageChange={setPage}
onPageSizeChange={setPageSize}
/>Read-only — no rows-per-page
Omit `onPageSizeChange` to drop the rows-per-page selector. Useful when the page size is fixed.
1–25 of 183
1 / 8
Show sourceHide source
<Pagination page={page} pageSize={25} total={183} onPageChange={setPage} />Empty result set
When `total` is 0 the controls disable themselves.
0–0 of 0
1 / 1
Show sourceHide source
<Pagination page={1} pageSize={25} total={0} onPageChange={…} />Carousel pagination — thumbnails
Active thumbnail highlights with the brand-blue focus ring. Click or use the prev/next chevrons to navigate.
Show sourceHide source
<PaginationThumbnail items={SLIDES} value={slide} onSelect={setSlide} />Carousel pagination — no arrows
Omit the prev/next chevrons when the strip itself is the only navigator.
Show sourceHide source
<PaginationThumbnail items={SLIDES} value={slide} onSelect={setSlide} showArrows={false} />