Pagination

Client-side pagination out of the box, or server-side by providing rowCount and paginating in your fetch handler.

Loading demo…

<DataTable
  columns={columns}
  data={data}
  enablePagination
  initialState={{ pagination: { pageIndex: 0, pageSize: 10 } }}
  onPaginationChange={(p) => console.log(p)}
/>

Page-size options

Customise the rows-per-page choices with rowsPerPageOptions (default [5, 10, 25, 50, 100]); pass [] to hide the selector. Replace the whole footer with slots.pagination.

Loading demo…

<DataTable columns={columns} data={data} enablePagination rowsPerPageOptions={[3, 6, 12]} />

Props

Prop	Type	Default	Description
enablePagination	boolean	false	Show the pagination footer.
paginationMode	'client' | 'server'	'client'	Paginate locally or on the server.
rowsPerPageOptions	number[]	[5,10,25,50,100]	Page-size choices ([] hides the selector).
rowCount	number	—	Server total row count (server mode).
onPaginationChange	(pagination) => void	—	Page index/size changed.

Server-side

Set paginationMode="server" and pass rowCount (the server total). The grid sends the current page index/size to onFetchData and renders just the returned page.