TableAPI

React Table 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

Demo

如需此 React 元件的使用範例和詳細資訊，請造訪元件 Demo 頁面

Table

Import

import Table from '@mui/joy/Table';
// or
import { Table } from '@mui/joy';

閱讀關於最小化 bundle size 的指南，以瞭解差異。

Props

名稱	類型	預設值	描述
borderAxis	'both' \| 'bothBetween' \| 'none' \| 'x' \| 'xBetween' \| 'y' \| 'yBetween' \| string	'xBetween'	在表格儲存格上顯示邊框的軸線。
children	node	-	表格的子元件
color	'danger' \| 'neutral' \| 'primary' \| 'success' \| 'warning' \| string	'neutral'	元件的顏色。它支援適用於此元件的主題顏色。若要瞭解如何新增自己的顏色，請查看主題元件—擴展顏色。
component	elementType	-	用於根節點的元件。可以是使用 HTML 元素的字串或元件。
hoverRow	bool	false	若為 `true`，表格列會在 hover 時顯示陰影。
noWrap	bool	false	若為 `true`，主體儲存格將不會換行，而是會以文字溢位省略符號截斷。注意：標頭儲存格始終以溢位省略符號截斷。
size	'sm' \| 'md' \| 'lg' \| string	'md'	元件的大小。它接受 'sm' 和 'lg' 之間的主題值。若要瞭解如何將自訂尺寸新增至元件，請查看主題元件—擴展尺寸。
slotProps	{ root?: func \| object }	{}	用於每個內部 slot 的 props。
slots	{ root?: elementType }	{}	用於每個內部 slot 的元件。請參閱下方的Slots API 以取得更多詳細資訊。
stickyFooter	bool	false	若為 `true`，footer 始終顯示在溢位表格的底部。
stickyHeader	bool	false	若為 `true`，header 始終顯示在溢位表格的頂部。
stripe	'odd' \| 'even' \| string	-	表格主體的奇數或偶數列將具有細微的背景顏色。
sx	Array<func \| object \| bool> \| func \| object	-	系統 prop，允許定義系統覆寫以及額外的 CSS 樣式。請參閱 `sx` 頁面以取得更多詳細資訊。
variant	'outlined' \| 'plain' \| 'soft' \| 'solid' \| string	'plain'	要使用的全域 variant。若要瞭解如何新增自己的 variants，請查看主題元件—擴展 variants。

ref 會轉發到根元素。

主題預設 props

您可以使用 JoyTable 透過主題變更此元件的預設 props。

Slots

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

Slot 名稱	Class 名稱	預設元件	描述
root	.MuiTable-root	`'table'`	呈現 root 的元件。

CSS classes

這些 class 名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會套用至元件的 slots。

Class 名稱	規則名稱	描述
.MuiTable-borderAxisBoth	borderAxisBoth	若 `borderAxis="both"`，則套用至根元素的 Class 名稱。
.MuiTable-borderAxisBothBetween	borderAxisBothBetween	若 `borderAxis="bothBetween"`，則套用至根元素的 Class 名稱。
.MuiTable-borderAxisNone	borderAxisNone	若 `borderAxis="none"`，則套用至根元素的 Class 名稱。
.MuiTable-borderAxisX	borderAxisX	若 `borderAxis="x"`，則套用至根元素的 Class 名稱。
.MuiTable-borderAxisXBetween	borderAxisXBetween	若 `borderAxis="xBetween"`，則套用至根元素的 Class 名稱。
.MuiTable-borderAxisY	borderAxisY	若 `borderAxis="y"`，則套用至根元素的 Class 名稱。
.MuiTable-borderAxisYBetween	borderAxisYBetween	若 `borderAxis="yBetween"`，則套用至根元素的 Class 名稱。
.MuiTable-colorContext	colorContext	當觸發顏色反轉時，套用至根元素的 Class 名稱。
.MuiTable-colorDanger	colorDanger	若 `color="danger"`，則套用至根元素的 Class 名稱。
.MuiTable-colorNeutral	colorNeutral	若 `color="neutral"`，則套用至根元素的 Class 名稱。
.MuiTable-colorPrimary	colorPrimary	若 `color="primary"`，則套用至根元素的 Class 名稱。
.MuiTable-colorSuccess	colorSuccess	若 `color="success"`，則套用至根元素的 Class 名稱。
.MuiTable-colorWarning	colorWarning	若 `color="warning"`，則套用至根元素的 Class 名稱。
.MuiTable-hoverRow	hoverRow	若 `hoverRow` 為 true，則套用至根元素的 Class 名稱。
.MuiTable-noWrap	noWrap	若 `noWrap` 為 true，則套用至根元素的 Class 名稱。
.MuiTable-sizeLg	sizeLg	若 `size="lg"`，則套用至根元素的 Class 名稱。
.MuiTable-sizeMd	sizeMd	若 `size="md"`，則套用至根元素的 Class 名稱。
.MuiTable-sizeSm	sizeSm	若 `size="sm"`，則套用至根元素的 Class 名稱。
.MuiTable-stickyFooter	stickyFooter	若 `stickyFooter` 為 true，則套用至根元素的 Class 名稱。
.MuiTable-stickyHeader	stickyHeader	若 `stickyHeader` 為 true，則套用至根元素的 Class 名稱。
.MuiTable-variantOutlined	variantOutlined	若 `variant="outlined"`，則套用至根元素的 Class 名稱。
.MuiTable-variantPlain	variantPlain	若 `variant="plain"`，則套用至根元素的 Class 名稱。
.MuiTable-variantSoft	variantSoft	若 `variant="soft"`，則套用至根元素的 Class 名稱。
.MuiTable-variantSolid	variantSolid	若 `variant="solid"`，則套用至根元素的 Class 名稱。

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

使用全域 class 名稱。
在自訂主題中使用規則名稱作為元件的 styleOverrides 屬性的一部分。

原始碼

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