表格分页

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

简介

表格分页组件允许您向表格添加分页控件。它控制其父表格的两个属性

显示的页面索引
每页行数

组件

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

表格分页默认在其内部元素中渲染一个 <td> 标签，因此可以插入到表格的 <tr> 中。您可以使用 slots.root 属性来渲染不同的根元素——例如，如果您需要将分页控件放置在表格之外。请参阅自定义结构了解详情。

以下演示展示了表格页脚中自定义分页控件的示例，该控件跨越整行

甜点（Dessert）	卡路里（Calories）	脂肪（Fat）
冷冻酸奶（Frozen yoghurt）	159	6
冰淇淋三明治（Ice cream sandwich）	237	9
闪电泡芙（Eclair）	262	16
纸杯蛋糕（Cupcake）	305	3.7
棉花糖（Marshmallow）	318	0
每页行数 1–5 / 13

解剖结构

表格分页组件由一个根 <td> 组成，其中包含最多十个内部插槽

工具栏（toolbar）
间隔符（spacer）
选择标签（selectLabel）
选择根元素（selectRoot）
选择器（select）
选择图标（selectIcon）
输入框（input）
菜单项（menuItem）
显示的行数（displayedRows）
操作（actions）

<td class="base-TablePagination-root">
  <div class="base-TablePagination-toolbar">
    <div class="base-TablePagination-spacer"></div>
    <p class="base-TablePagination-selectLabel" id="mui-48">Rows per page:</p>
    <select class="base-TablePagination-select">
      <option class="base-TablePagination-menuItem">All</option>
    </select>
    <p class="base-TablePagination-displayedRows">1–5 of 13</p>
    <div class="base-TablePagination-actions">
      <button disabled="" aria-label="Go to first page" title="Go to first page">
        <span>|⇽</span>
      </button>
      <button
        disabled=""
        aria-label="Go to previous page"
        title="Go to previous page"
      >
        <span>⇽</span>
      </button>
      <button aria-label="Go to next page" title="Go to next page">
        <span>⇾</span>
      </button>
      <button aria-label="Go to last page" title="Go to last page">
        <span>⇾|</span>
      </button>
    </div>
  </div>
</td>

自定义结构

使用 slots 属性来覆盖根元素或任何其他内部插槽

<TablePagination slots={{ root: 'div', toolbar: 'nav' }} />

使用 slotProps 属性将自定义属性传递给内部插槽。以下代码片段将一个名为 my-spacer 的 CSS 类应用于间隔符插槽

<TablePagination slotProps={{ spacer: { className: 'my-spacer' } }} />

自定义

与 TypeScript 一起使用

在 TypeScript 中，您可以指定 slots.root 中使用的自定义组件类型作为非样式化组件的泛型参数。这样，您可以安全地在组件上直接提供自定义根元素的属性

<TablePagination<typeof CustomComponent>
  slots={{ root: CustomComponent }}
  customProp
/>

这同样适用于特定于自定义原始元素的属性

<TablePagination<'button'> slots={{ root: 'button' }} onClick={() => {}} />

自定义分页选项

您可以使用 rowsPerPageOptions 属性自定义 每页行数 选择器中显示的选项。此属性需要一个数字或对象数组

数字——每个数字都用于选项的标签和值。
```
<TablePagination rowsPerPageOptions={[10, 50]} />
```
对象——value 和 label 键分别用于选项的值和标签（对于诸如全部之类的标签很有用）。
```
<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />
```

自定义外观和感觉

以下演示展示了分页控件的另一个示例，但具有额外的样式自定义

甜点（Dessert）	卡路里（Calories）	脂肪（Fat）
冷冻酸奶（Frozen yoghurt）	159	6
冰淇淋三明治（Ice cream sandwich）	237	9
闪电泡芙（Eclair）	262	16
纸杯蛋糕（Cupcake）	305	3.7
棉花糖（Marshmallow）	318	0
每页行数 1–5 / 13