Data tables - 数据表

Data tables display sets of raw data. They usually appear in desktop enterprise products.

【翻译】
数据表显示原始数据集。它们通常出现在桌面企业产品中。

Data tables may be embedded on a surface, such as a card. They can include:

A corresponding visualization
The ability to query and manipulate data
Data tables on cards may display navigation and data manipulation tools at the top and bottom.

【翻译】
数据表可以嵌入在诸如卡片的表面上。他们可以包括：
相应的可视化
查询和操作数据的能力
卡片上的数据表可以在顶部和底部显示导航和数据操作工具。

Supported interactions - 支持的互动
Row hover (desktop)
Row selection
Column sorting
Column hover (desktop)
Long header titles
Text editingMenus

【翻译】
行悬停（桌面）
行选择
列排序
列悬停（桌面）
长标题
文本编辑
菜单

Related components - 相关组件
Cards

【翻译】
卡片

Structure - 结构

A data table contains a header row at the top that lists column names, followed by rows for data.
Checkboxes should accompany each row if the user needs to select or manipulate data.
Data tables may include:
Three or more columns of data
A corresponding visualization
The ability for users to query and manipulate data

【翻译】
数据表在顶部包含列出列名称的标题行，后面是数据行。
如果用户需要选择或操作数据，则复选框应与每行一致。
数据表可以包括：
三列或更多列的数据
相应的可视化
用户查询和操作数据的能力

image

【翻译】
基本数据表
表内容
13sp Roboto Regular 87％黑色
列标题
12sp Roboto Medium 54％黑色
文本对齐
右对齐数字列 左对齐文本列

Interaction - 相互作用

Row hover (Desktop) - 行悬停（桌面）
Display a background in a table row if a user hovers over any part of that row. If there are separate hover states on individual table cells, display both the hover state of the cell and row at the same time.

【翻译】
如果用户将鼠标悬停在该行的任何部分上，则在表格行中显示背景。如果在单个表格单元格上有单独的悬停状态，则同时显示单元格和行的悬停状态。

Hover background - 悬停背景
Grey 200 (#EEEEEE)

【翻译】
Grey 200 (#EEEEEE)

[图片上传失败...(image-46a4c1-1552295752903)]
Hovering over a row

【翻译】

悬停在一排

Row selection - 行选择
When a row is selected, display a background color on the row.

【翻译】
选择行时，在行上显示背景颜色。

Selected row background - 选定的行背景
Grey 100 (#F5F5F5)

【翻译】
灰色100（＃F5F5F5）

Checkbox - 复选框
Use secondary app color

【翻译】
使用辅助应用颜色

image

A selected table row

【翻译】
选定的表行

Sorted column - 排序的列
If column sorting is enabled, sort the most important data by default and display a sorted state in the column header. If the user clicks on a column that is already sorted, reverse the sort order and rotate the sort icon.

【翻译】
如果启用了列排序，则默认排序最重要的数据，并在列标题中显示排序状态。如果用户单击已排序的列，请逆转排序顺序并旋转排序图标。

Sorted column name - 已排序的列名称
12sp Roboto Medium
87% black

【翻译】
12sp Roboto Medium
87％黑色

Sort icon - 排序图标
16dp container
87% black

【翻译】
16dp容器
87％黑色

image

Table with an ascending sorted column

【翻译】
具有升序排序列的表

Column name hover (Desktop) - 悬停列名（桌面）
If there is a need to provide definitions to column headers, display a tooltip on hover. If sorting is enabled, display a light sort icon upon hover, which indicates that the column is sortable.

【翻译】
如果需要向列标题提供定义，请在悬停上显示工具提示。如果启用排序，则在悬停时显示光排序图标，表示列可排序。

Tooltip - 工具提示
Follow the guidelines for Tooltips

【翻译】
遵循工具提示的指南

Sort icon - 排序图标
16dp container
38% black

【翻译】
16dp容器
38％黑色

image

Hovering over a column name

【翻译】
将鼠标悬停在列名称上

Long header titles - 长标题

Sometimes, column names don’t fit in a container with the recommended 56dp of padding in between columns. There are two options to handle this:

Display the full column name and enable horizontal scrolling in the table container.
Shorten the column name and display it in full on hover.

【翻译】
有时，列名称不适合在容器中，建议在列之间使用56dp的填充。 有两个选项来处理这个：
显示完整的列名称并在表格容器中启用水平滚动。
缩短列名称，并在悬停时全屏显示。

image

Long column names truncated with an ellipse

【翻译】
用...截断的长列名称

image

Hovering over a truncated column name

【翻译】
将鼠标悬停在截断的列名称上

Inline text editing - 内联文本编辑
Tables may require basic text editing (e.g. for editing existing text content, or adding comments). Include editable fields within a table and denote them using placeholder text. You can use a simple edit dialog with just a text field, or display a full dialog component on click.
Placeholder text
13sp Roboto Regular
38% black
No divider line on text field

【翻译】
表格可能需要进行基本文字编辑（例如编辑现有文字内容或新增评论）。 在表格中包含可编辑字段，并使用占位符文本表示它们。 您可以使用只包含文本字段的简单编辑对话框，或单击时显示完整的对话框组件。
占位符文本
13sp Roboto Regular
38％黑色
文本字段上没有分隔线

image

An editable table cell with placeholder text

【翻译】
带有占位符文本的可编辑表单元格

Small edit dialog - 小编辑对话框
Align edges of dialog with nearest divider lines, or table edges
24dp of left and right padding
Include a single text field, applying the app theme where applicable
User confirms text by pressing Enter

【翻译】
将对话边缘与最近的分隔线或表边缘对齐
24dp的左右填充
包括单个文本字段，应用应用程序主题（如果适用）
用户按Enter键确认文本

image

A simple, one-field edit dialog

【翻译】
一个简单的单字段编辑对话框

Large edit dialog - 大编辑对话框
Align edges of dialog with nearest divider lines, or table edges
Follow the dialog guidelines, applying the app theme where applicable
User confirms text by clicking the Save button

【翻译】
将对话边缘与最近的分隔线或表边缘对齐
按照对话框指南，应用应用主题（如果适用）
用户通过单击保存按钮确认文本

image

A complex, flexible edit dialog

【翻译】
一个复杂，灵活的编辑对话框

Inline edit icon - 内联编辑图标
18dp container
54% black

【翻译】
18dp容器
54％黑色

image

(Optional) Icon-based edit affordance. Include icons at the edge of the cell on the opposite side of the content.

【翻译】
（可选）基于图标的编辑提示。在内容相对侧的单元格边缘包含图标。

Inline menus - 内联菜单
Instead of editing text, users may need to select from a predefined list of options. In this scenario, embed a menu component directly in the table.

【翻译】
用户可能需要从预定义的选项列表中选择，而不是编辑文本。在这种情况下，将菜单组件直接嵌入表中。

Inline menu - 内联菜单
13sp Roboto Regular
87% black
Follow spacing and sizing guidelines for menus

【翻译】
13sp Roboto Regular
87％黑色
遵循菜单的间距和大小调整准则

image

A table with inline menus

【翻译】
带有内联菜单的表

image

An expanded inline menu

【翻译】
扩展的内联菜单

Tables within cards - 卡片内的表

Tables may be embedded within a card, with table navigation and data manipulation tools displayed at the top and bottom.

【翻译】
表可以嵌入在卡内，其中表导航和数据操纵工具显示在顶部和底部。

image

Table card with header and footer

【翻译】
表卡与页眉和页脚

Card title
20sp Roboto Regular87% black
Card action icons (header and footer)
24dp container54% black
Footer pagination labels
12sp Roboto Regular54% black

【翻译】
卡片标题
20sp Roboto Regular
87％黑色
卡片动作图标（页眉和页脚）
24dp容器
54％黑色
页脚分页标签
12sp Roboto常规
54％黑色

Alternative headers - 可替换的标题

Some table cards may require headers with actions instead of titles. In this case you may either:

Display persistent actions
Display a contextual header that activates when items are selected

【翻译】
某些表卡片可能需要包含操作（而不是标题）的标头。 在这种情况下，您可以：
显示持续操作
显示在选择项目时激活的上下文标题

image

Alternate headers for a table card

【翻译】
表卡的可替换标题

Action buttons - 操作按钮
Use borderless buttonsEnable upon item selection

【翻译】
使用无边框按钮
在选择项目时启用

Colored header - 彩色的标题
Use 50-value of secondary app color for background fill
Display the number of items selected
Display available contextual icons upon item selection

【翻译】
使用辅助应用颜色的50值进行背景填充
显示所选项目的数量
在选择项目时显示可用的上下文图标

Specs - 规格

Vertical spacing

【翻译】
垂直间距

image

Vertical spacing of a data table card and its last row

64dp card header height
56dp height for last row
48dp data row height

【翻译】
数据表卡的垂直间距及其最后一行
64dp卡头高度
最后一行的高度为56dp
48dp数据行高度

Header & footer padding - 页眉和页脚填充

image

Horizontal padding between elements in a table card

24dp of padding around the perimeter of table cards
32dp in between footer control sets
40dp in between the footer row count and its label

【翻译】
表卡中元素之间的水平填充
24dp的垫圈周围的表卡
32dp在页脚控制集之间
40dp在页脚行计数和它的标签之间

Column padding - 列填充

image

Padding in between columns

Use a minimum of 56dp of padding in between columns. The widest item in the column (including data and column name) should delineate the column border.
Checkbox icons have a width and height of 18dp within a 24dp icon container.

【翻译】
列之间的填充
在列之间使用至少56dp的填充。 列中最宽的项（包括数据和列名）应描绘列边框。
复选框图标在24dp图标容器中的宽度和高度为18dp。