Skip to content

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.

NameTypeDefaultDescription
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.
componentelementType
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.
getItemAriaLabelfuncfunction 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').
labelDisplayedRowsfuncfunction 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.
labelRowsPerPagenode'Rows per page:'
Customize the rows per page label.
For localization purposes, you can use the provided translations.
onRowsPerPageChangefunc
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.
rowsPerPageOptionsArray<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