跳到主要内容跳到主要内容
🚀 影响 Material UI 2025 年路线图！参与最新的开发者调查

TablePaginationAPI

React TablePagination 组件的 API 参考文档。 了解此导出模块的 props、CSS 和其他 API。

演示

导入

import TablePagination from '@mui/material/TablePagination';
// or
import { TablePagination } from '@mui/material';

阅读关于最小化 bundle size 的指南，了解它们之间的区别。



一个基于 TableCell 的组件，用于放置在 TableFooter 中以进行分页。

Props

TableCell 组件的 props 也可用。

名称类型默认值描述
count*integer-

总行数。
要为未知数量的项目启用服务端分页，请提供 -1。

onPageChange*func-

当页面更改时触发的回调。

签名：function(event: React.MouseEvent | null, page: number) => void
  • event 回调的事件源。
  • page 选定的页面。
page*integer-

当前页面的从零开始的索引。

rowsPerPage*integer-

每页的行数。
设置 -1 以显示所有行。

ActionsComponentelementTypeTablePaginationActions

用于显示操作的组件。 可以是用于 HTML 元素的字符串或组件。

backIconButtonPropsobject-

应用于后退箭头 IconButton 组件的 Props。
此 prop 是 slotProps.actions.previousButton 的别名，如果两者都使用，它将被后者覆盖。

classesobject-

覆盖或扩展应用于组件的样式。

有关更多详细信息，请参阅下面的 CSS 类 API。

componentelementType-

用于根节点的组件。 可以是用于 HTML 元素的字符串或组件。

disabledboolfalse

如果为 true，则组件被禁用。

getItemAriaLabelfuncfunction defaultGetAriaLabel(type) { return `转到 ${type} 页面`; }

接受一个函数，该函数返回一个字符串值，为当前页面提供用户友好的名称。 这对于屏幕阅读器用户非常重要。
出于本地化目的，您可以使用提供的翻译。

签名：function(type: string) => string
  • type 要格式化的链接或按钮类型（'first' | 'last' | 'next' | 'previous'）。
labelDisplayedRowsfuncfunction defaultLabelDisplayedRows({ from, to, count }) { return `${from}–${to} 共 ${count !== -1 ? count : `超过 ${to}`}`; }

自定义显示的行标签。 使用 { from, to, count, page } 对象调用。
出于本地化目的，您可以使用提供的翻译。

labelRowsPerPagenode'每页行数：'

自定义每页行数标签。
出于本地化目的，您可以使用提供的翻译。

nextIconButtonPropsobject-

应用于下一个箭头 IconButton 元素的 Props。
此 prop 是 slotProps.actions.nextButton 的别名，如果两者都使用，它将被后者覆盖。

onRowsPerPageChangefunc-

当每页的行数更改时触发的回调。

签名：function(event: React.ChangeEvent) => void
  • event 回调的事件源。
rowsPerPageOptionsArray<number
| { label: string, value: number }>		[10, 25, 50, 100]

自定义每页行数选择字段的选项。 如果可用选项少于两个，则不会显示选择字段。 使用 -1 作为带有自定义标签的值以显示所有行。

SelectPropsobject{}

应用于每页行数 Select 元素的 Props。
此 prop 是 slotProps.select 的别名，如果两者都使用，它将被后者覆盖。

showFirstButtonboolfalse

如果为 true，则显示第一页按钮。

showLastButtonboolfalse

如果为 true，则显示最后一页按钮。

slotProps{ actions?: { firstButton?: object, firstButtonIcon?: object, lastButton?: object, lastButtonIcon?: object, nextButton?: object, nextButtonIcon?: object, previousButton?: object, previousButtonIcon?: object }, displayedRows?: func
| object, menuItem?: func
| object, root?: func
| object, select?: object, selectLabel?: func
| object, spacer?: func
| object, toolbar?: func
| object }		{}

用于每个内部 slot 的 props。

slots{ actions?: { firstButton?: elementType, firstButtonIcon?: elementType, lastButton?: elementType, lastButtonIcon?: elementType, nextButton?: elementType, nextButtonIcon?: elementType, previousButton?: elementType, previousButtonIcon?: elementType }, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }{}

用于每个内部 slot 的组件。

sxArray<func
| object
| bool>
| func
| object		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关更多详细信息，请参阅 `sx` 页面。

ref 被转发到根元素。

继承

虽然上面没有明确记录，但 TableCell 组件的 props 也可在 TablePagination 中使用。 您可以利用这一点来定位嵌套组件。

主题默认 props

您可以使用 MuiTablePagination 通过主题更改此组件的默认 props。

Slots

Slot 名称类名默认组件描述
root.MuiTablePagination-rootTableCell渲染 root slot 的组件。 请遵循本指南以了解有关此组件要求的更多信息。
toolbar.MuiTablePagination-toolbarToolbar渲染 toolbar slot 的组件。 请遵循本指南以了解有关此组件要求的更多信息。
spacer.MuiTablePagination-spacer'div'渲染 spacer slot 的标签。
selectLabel.MuiTablePagination-selectLabel'p'渲染 selectLabel slot 的标签。
select.MuiTablePagination-selectSelect渲染 select slot 的组件。 请遵循本指南以了解有关此组件要求的更多信息。
menuItem.MuiTablePagination-menuItemMenuItem渲染 select slot 的组件。 请遵循本指南以了解有关此组件要求的更多信息。
displayedRows.MuiTablePagination-displayedRows'p'渲染 displayedRows slot 的标签。
actions.MuiTablePagination-actions传递到 actions slot 的 slots。

CSS 类

这些类名对于使用 CSS 设置样式很有用。 当触发特定状态时，它们会应用于组件的 slots。

类名规则名称描述
.MuiTablePagination-inputinput应用于 Select 组件 root 元素的样式。
.MuiTablePagination-selectIconselectIcon应用于 Select 组件 icon 类的样式。
.MuiTablePagination-selectRootselectRoot应用于 Select 组件 root 元素的样式。

您可以使用以下自定义选项之一覆盖组件的样式

源代码

如果您在此页面中没有找到所需信息，请考虑查看组件的实现以获取更多详细信息。