Table 表格

表格展示数据组。 它们是完全可以自定义的。

表格以一目了然的方式显示信息，这样一来用户可以寻找规律并探索见解。 表格可以被内嵌在主要内容中，如 卡片（cards）。

表格可以包括：

• 对应的可视化效果
• 导航
• 一个用于查询和操作数据的工具

当在引入工具时，我们应将它们直接放在表格的上方或下方。

表格的结构

一个数据表格的顶部是标题行，并展示各列的名称，而后续的各行则是表格的数据。

若用户想要选择或操作数据，那则应该咋每一行加入复选框。

考虑到可访问性，表格的第一列应设置为 <th> 元素，而此元素附着了一个指定为 "row" 的 scope 属性。 这样一来，屏幕阅读器就可以通过行和列的名字，来定位到某个单元格的值。

简单的表格

一个没有多余装饰的简单例子。

紧凑的表格

这是一个简单紧凑型表格，并且没有多余的装饰。

排序 & 筛选

此示例演示了在表格内使用了 选择框组件（Checkbox） 以及单击选择行，而且这个表格带有一个自定义的 工具条组件（Toolbar）。 它也展示了如何使用 TableSortLabel 组件来给列标题添加样式。

这个表格已被赋予一个固定的宽度，您可以查看如何实现横向滚动。 在表格外部使用 TablePagination 组件，能够防止分页控件的滚动。 (以下的'Custom Table Pagination Action' （自定义表分页操作示例）展示了 TableFooter 中的分页。)

自定义表格

以下是自定义组件的一个示例。 您可以在重写文档页面中了解更多有关此内容的信息。

自定义的分页选项

通过 rowsPerPageOptions 属性，也可以自定义 "Rows per page" 显示的选择项。 你应该提供以下一种数组：

• 数字（numbers），而每个数字用作为选择项的标签（label）和值（value）。

    <TablePagination rowsPerPageOptions={[10, 50]} />

• 对象（objects），而 value 和 label 键则相应的对照选择项的标签（label）和值（value）（譬如，当有一个语言字符串为“All” 时你会受益匪浅）。

    <TablePagination rowsPerPageOptions={[10, 50, { value: -1, label: 'All' }]} />

自定义表格分页操作

通过 TablePagination 组件的 Action 属性，可以实现自定义操作。

固定表头

一个具有可滚动行和固定表头的表格示例。 它利用了 stickyheader 这个属性（⚠️不支持 IE11）。

合并的表格

一个简单的合并行 & 列的示例。

大型列表渲染

以下例子展示了将 react-virtualized 与 表格 组件一起使用的方法。 它能够渲染 200 行，并且可以轻松处理更多行。 可视化优化了整体的性能。

补充项目

对于更高级的用例，您可以利用：

material-table

material-table 是一款针对 React 的简洁有效的的数据库，它基于 Material-UI Table 并且添加了一些额外的功能。 而这个库则支持各种各样的使用案例（可编辑的，筛选，分组，排序，选择，国际化，树形数据等等）。 您可以查看以下这个库。

其他的

• dx-react-grid-material-ui：针对 Material-UI 的兼并对数据进行排序、搜索、筛选、分组、操作等功能的数据网格（付费的许可证）。
• mui-datatables：Material-UI 的响应式数据表格，包括筛选，排序，搜索等功能。
• tubular-react: 一个带有本地或者远程的数据来源的 Material-UI 表格。 它能够对数据进行筛选、排序、自由搜索、导出为本地 CSV 以及汇总。

可访问性

（WAI 教程：https://www.w3.org/WAI/tutorials/tables/）

Caption 字幕

字幕能够充当表格的表头。 大多数屏幕阅读器能够宣读字幕的内容。 字幕能够帮助用户找到一个表格，并且描述这个表格的内容，从而协助用户决定是不是想继续阅读这个表格。

API

• <Table />
• <TableBody />
• <TableCell />
• <TableContainer />
• <TableFooter />
• <TableHead />
• <TablePagination />
• <TableRow />
• <TableSortLabel />