数据表

数据表被用来展示原始数据集，并且通常出现于桌面企业产品中。

数据集可能包含：

• 三个或者更多列的数据
• 一个相关的可视化
• 用户可以批量查询、操作数据

结构
交互
选择行
规格

结构

在最简单的形式中，一个数据表包含列名称的顶层行，以及许多数据行。如果用户需要选择或者操作数据，每一行应该有一个复选框。

基本数据表

列头部

• 12 sp Roboto Medium
• 54% 黑色

表内容

• 13sp Roboto Regular
• 87%黑色

文本对齐

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

交互

悬停行（桌面）

当用户悬停到一行任意位置时，显示一个背景。如果个别的单元格有特别的悬停状态，同时显示单元格和行的状态。

悬停背景

• 灰色 200 (#EEEEEE)

悬停于一行

选择行

当一行被选中，在当前行使用背景。

选中行背景

• 灰色100 (#F5F5F5)

复选框

• 使用第二个应用颜色

一个选中的表格行

排序列

如果列排序被使能，默认排列最重要的数据，并且在列头部显示已排序的状态。如果用户点击一个已排序的列，反转排序顺序并且旋转排序图标。

排序的列名称

• 12sp Roboto Medium
• 87% 黑色

排序图标

• 16dp container
• 87% 黑色

带有正向排序列的表

悬停列名称（桌面）

如果需要提供列名称的定义，悬停时显示一个提示文本。如果可以排序，悬停时显示一个明亮的排序按钮，指明这个列是可以排序的。

提示文本

• 遵守提示文本指南

排序按钮

• 16dp container
• 26% 黑色

悬停于一个列名称

长头部标题

有时，列之间采用推荐的 56 dp 内边距时，列名称在容器中并不合适。有两个选项来处理这种情况：

• 1.完整显示列名称，在表格容器中使能垂直滚动条。
• 2.缩减列名称，悬停时显示全部。

通过一个椭圆阶段长的列名称

悬停于一个截断的列名称

内联文本编辑

表格可能需要基本的文本编辑（例如，编辑现有的文本内容，或者添加评论）。在表中包含可编辑字段，通过使用 placeholder 文本来提示。你可以使用一个简单的编辑对话框，只放一个文本框，当然也可以显示一个完整的对话组件。

Placeholder 文本

• 13sp Roboto Regular
• 26% 黑色
• 文本框中没有分割线

小的编辑对话框

• 将对话框的边缘与最近的分割线对齐，或者表格边缘
• 24 dp 的左边距和右边距
• 包含单个的文本框，应用 app 主题
• 用户通过按动回车键确认

一个简单、单字段的编辑对话框

大的编辑对话框

• 将对话框的边缘与最近的分隔线或者表格边缘对齐
• 遵从对话框指南，应用 app 主题
• 用户通过点击保存按钮确认文本

一个复杂灵活的编辑对话框

内联编辑按钮

• 18 dp 容器
• 54% 黑色

（可选）基于图标的编辑提示。在内容的另一边的单元格边缘包含图标。

内联菜单
除了编辑文本框，用户可能需要从一个预定义的选项列表中选择。在这种场景中，直接在表格中嵌入一个菜单组件。

内联菜单

• 13sp Roboto Regular
• 87% 黑色
• 遵循菜单的空间和尺寸指南

带有内联菜单的表格

一个扩展的内联菜单

卡片中的数据表

数据表可以被嵌入到卡片中，在顶部和底部放置导航和数据操作工具。

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

卡片标题

• 20sp Roboto Regular
• 87% 黑色

卡片操作图标（头部和脚部）

• 24dp container
• 54% 黑色

脚部分页标签

• 12sp Roboto Regular
• 54% 黑色

可选头部

有些表格卡片可能需要带有操作而不是标题的头部。这种情况，两个可能的方法：显示持续的操作菜单，或者当条目选中时激活一个内容头部。

一个表格卡片的可选头部

操作按钮

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

着色的头部

• 为背景使用 50 -值的第二应用颜色
• 显示选中条目的数量
• 在条目选择上显示可用的内容图标

规格

垂直间距

一个数据表的垂直间距以及它的最后行

• 1.64 dp 的卡片头部高度
• 2.56 dp 的最后行高度
• 3.48 dp 的数据行高度

头部以及脚部内边距

数据表卡片中的元素之间的水平内间距。

• 数据表卡片的一周有 24 dp 的内边距
• 脚部控制菜单中，32 dp 的内边距
• 脚部行数量和标签之间是 40 dp 的内边距

列内边距

列之间的内边距

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