组件 数据表格

数据表格

数据表格显示原始的数据集。它们通常出现在桌面端的企业产品中。

数据表格可以嵌入到其他元素中,例如卡片。它们可以包含:

  • 一组相关的可视化数据
  • 查询和操作数据的功能

卡片中的数据表格,可以在顶部和底部显示导航和数据操作工具。

支持的交互功能

鼠标悬停在行上(桌面端)
行选择
列排序
鼠标悬停在列上(桌面端)
长标题
文本编辑
菜单

相关组件

卡片

结构 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

数据表格在顶部有包含列名称的表头,下面是数据行。

如果需要选择或对数据进行操作,则应该为每一行添加一个复选框。

数据表格可以包含:

  • 三列或更多列数据
  • 一组相关的可视化数据
  • 查询或操作数据的功能

基本的数据表格

表格内容

13sp Roboto Regular
87% black

列标题

12sp Roboto Medium
54% black

文本对齐方式

数据列右对齐
文本列左对齐

交互 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

鼠标悬停在行上(桌面端)

当鼠标悬停在行上时,在该行上显示背景色。如果个别的单元格有特殊的悬停状态,同时显示单元格和行的状态。

悬停背景色

  • Grey 200 (#EEEEEE)

鼠标悬停在行上

行选择

当数据行被选中时,在该行上显示一个背景色。

选中行的背景色

  • Grey 100 (#F5F5F5)

复选框

  • 使用强调色

选中的行

列排序

如果启用了列排序,默认对最重要的数据进行排序,并在列头部显示已排序的状态。如果用户点击一个已排序的列,则反转排序顺序、并旋转排序图标。

已排序的列名称

  • 12sp Roboto Medium
  • 87% black

排序图标

  • 16dp container
  • 87% black

带有正排序的列

鼠标悬停状态的列名称(桌面端)

如果要对列标题提供更详细的解释,请在鼠标悬停时显示一个工具提示。如果启用了排序,在鼠标悬停时显示一个排序图标,以表明该列是可以排序的。

工具提示

排序图标

  • 16dp container
  • 38% black

鼠标悬停在列名称上

较长的表头文本

有时,列之间使用推荐的 56dp 内边距时,列名称在容器中并不合适。有两个办法来处理这种情况:

  1. 显示完整的列名称,并在表格内使用水平滚动
  2. 显示缩短的列名称,并在鼠标悬停时显示完整列名称

对太长的列名称进行截断,并用省略号代替

鼠标悬停在截断的列名称上

单元格文本编辑

表格可能需要基本的文本编辑功能(例如,编辑已有的文本内容,或添加评论)。在表格中包含可编辑字段,并通过占位符文本进行提示。可以在点击时显示一个只含文本框的小型编辑框,或者显示一个完整的对话框组件。

占位符文本

  • 13sp Roboto Regular
  • 38% black
  • 文本框中没有分隔线

一个含占位符的可编辑单元格


小型编辑框

  • 将编辑框的边缘与最近的分隔线或表格边缘对齐
  • 左右均有 24dp 的内边距
  • 包含一个简单的文本框,并使用 App 的主题(如果适用的话)
  • 用户通过按回车键确认

一个简单的、含单个文本框的编辑框

大型编辑框

  • 将编辑框的边缘与最近的分隔线或表格边缘对齐
  • 遵循对话框的设计指南,并使用 App 的主题(如果适用的话)
  • 用户通过点击保存按钮确认

一个复杂、灵活的编辑框

单元格内的编辑图标

  • 18dp container
  • 54% black

(可选)使用图标进行编辑提示。在单元格的内容的反方向使用图标。

单元格内的菜单

除了编辑文本,用户可能还需要从下拉菜单中选择选项,在这种情况下,可以将菜单组件直接嵌入到表格中。

单元格内的菜单

  • 13sp Roboto Regular
  • 87% black
  • 根据菜单的设计规范进行设计

含菜单的表格

一个打开了菜单的表格

卡片中的表格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

表格可以嵌入到表格中,并在顶部和底部显示导航和数据操作工具。

具有头部和底部的表格卡片

卡片标题

20sp Roboto Regular
87% black

卡片操作图标(头部和底部)

24dp container
54% black

底部分页标签

12sp Roboto Regular
54% black

替换头部

有些表格卡片可能需要带有操作的头部,而不需要带标题的头部。这种情况下,你可以:

  • 持续显示操作
  • 当有条目被选中显示相关的头部

表格卡片中的替换头部

操作按钮

使用无边框的按钮
使条目能被选择

着色的头部

使用 50 的强调色作为背景色进行填充
显示选中条目的数量
在有条目被选中后,显示可用的操作图标

规格 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

垂直间距

数据表格卡片的垂直间距以及它的最后一行

  1. 卡片头部高度:64dp
  2. 最后一行高度:56dp
  3. 数据行高度:48dp

头部和底部内边距

表格卡片中元素之间的水平间距

  1. 表格卡片的四周有 24dp 的内边距
  2. 底部的控件之间有 32dp 的间距
  3. 底部行数和它的标签之间有 40dp 的间距

列的内边距

列之间的内边距

  1. 列之间最小间距为 56dp。列中最宽的条目(包含数据和列名称)划定列的边框。
  2. 复选框在 24dp 的图标容器中,拥有 18dp 的宽度和高度。