跳到内容
🚀 影响 MUI Base 2025 年路线图！参与最新的开发者调查
+

表格分页

表格分页是一个界面工具，用于拆分大量数据，以便用户更轻松地导航。

TablePagination API

导入

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

了解更多关于差异的信息，请阅读关于最小化捆绑包大小的指南。

Props

原生组件的 Props 也可用。

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

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

onPageChange*func-

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

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

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

rowsPerPage*integer-

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

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

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

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

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

labelIdstring-

分页中标签元素的 ID。

labelRowsPerPagenode'每页行数:'

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

onRowsPerPageChangefunc-

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

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

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

selectIdstring-

分页中选择元素的 ID。

slotProps{ actions?: func
| object, displayedRows?: func
| object, menuItem?: func
| object, root?: func
| object, select?: func
| object, selectLabel?: func
| object, spacer?: func
| object, toolbar?: func
| object }		{}

用于 TablePagination 内部每个插槽的 props。

slots{ actions?: elementType, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }{}

用于 TablePagination 内部每个插槽的组件。可以是 HTML 元素的字符串或组件。

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


ref 被转发到根元素。

Slots

要了解如何自定义插槽，请查看覆盖组件结构指南。

插槽名称类名默认组件描述
root.base-TablePagination-root'td'渲染根组件的组件。
actions.base-TablePagination-actionsTablePaginationActions渲染操作的组件。
select.base-TablePagination-select'select'渲染选择器的组件。
selectLabel.base-TablePagination-selectLabel'p'渲染选择器标签的组件。
menuItem.base-TablePagination-menuItem'option'渲染菜单项的组件。
displayedRows.base-TablePagination-displayedRows'p'渲染显示行数的组件。
toolbar.base-TablePagination-toolbar'div'渲染工具栏的组件。
spacer.base-TablePagination-spacer'div'渲染间隔的组件。

CSS 类

这些类名对于使用 CSS 进行样式设置非常有用。当特定状态被触发时，它们会被应用于组件的插槽。

类名描述
.base-TablePagination-input应用于 Select 组件 root 元素的类名。
.base-TablePagination-selectIcon应用于 Select 组件 icon 类的类名。
.base-TablePagination-selectRoot应用于 Select 组件 root 元素的类名。