Table 表格
表格展示数据组。 它们是完全可以自定义的。
表格以一目了然的方式显示信息，这样一来用户可以寻找规律并探索见解。 表格可以被内嵌在主要内容中，如 卡片（cards）。
表格可以包括：
- 对应的可视化效果
- 导航
- 一个用于查询和操作数据的工具
当在引入工具时，我们应将它们直接放在表格的上方或下方。
基础表格
一个没有多余装饰的简单例子
| Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) |
|---|---|---|---|---|
| Frozen yoghurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 |
| Eclair | 262 | 16 | 24 | 6 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |
| Gingerbread | 356 | 16 | 49 | 3.9 |
数据表格
Table 组件与原生 <table> 元素存在密切关联。 这种限制条件导致要构建丰富的数据表格会变得很有挑战性。
DataGrid 组件 专为需要处理大量表格数据的情况而设计。 虽然它的结构相比之下不够灵活，但是有失必有得，牺牲灵活性来换取更强大的功能。
<DataGrid
rows={rows}
columns={columns}
pageSize={5}
checkboxSelection
disableSelectionOnClick
/>| Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) |
|---|---|---|---|---|
| Frozen yoghurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 |
| Eclair | 262 | 16 | 24 | 6 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |
| Gingerbread | 356 | 16 | 49 | 3.9 |
排序 & 选择
此示例演示了在表格内使用了 选择框组件（Checkbox） 以及单击选择行，而且这个表格带有一个自定义的 工具条组件（Toolbar）。 它也展示了如何使用 TableSortLabel 组件来给列标题添加样式。
这个表格已被赋予一个固定的宽度，您可以查看如何实现横向滚动。 在表格外部使用 TablePagination 组件，能够防止分页控件的滚动。 (以下的'Custom Table Pagination Action' （自定义表分页操作示例）展示了 TableFooter 中的分页。)
| Dessert (100g serving) | Caloriessorted ascending | Fat (g) | Carbs (g) | Protein (g) | |
|---|---|---|---|---|---|
| Frozen yoghurt | 159 | 6 | 24 | 4 | |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 | |
| Eclair | 262 | 16 | 24 | 6 | |
| Cupcake | 305 | 3.7 | 67 | 4.3 | |
| Marshmallow | 318 | 0 | 81 | 2 |
自定义表格
以下是自定义组件的一个示例。 您可以在重写文档页中了解有关此内容的更多信息。
| Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) |
|---|---|---|---|---|
| Frozen yoghurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 |
| Eclair | 262 | 16 | 24 | 6 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |
| Gingerbread | 356 | 16 | 49 | 3.9 |
自定义的分页选项
通过 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 组件的 ActionsComponent 属性能够让您实现一些自定义的行为。
| Frozen yoghurt | 159 | 6 |
|---|---|---|
| Ice cream sandwich | 237 | 9 |
| Eclair | 262 | 16 |
| Cupcake | 305 | 3.7 |
| Marshmallow | 318 | 0 |
| Name | ISO Code | Population | Size (km²) | Density |
|---|---|---|---|---|
| India | IN | 1,324,171,354 | 3,287,263 | 402.82 |
| China | CN | 1,403,500,365 | 9,596,961 | 146.24 |
| Italy | IT | 60,483,973 | 301,340 | 200.72 |
| United States | US | 327,167,434 | 9,833,520 | 33.27 |
| Canada | CA | 37,602,103 | 9,984,670 | 3.77 |
| Australia | AU | 25,475,400 | 7,692,024 | 3.31 |
| Germany | DE | 83,019,200 | 357,578 | 232.17 |
| Ireland | IE | 4,857,000 | 70,273 | 69.12 |
| Mexico | MX | 126,577,691 | 1,972,550 | 64.17 |
| Japan | JP | 126,317,000 | 377,973 | 334.20 |
可折叠的表格
以可扩展行的表格为例，揭示更多信息。 它利用了 Collapse 组件。
| Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) | |
|---|---|---|---|---|---|
| Frozen yoghurt | 159 | 6 | 24 | 4 | |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 | |
| Eclair | 262 | 16 | 24 | 6 | |
| Cupcake | 305 | 3.7 | 67 | 4.3 | |
| Gingerbread | 356 | 16 | 49 | 3.9 | |
| Details | Price | ||
|---|---|---|---|
| Desc | Qty. | Unit | Sum |
| Paperclips (Box) | 100 | 1.15 | 115.00 |
| Paper (Case) | 10 | 45.99 | 459.90 |
| Waste Basket | 2 | 17.99 | 35.98 |
| Subtotal | 610.88 | ||
| Tax | 7 % | 42.76 | |
| Total | 653.64 | ||
大型列表渲染（Virtualized Table）
以下例子展示了将 react-virtualized 与 Table 组件一起使用的方法。 它渲染了200多行，并且可以轻松的延展到更多行。 可视化优化了整体的性能。
无障碍设计
（WAI 教程：https://www.w3.org/WAI/tutorials/tables/）
Caption 字幕
字幕能够充当表格的表头。 大多数屏幕阅读器能够宣读字幕的内容。 字幕能够帮助用户找到一个表格，并且描述这个表格的内容，从而协助用户决定是不是想继续阅读这个表格。
| Dessert (100g serving) | Calories | Fat (g) | Carbs (g) | Protein (g) |
|---|---|---|---|---|
| Frozen yoghurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 |
| Eclair | 262 | 16 | 24 | 6 |