TablePaginationUnstyled API

API documentation for the React TablePaginationUnstyled component. Learn about the available props and the CSS API.

Import

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

You can learn about the difference by reading this guide on minimizing bundle size.

A pagination for tables.

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<HTMLButtonElement> \| 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.
component	elementType		The component used for the root node. Either a string to use a HTML element or a component.
components	{ 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.
componentsProps	{ actions?: object, displayedRows?: object, menuItem?: object, root?: object, select?: object, selectLabel?: object, spacer?: object, toolbar?: object }	{}	The props used for each slot inside the TablePagination.
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.
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<HTMLTextAreaElement \| HTMLInputElement>) => 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.

The ref is forwarded to the root element.

Demos

Tables