跳转到内容

Table 表格

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

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

表格可以包括:

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

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

基础表格

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

数据表格

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

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

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

紧凑型表格

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

排序 & 选择

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

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

Nutrition
Dessert (100g serving)Caloriessorted ascendingFat (g)Carbs (g)Protein (g)

每页行数:

5

1-5 的 13

自定义表格

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

自定义的分页选项

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

  • 数字(numbers),而每个数字用作为选择项的标签(label)和值(value)。

    <TablePagination rowsPerPageOptions={[10, 50]} />
  • 对象(objects),而 valuelabel 键则相应的对照选择项的标签(label)和值(value)(譬如,当有一个语言字符串为“All” 时你会受益匪浅)。

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

自定义表格分页操作

TablePagination 组件的 ActionsComponent 属性能够让您实现一些自定义的行为。

Frozen yoghurt1596
Ice cream sandwich2379
Eclair26216
Cupcake3053.7
Marshmallow3180

固定表头

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

NameISO CodePopulationSize (km²)Density

每页行数:

10

1-10 的 15

可折叠的表格

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

Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246
Cupcake3053.7674.3
Gingerbread35616493.9

跨越表格(Spanning Table)

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

DetailsPrice
DescQty.UnitSum
Paperclips (Box)1001.15115.00
Paper (Case)1045.99459.90
Waste Basket217.9935.98
Subtotal610.88
Tax7 %42.76
Total653.64

大型列表渲染(Virtualized Table)

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

Dessert
Calories (g)
Fat (g)
Carbs (g)
Protein (g)

无障碍设计

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

Caption 字幕

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

A basic table example with a caption
Dessert (100g serving)CaloriesFat (g)Carbs (g)Protein (g)
Frozen yoghurt1596244
Ice cream sandwich2379374.3
Eclair26216246