表格

表格顯示資料集。它們可以完全客製化。

表格以易於掃描的方式顯示資訊，以便使用者可以尋找模式和見解。它們可以嵌入在主要內容中，例如卡片。它們可以包含

對應的可視化
導航
用於查詢和操作資料的工具

簡介

表格是使用相關元件的集合來實作的

<TableContainer />：一個包裝器，為 <Table /> 元件提供水平滾動行為。
<Table />：表格元素的主要元件。預設渲染為 <table>。
<TableHead />：<Table /> 的標題列的容器。預設渲染為 <thead>。
<TableBody />：<Table /> 的主體列的容器。預設渲染為 <tbody>。
<TableRow />：表格中的列。可用於 <TableHead />、<TableBody /> 或 <TableFooter />。預設渲染為 <tr>。
<TableCell />：表格中的儲存格。可用於 <TableRow /> 中。預設在 <TableHead /> 中渲染為 <th>，在 <TableBody /> 中渲染為 <td>。
<TableFooter />：表格的頁尾列的選用容器。預設渲染為 <tfoot>。
<TablePagination />：一個提供表格資料分頁控制的元件。請參閱「排序和選擇」範例和「自訂表格分頁動作」範例。
<TableSortLabel />：一個用於顯示欄標題的排序控制元件，允許使用者以升序或降序排序資料。請參閱「排序和選擇」範例。

基本表格

一個沒有花俏功能的簡單範例。

甜點 (每 100 克份量)	卡路里	脂肪 (克)	碳水化合物 (克)	蛋白質 (克)
冷凍優格	159	6	24	4
冰淇淋三明治	237	9	37	4.3
閃電泡芙	262	16	24	6
杯子蛋糕	305	3.7	67	4.3
薑餅	356	16	49	3.9

資料表格

Table 元件與原生 <table> 元素有密切的對應關係。這種限制使得建立豐富的資料表格具有挑戰性。

DataGrid 元件專為專注於處理大量表格資料的使用情境而設計。雖然它的結構更 rigid，但作為交換，您可以獲得更強大的功能。

<Paper sx={{ height: 400, width: '100%' }}>
  <DataGrid
    rows={rows}
    columns={columns}
    initialState={{ pagination: { paginationModel } }}
    pageSizeOptions={[5, 10]}
    checkboxSelection
    sx={{ border: 0 }}
  />
</Paper>

<Paper sx={{ height: 400, width: '100%' }}>
  <DataGrid
    rows={rows}
    columns={columns}
    initialState={{ pagination: { paginationModel } }}
    pageSizeOptions={[5, 10]}
    checkboxSelection
    sx={{ border: 0 }}
  />
</Paper>

按下 Enter 開始編輯

精簡表格

一個沒有花俏功能的精簡表格的簡單範例。

甜點 (每 100 克份量)	卡路里	脂肪 (克)	碳水化合物 (克)	蛋白質 (克)
冷凍優格	159	6	24	4
冰淇淋三明治	237	9	37	4.3
閃電泡芙	262	16	24	6
杯子蛋糕	305	3.7	67	4.3
薑餅	356	16	49	3.9

排序和選擇

此範例示範如何使用 Checkbox 和可點擊的列進行選擇，以及自訂的 Toolbar。它使用 TableSortLabel 元件來協助樣式化欄標題。

表格已給定固定寬度以示範水平滾動。為了防止分頁控制項滾動，TablePagination 元件在表格外部使用。（下方的「自訂表格分頁動作」範例顯示表格頁尾內的分頁。）

營養成分

甜點 (每 100 克份量)	卡路里已排序 (升序)	脂肪 (克)	碳水化合物 (克)	蛋白質 (克)
冷凍優格	159	6	24	4
冰淇淋三明治	237	9	37	4.3
閃電泡芙	262	16	24	6
杯子蛋糕	305	3.7	67	4.3
棉花糖	318	0	81	2

精簡內距

客製化

以下是客製化元件的範例。您可以在覆寫文件頁面中了解更多相關資訊。

甜點 (每 100 克份量)	卡路里	脂肪 (克)	碳水化合物 (克)	蛋白質 (克)
冷凍優格	159	6	24	4
冰淇淋三明治	237	9	37	4.3
閃電泡芙	262	16	24	6
杯子蛋糕	305	3.7	67	4.3
薑餅	356	16	49	3.9

自訂分頁選項

可以使用 rowsPerPageOptions 屬性來自訂「每頁列數」選取器中顯示的選項。您應該提供一個陣列，其中包含

數字，每個數字將用於選項的標籤和值。
```
<TablePagination rowsPerPageOptions={[10, 50]} />
```
物件，value 和 label 鍵將分別用於選項的值和標籤 (適用於語言字串，例如 '全部')。
```
<TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />
```

自訂分頁動作

TablePagination 元件的 ActionsComponent 屬性允許實作自訂動作。

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

以下是一個具有可滾動列和固定欄標題的表格範例。它利用了 stickyHeader 屬性。

名稱	ISO 代碼	人口	面積 (平方公里)	密度
印度	IN	1,324,171,354	3,287,263	402.82
中國	CN	1,403,500,365	9,596,961	146.24
義大利	IT	60,483,973	301,340	200.72
美國	US	327,167,434	9,833,520	33.27
加拿大	CA	37,602,103	9,984,670	3.77
澳洲	AU	25,475,400	7,692,024	3.31
德國	DE	83,019,200	357,578	232.17
愛爾蘭	IE	4,857,000	70,273	69.12
墨西哥	MX	126,577,691	1,972,550	64.17
日本	JP	126,317,000	377,973	334.20

欄位分組

您可以透過在表格標題中渲染多個表格列來分組欄標題

<TableHead>
  <TableRow />
  <TableRow />
</TableHead>

國家		詳細資訊
名稱	ISO 代碼	人口	面積 (平方公里)	密度
印度	IN	1,324,171,354	3,287,263	402.82
中國	CN	1,403,500,365	9,596,961	146.24
義大利	IT	60,483,973	301,340	200.72
美國	US	327,167,434	9,833,520	33.27
加拿大	CA	37,602,103	9,984,670	3.77
澳洲	AU	25,475,400	7,692,024	3.31
德國	DE	83,019,200	357,578	232.17
愛爾蘭	IE	4,857,000	70,273	69.12
墨西哥	MX	126,577,691	1,972,550	64.17
日本	JP	126,317,000	377,973	334.20

可摺疊表格

具有可展開列的表格範例，顯示更多資訊。它使用了Collapse 元件。

甜點 (每 100 克份量)	卡路里	脂肪 (克)	碳水化合物 (克)	蛋白質 (克)
冷凍優格	159	6	24	4

冰淇淋三明治	237	9	37	4.3

閃電泡芙	262	16	24	6

杯子蛋糕	305	3.7	67	4.3

薑餅	356	16	49	3.9

跨欄表格

具有跨列和跨欄的簡單範例。

詳細資訊			價格
描述	數量	單位	總和
迴紋針 (盒)	100	1.15	115.00
紙張 (箱)	10	45.99	459.90
廢紙簍	2	17.99	35.98
	小計		610.88
	稅	7 %	42.76
	總計		653.64

虛擬化表格

在以下範例中，我們示範如何將 react-virtuoso 與 Table 元件一起使用。它渲染了 200 列，並且可以輕鬆處理更多列。虛擬化有助於解決效能問題。

名字	姓氏	年齡	州	電話號碼

<Paper style={{ height: 400, width: '100%' }}>
  <TableVirtuoso
    data={rows}
    components={VirtuosoTableComponents}
    fixedHeaderContent={fixedHeaderContent}
    itemContent={rowContent}
  />
</Paper>

<Paper style={{ height: 400, width: '100%' }}>
  <TableVirtuoso
    data={rows}
    components={VirtuosoTableComponents}
    fixedHeaderContent={fixedHeaderContent}
    itemContent={rowContent}
  />
</Paper>

按下 Enter 開始編輯

無障礙功能

(WAI 教學：https://www.w3.org/WAI/tutorials/tables/)

標題

標題的功能類似於表格的標題。大多數螢幕閱讀器會宣告標題的內容。標題幫助使用者找到表格並了解其內容，並決定是否要閱讀它。

具有標題的基本表格範例
甜點 (每 100 克份量)	卡路里	脂肪 (克)	碳水化合物 (克)	蛋白質 (克)
冷凍優格	159	6	24	4
冰淇淋三明治	237	9	37	4.3
閃電泡芙	262	16	24	6

未樣式化

如果您想使用未樣式化的表格，可以使用原始 HTML 元素並使用 TablePaginationUnstyled 元件增強表格。請參閱未樣式化表格分頁文件中的示範

API

請參閱以下文件，以取得此處提及的元件的所有屬性和類別的完整參考。