DataGridPagination

Pagination footer for a DataGrid: a rows-per-page select, a range summary, and page navigation. Reads pagination state from the surrounding DataGrid context, so it must be rendered inside a DataGrid provider whose table has a pagination row model.

Rows per page

1 - 5 of 23

Usage

import { DataGridPagination, DataGridPaginationProps } from "@desk/ui/components/data-grid-pagination";

Best practices

Render inside a DataGrid whose table has getPaginationRowModel() wired — it reads table.getState().pagination from context and throws outside the provider.
For server-side paging, drive the table with manualPagination + pageCount and a controlled pagination state; the range summary uses recordCount, so pass the true total, not the page length.
Configure page-size choices via sizes (not by restyling the select), and localise the range text through the info template.

Props

Prop	Type	Default	Description
className	`string`
ellipsisText	`string`	`"..."`	Label for the button that jumps past a collapsed page group.
info	`string`	`"{from} - {to} of {count}"`	Range-summary template; `{from}`, `{to}`, and `{count}` are substituted.
infoSkeleton	`ReactNode`		Placeholder rendered in place of the range summary while loading.
more	`boolean`
moreLimit	`number`	`5`	Number of page buttons shown before collapsing to an ellipsis.
nextPageLabel	`string`	`"Go to next page"`	Accessible label for the next-page arrow button.
previousPageLabel	`string`	`"Go to previous page"`	Accessible label for the previous-page arrow button.
rowsPerPageLabel	`string`	`"Rows per page"`	Label preceding the rows-per-page select.
sizes	`number[]`	`[5, 10, 25, 50, 100]`	Page-size options offered by the rows-per-page select.
sizesDescription	`string`	`"per page"`
sizesInfo	`string`
sizesLabel	`string`	`"Show"`
sizesSkeleton	`ReactNode`		Placeholder rendered in place of the rows-per-page select while loading.

Also exports

interfaceDataGridPaginationProps

Composition

Builds on

Button, DataGrid, Select, Skeleton