表格分頁

表格分頁是一個介面工具，用於分割大量資料，以便使用者更輕鬆地瀏覽。

簡介

表格分頁組件可讓您將分頁控制項新增至表格。它控制其父表格的兩個屬性

顯示的頁面索引
每頁的列數

組件

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

表格分頁預設在其內部的 <td> 標籤中渲染元素，因此可以插入表格的 <tr> 中。您可以使用 slots.root 屬性來渲染不同的根元素——例如，如果您需要將分頁控制項放置在表格之外。請參閱自訂結構以了解詳細資訊。

以下示範顯示了表格頁尾中自訂分頁控制項的範例，該頁尾跨越整列

甜點	卡路里	脂肪
冷凍優格	159	6
冰淇淋三明治	237	9
閃電泡芙	262	16
杯子蛋糕	305	3.7
棉花糖	318	0
每頁列數 1–5 / 13

解剖結構

表格分頁組件由一個根 <td> 組成，最多可容納十個內部 slot

工具列
間隔
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 屬性來覆寫根 slot 或任何其他內部 slot

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

使用 slotProps 屬性將自訂 props 傳遞到內部 slot。以下程式碼片段將名為 my-spacer 的 CSS 類別套用至間隔 slot

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

自訂

與 TypeScript 一起使用

在 TypeScript 中，您可以將 slots.root 中使用的自訂組件類型指定為unstyled 組件的泛型參數。這樣，您可以安全地在組件上直接提供自訂根的 props

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

相同的道理也適用於自訂原始元素特定的 props

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

自訂分頁選項

您可以使用 rowsPerPageOptions 屬性自訂每頁列數選擇器中顯示的選項。此屬性需要數字或物件的陣列

數字——每個數字都用於選項的標籤和值。
```
<TablePagination rowsPerPageOptions={[10, 50]} />
```
物件——value 和 label 鍵分別用於選項的值和標籤（適用於全部等標籤）。
```
<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />
```

自訂外觀和風格

以下示範顯示了另一個分頁控制項的範例，但具有額外的樣式自訂

甜點	卡路里	脂肪
冷凍優格	159	6
冰淇淋三明治	237	9
閃電泡芙	262	16
杯子蛋糕	305	3.7
棉花糖	318	0
每頁列數 1–5 / 13