Skip to content
Compositions

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 "@instruments/materia-ui/compositions/data-grid-pagination";

Best practices

  • Render inside a DataGrid whose table has paginatedRowModel: createPaginatedRowModel() wired - it reads table.state.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

PropTypeDefaultDescription
classNamestring
ellipsisTextstring"..."

Label for the button that jumps past a collapsed page group.

infostring"{from} - {to} of {count}"

Range-summary template; {from}, {to}, and {count} are substituted.

infoSkeletonReactNode

Placeholder rendered in place of the range summary while loading.

morebooleantrue

Collapse the page buttons into groups of moreLimit, with ellipsis buttons that jump to the next or previous group. Off shows a button for every page.

moreLimitnumber5

Number of page buttons shown before collapsing to an ellipsis. Needs more.

nextPageLabelstring"Go to next page"

Accessible label for the next-page arrow button.

previousPageLabelstring"Go to previous page"

Accessible label for the previous-page arrow button.

rowsPerPageLabelstring"Rows per page"

Label preceding the rows-per-page select.

sizesnumber[][5, 10, 25, 50, 100]

Page-size options offered by the rows-per-page select.

sizesSkeletonReactNode

Placeholder rendered in place of the rows-per-page select while loading.

Also exports

  • interfaceDataGridPaginationProps

Composition

Builds on

Button, DataGrid, Flex, Select, Skeleton