TablePagination API
导入
import TablePagination from '@mui/material/TablePagination';
// 或
import { TablePagination } from '@mui/material';A TableCell based component for placing inside TableFooter for pagination.
组件名称
在主题中，名称“MuiTablePagination”可用于提供默认属性（props），或者样式覆盖属性
TableCell 组件的属性也是可用的。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| count* | integer | 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: object, 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. | |
| ActionsComponent | elementType | TablePaginationActions | The component used for displaying the actions. Either a string to use a HTML element or a component. |
| backIconButtonProps | object | Props applied to the back arrow IconButton component. | |
| 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. | |
| getItemAriaLabel | func | function defaultGetAriaLabel(type) { 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 }) { 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. |
| nextIconButtonProps | object | Props applied to the next arrow IconButton element. | |
| onRowsPerPageChange | func | Callback fired when the number of rows per page is changed. Signature: function(event: object) => 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. |
| SelectProps | object | {} | Props applied to the rows per page Select element. |
| showFirstButton | bool | false | If true, show the first-page button. |
| showLastButton | bool | false | If true, show the last-page button. |
| sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. |
ref 则会被传递到根元素中。继承
尽管上文没有明文记录， TableCell 组件 的属性(props) 在组件TablePagination上同样是可用的。 你可以利用这一点来 指向嵌套组件CSS
| 规则名称 | 全局类名 | 描述 |
|---|---|---|
| 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 `TablePaginationActions` component. |
您可以使用组件自定义选项对组件进行个性化：
- 具备 全局类名.
- 在自定义主体中，设定一个规则名称作为组件的
styleOverrides属性的一部分。