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';Props of the native component are also available.
The total number of rows.
To enable server side pagination for an unknown number of items, provide -1.
Type:number
Callback fired when the page is changed.
Type:func
function(event: React.MouseEvent | null, page: number) => void eventThe event source of the callback.pageThe page selected.
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.
Type:func
Default:function defaultGetAriaLabel(type: ItemAriaLabelType) {
return `Go to ${type} page`;
}
function(type: string) => stringtypeThe link or button type to format ('first' | 'last' | 'next' | 'previous').
Customize the displayed rows label. Invoked with a { from, to, count, page } object.
For localization purposes, you can use the provided translations.
Type:func
Default:function defaultLabelDisplayedRows({ from, to, count }: LabelDisplayedRowsArgs) {
return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
}
Customize the rows per page label.
For localization purposes, you can use the provided translations.
Type:node
Default:'Rows per page:'
Callback fired when the number of rows per page is changed.
Type:func
function(event: React.ChangeEvent) => void eventThe event source of the callback.
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.
Type:Array<number
| { label: string, value: number }>
Default:[10, 25, 50, 100]
The props used for each slot inside the TablePagination.
Type:{ actions?: func
| object, displayedRows?: func
| object, menuItem?: func
| object, root?: func
| object, select?: func
| object, selectLabel?: func
| object, spacer?: func
| object, toolbar?: func
| object }
Default:{}
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.
Type:{ actions?: elementType, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }
Default:{}
ref is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
The component that renders the root.
Class name: .base-TablePagination-root
Default component: 'td'
The component that renders the actions.
Class name: .base-TablePagination-actions
Default component: TablePaginationActions
The component that renders the select.
Class name: .base-TablePagination-select
Default component: 'select'
The component that renders the select label.
Class name: .base-TablePagination-selectLabel
Default component: 'p'
The component that renders the displayed rows.
Class name: .base-TablePagination-displayedRows
Default component: 'p'
The component that renders the toolbar.
Class name: .base-TablePagination-toolbar
Default component: 'div'
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.