跳到主要內容跳到主要內容
🚀 影響 Material UI 2025 年的藍圖！參與最新的開發者調查

TablePaginationAPI

React TablePagination 組件的 API 參考文檔。了解此導出模組的 props、CSS 和其他 API。

範例

匯入

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

透過閱讀這份關於最小化套件大小的指南，了解差異。



一個基於 TableCell 的組件，用於放置在 TableFooter 內以進行分頁。

Props

TableCell 組件的 Props 也可用。

名稱類型預設描述
count*整數-

總行數。
若要為未知數量的項目啟用伺服器端分頁，請提供 -1。

onPageChange*函式-

頁面變更時觸發的回呼。

簽名：function(event: React.MouseEvent | null, page: number) => void
  • event 回呼的事件來源。
  • page 選取的頁面。
page*整數-

目前頁面的從零開始的索引。

rowsPerPage*整數-

每頁的行數。
設定為 -1 以顯示所有行。

ActionsComponent元素類型TablePaginationActions

用於顯示動作的組件。可以是字串（用於 HTML 元素）或組件。

backIconButtonProps物件-

應用於後退箭頭 IconButton 組件的 Props。
此 prop 是 slotProps.actions.previousButton 的別名，如果兩者都使用，則會被其覆寫。

classes物件-

覆寫或擴展應用於組件的樣式。

詳情請參閱下方的 CSS 類別 API。

component元素類型-

用於根節點的組件。可以是字串（用於 HTML 元素）或組件。

disabled布林值false

如果為 true，則組件會停用。

getItemAriaLabel函式function defaultGetAriaLabel(type) { return `前往 ${type} 頁面`; }

接受一個函式，該函式傳回一個字串值，為目前頁面提供使用者友善的名稱。這對於螢幕閱讀器使用者來說很重要。
為了本地化目的，您可以使用提供的 翻譯。

簽名：function(type: string) => string
  • type 要格式化的連結或按鈕類型 ('first' | 'last' | 'next' | 'previous')。
labelDisplayedRows函式function defaultLabelDisplayedRows({ from, to, count }) { return `${from}–${to} / ${count !== -1 ? count : `超過 ${to}`}`; }

自訂顯示的行標籤。使用 { from, to, count, page } 物件調用。
為了本地化目的，您可以使用提供的 翻譯。

labelRowsPerPage節點'每頁行數：'

自訂每頁行數標籤。
為了本地化目的，您可以使用提供的 翻譯。

nextIconButtonProps物件-

應用於下一個箭頭 IconButton 元素的 Props。
此 prop 是 slotProps.actions.nextButton 的別名，如果兩者都使用，則會被其覆寫。

onRowsPerPageChange函式-

每頁行數變更時觸發的回呼。

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

自訂每頁行數選擇欄位的選項。如果少於兩個選項可用，則不會顯示選擇欄位。使用 -1 作為具有自訂標籤的值以顯示所有行。

SelectProps物件{}

應用於每頁行數 Select 元素的 Props。
此 prop 是 slotProps.select 的別名，如果兩者都使用，則會被其覆寫。

showFirstButton布林值false

如果為 true，則顯示第一頁按鈕。

showLastButton布林值false

如果為 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呈現 menuItem slot 的組件。請遵循本指南以了解有關此組件需求的更多資訊。
displayedRows.MuiTablePagination-displayedRows'p'呈現 displayedRows slot 的標籤。
actions.MuiTablePagination-actions傳遞到 actions slot 的 slots。

CSS 類別

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

類別名稱規則名稱描述
.MuiTablePagination-input輸入應用於 Select 組件 root 元素的樣式。
.MuiTablePagination-selectIcon選取圖示應用於 Select 組件 icon 類別的樣式。
.MuiTablePagination-selectRoot選取 Root應用於 Select 組件 root 元素的樣式。

您可以使用以下其中一種自訂選項來覆寫組件的樣式

原始碼

如果您在本頁中找不到資訊，請考慮查看 組件的實作以取得更多詳細資訊。