Pagination

The table pages its rows by default, ten to a page, with a page-size menu and first / previous / next / last buttons below the rows.

Page size and starting page

useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  pageSizeOptions: [10, 25, 50],
  initialState: { pagination: { pageIndex: 0, pageSize: 25 } },
})

How the controls look

• paginationDisplayMode: "default" — the row range ("1–10 of 48") with first / previous / next / last buttons.
• paginationDisplayMode: "pages" — numbered page buttons.
• paginationDisplayMode: "custom" — no built-in controls; render your own in renderBottomToolbarCustomActions, or place the exported DataTablePagination anywhere (see Composition).

positionPagination puts the controls at the "bottom" (default), "top", "both" or "none".

Turning it off

enablePagination: false shows every row. Pair it with a bounded surface and virtualization for long lists, or with infinite scroll.

Server pagination

Set manualPagination: true, pass the total rowCount, and control state.pagination with onPaginationChange; the table renders the page you give it. See Server-side data.

Behavior worth knowing

• Changing a filter or the search goes back to the first page.
• When rows go away (a delete, a refetch) and the current page no longer exists, the table moves to the last page that does — except while isLoading, so a refetch doesn't jump pages.
• The range text and page numbers follow the table's language (localization.language).

Relevant options

Related