Reference | Client | Role | Status | Amount |
|---|---|---|---|---|
PRJ-001 | Riverside Studio | Designer | Confirmed | $180 |
PRJ-002 | Northgate Labs | Developer | Pending | $240 |
1-2 of 5
<DataTable.Root
columns={columns}
data={pageRows}
pagination={{ page, pageSize: 20, total, onPageChange: setPage }}
/>;The footer is server-shaped: it never slices your rows, it reports the page you should fetch.
API
| Prop | Type | Default | |
|---|---|---|---|
onPageChange | (page: number) => void | required | Called with the new zero-based index. This footer holds no state of its own. |
page | number | required | Zero-based page index. |
pageSize | number | required | Rows per page. Used with total to compute the page count and the range line. |
total | number | required | Total number of rows across all pages (server-side count). |
nextText | string | "Next" | Label for the next-page control. |
pageLabel | ((pageNumber: number) => string) | (pageNumber) => `Go to page ${pageNumber}` | Localizable aria-label for a page button; receives the 1-based number. |
previousText | string | "Previous" | Label for the previous-page control. This package ships no translations. |
rangeText | ((range: { from: number; to: number; total: number; }) => ReactNode) | ({ from, to, total: totalRows }) => `${from}-${to} of ${totalRows}` | Localizable "1-10 of 42" range line; receives 1-based row positions. |
siblingCount | number | 1 | Pages shown on each side of the current page (windowed with ellipses). |
Plus every <div> prop. Source: data-table/components/data-table-pagination.tsx.
page is zero-based, total is the row count across every page, and neither is
optional: this footer computes the page count rather than counting the rows it
was given, which is what lets it work against a server that sent only one page.
The text props exist because the package ships no translations.