表格

表格用于展示数据集。它们可以完全自定义。

表格以易于扫描的方式显示信息，以便用户可以查找模式和见解。它们可以嵌入到主要内容中，例如卡片。它们可以包括

相应的可视化
导航
用于查询和操作数据的工具

简介

表格是使用相关组件的集合实现的

<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 组件专为专注于处理大量表格数据的用例而设计。虽然它具有更严格的结构，但作为交换，您将获得更强大的功能。

<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

请参阅下面的文档，以获取此处提及的组件的所有属性和类的完整参考。