表格分頁

表格分頁是一個介面工具，用於拆分大量資料，使其更容易讓使用者瀏覽。

TablePagination API

Import

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 以顯示所有列。
getItemAriaLabel	func	function defaultGetAriaLabel(type: ItemAriaLabelType) { return `前往${type}頁面`; }	接受一個函數，該函數傳回一個字串值，為目前頁面提供使用者友善的名稱。這對於螢幕閱讀器使用者來說很重要。為了本地化目的，您可以使用提供的翻譯。簽名：`function(type: string) => string` `type` 要格式化的連結或按鈕類型 ('first' \| 'last' \| 'next' \| 'previous')。
labelDisplayedRows	func	function defaultLabelDisplayedRows({ from, to, count }: LabelDisplayedRowsArgs) { return `${from}–${to} / ${count !== -1 ? count : `超過 ${to}`}`; }	自訂顯示的列標籤。使用 `{ from, to, count, page }` 物件調用。為了本地化目的，您可以使用提供的翻譯。
labelId	string	-	分頁中標籤元素的 Id。
labelRowsPerPage	node	'每頁列數：'	自訂每頁列數標籤。為了本地化目的，您可以使用提供的翻譯。
onRowsPerPageChange	func	-	當每頁列數變更時觸發的回呼函數。簽名：`function(event: React.ChangeEvent) => void` `event` 回呼的事件來源。
rowsPerPageOptions	Array<number \| { label: string, value: number }>	[10, 25, 50, 100]	自訂每頁列數選取欄位的選項。如果可用選項少於兩個，則不會顯示選取欄位。使用值為 -1 和自訂標籤來顯示所有列。
selectId	string	-	分頁中選取元素的 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 內部每個 slot 的 props。
slots	{ actions?: elementType, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }	{}	用於 TablePagination 內部每個 slot 的元件。可以是字串（用於 HTML 元素）或元件。請參閱下方的 Slots API 以取得更多詳細資訊。

ref 轉發到根元素。

Slots

若要了解如何自訂 slot，請查看覆寫元件結構指南。

Slot 名稱	類別名稱	預設元件	描述
root	.base-TablePagination-root	`'td'`	呈現 root 的元件。
actions	.base-TablePagination-actions	`TablePaginationActions`	呈現 actions 的元件。
select	.base-TablePagination-select	`'select'`	呈現 select 的元件。
selectLabel	.base-TablePagination-selectLabel	`'p'`	呈現 select label 的元件。
menuItem	.base-TablePagination-menuItem	`'option'`	呈現 menu item 的元件。
displayedRows	.base-TablePagination-displayedRows	`'p'`	呈現 displayed rows 的元件。
toolbar	.base-TablePagination-toolbar	`'div'`	呈現 toolbar 的元件。
spacer	.base-TablePagination-spacer	`'div'`	呈現 spacer 的元件。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。它們在觸發特定狀態時應用於元件的 slots。

類別名稱	描述
.base-TablePagination-input	應用於 Select 元件 `root` 元素的類別名稱。
.base-TablePagination-selectIcon	應用於 Select 元件 `icon` 類別的類別名稱。
.base-TablePagination-selectRoot	應用於 Select 元件 `root` 元素的類別名稱。