Table 表格

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

Tables display information in a way that's easy to scan, so that users can look for patterns and insights. 表格可以被内嵌在主要内容中，如 卡片（cards）。 表格可以被内嵌在主要内容中，如 卡片（cards）。 它们可以包括：

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

基础表格

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

数据表格

Table 组件与原生 <table> 元素存在密切关联。 这种限制条件导致要构建丰富的数据表格会变得很有挑战性。

DataGrid 组件 专为需要处理大量表格数据的情况而设计。 虽然它的结构相比之下不够灵活，但是有失必有得，牺牲灵活性来换取更强大的功能。

紧凑型表格

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

排序 & 选择

此示例演示了在表格内使用了 选择框组件（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）。

按列分组

你可以在一个表头内渲染多个表行来分组列头：

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

可折叠的表格

以可扩展行的表格为例，揭示更多信息。 它利用了 Collapse 组件。

跨越表格（Spanning Table）

一个行和列跨越的简单例子。

大型列表渲染（Virtualized Table）

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

无障碍设计

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

Caption 字幕

字幕能够充当表格的表头。 大多数屏幕阅读器能够宣读字幕的内容。 Captions help users to find a table and understand what it's about and decide if they want to read it.

API

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