Table Pagination

Table Pagination is an interface tool for splitting up large amounts of data to make it easier for users to navigate.

TablePagination API

Import

import { TablePagination } from '@mui/base/TablePagination';
// or
import { TablePagination } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
count*	number	-	The total number of rows. To enable server side pagination for an unknown number of items, provide -1.
onPageChange*	func	-	Callback fired when the page is changed. Signature:`function(event: React.MouseEvent \| null, page: number) => void` `event` The event source of the callback. `page` The page selected.
page*	integer	-	The zero-based index of the current page.
rowsPerPage*	integer	-	The number of rows per page. Set -1 to display all the rows.
getItemAriaLabel	func	function defaultGetAriaLabel(type: ItemAriaLabelType) { return `Go to ${type} page`; }	Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users. For localization purposes, you can use the provided translations. Signature:`function(type: string) => string` `type` The link or button type to format ('first' \| 'last' \| 'next' \| 'previous').
labelDisplayedRows	func	function defaultLabelDisplayedRows({ from, to, count }: LabelDisplayedRowsArgs) { return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; }	Customize the displayed rows label. Invoked with a `{ from, to, count, page }` object. For localization purposes, you can use the provided translations.
labelId	string	-	Id of the label element within the pagination.
labelRowsPerPage	node	'Rows per page:'	Customize the rows per page label. For localization purposes, you can use the provided translations.
onRowsPerPageChange	func	-	Callback fired when the number of rows per page is changed. Signature:`function(event: React.ChangeEvent) => void` `event` The event source of the callback.
rowsPerPageOptions	Array<number \| { label: string, value: number }>	[10, 25, 50, 100]	Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows.
selectId	string	-	Id of the select element within the pagination.
slotProps	{ actions?: func \| object, displayedRows?: func \| object, menuItem?: func \| object, root?: func \| object, select?: func \| object, selectLabel?: func \| object, spacer?: func \| object, toolbar?: func \| object }	{}	The props used for each slot inside the TablePagination.
slots	{ actions?: elementType, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }	{}	The components used for each slot inside the TablePagination. Either a string to use a HTML element or a component. See Slots API below for more details.

The ref is forwarded to the root element.