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';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) => voidevent: 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. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| 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) => stringtype: 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>) => voidevent: 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.CSS
| Rule name | Global class | Description |
|---|---|---|
| root | .MuiTablePagination-root | Styles applied to the root element. |
| toolbar | .MuiTablePagination-toolbar | Styles applied to the Toolbar component. |
| spacer | .MuiTablePagination-spacer | Styles applied to the spacer element. |
| selectLabel | .MuiTablePagination-selectLabel | Styles applied to the select label Typography element. |
| selectRoot | .MuiTablePagination-selectRoot | Styles applied to the Select component `root` element. |
| select | .MuiTablePagination-select | Styles applied to the Select component `select` class. |
| selectIcon | .MuiTablePagination-selectIcon | Styles applied to the Select component `icon` class. |
| input | .MuiTablePagination-input | Styles applied to the Select component `root` element. |
| menuItem | .MuiTablePagination-menuItem | Styles applied to the MenuItem component. |
| displayedRows | .MuiTablePagination-displayedRows | Styles applied to the displayed rows Typography element. |
| actions | .MuiTablePagination-actions | Styles applied to the internal `TablePaginationUnstyledActions` component. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.