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> 元素存在密切关联。这种限制条件导致要构建丰富的数据表格会变得很有挑战性。

The DataGrid component is designed for use-cases that are focused on handling large amounts of tabular data. 虽然它的结构相比之下不够灵活，但是有失必有得，牺牲灵活性来换取更强大的功能。

<DataGrid
  rows={rows}
  columns={columns}
  pageSize={5}
  rowsPerPageOptions={[5]}
  checkboxSelection
/>

紧凑型表格

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

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 中的分页。 )

Nutrition

Dense padding

自定义表格

以下是自定义组件的一个示例。 You can learn more about this in the overrides documentation page.

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
Rows per page: 1–5 of 13

Here is an example of a table with scrollable rows and fixed column headers. It leverages the stickyHeader prop. (⚠️ no IE 11 support) It leverages the stickyHeader prop. (⚠️ no IE 11 support) It leverages the stickyHeader prop. (⚠️ no IE 11 support)

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

按列分组

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

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

Country		Details
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

可折叠的表格

以可扩展行的表格为例，揭示更多信息。 It utilizes the Collapse component.

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

跨越表格（Spanning Table）

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

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 多行，并且可以轻松的延展到更多行。可视化优化了整体的性能。

Dessert

Calories (g)

Fat (g)

Carbs (g)

Protein (g)

Accessibility

(WAI tutorial: https://www.w3.org/WAI/tutorials/tables/)

Caption

A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it's about and decide if they want to read it.

A basic table example with a 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

Unstyled

If you would like to use an unstyled Table, you can use the primitive HTML elements and enhance the table with the TablePaginationUnstyled component. See the demos in the unstyled table pagination docs