Material Design 组件图鉴 —— Data Tables
Data tables display sets of raw data. They usually appear in desktop enterprise products. 数据表用于展示、操作原始数据。
支持的交互方式：
- 行悬浮（Row Hover）
- 行选择
- 列分类
- 列悬浮
- 长表头
- 文字编辑
- 菜单
结构
第一行是表头，下面的都是数据。 假如用户是需要对数据进行选择与操作的话就要带上 checkbox。
数据表包含：
- 三种或以上字段
- 相关的视觉联系
- 拥有让用户浏览与操作数据的特点
一般格式：
- 内容 13sp roboto regular 87% black
- 表头 12sp roboto medium 54% black
- 纯数字与表头靠右对齐，文字与表头靠左对齐
交互
行悬浮
鼠标悬浮于行任意位置，该行背景色变深。 颜色：Grey 200（#EEEEEE）
行选择
行被选中后显示的背景色与悬浮背景色不同 颜色：Grey 100（#F5F5F5）
checkbox 填充色用的 secondary app color。
列排序
列表本身默认的排列顺序是根据表中最重要的数据进行某种规则的排序的。该数据要用 icon 和不同的颜色将自己的状态和身份标记出来。
排序列表头文字：
- 12sp Roboto Medium
- 87% black
排序 icon：
- 16dp 的边框之内就好
- 87% black
列名悬浮
鼠标悬浮于列名之上显示对列名的进一步的说明。如果他是可以排序，显示一个浅色的排序 icon， 浅色表示未生效。
icon： 16dp 边框 38% black
表头字段过长
如遇表头字段过长，一般来说会有这两种处理方案：
- 将字段展示完，如果表过长就让它可以水平滚动。
- 截字，当鼠标悬浮于上时才显示完全。
行内编辑
表内数据有可能需要编辑，或支持添加评论功能，可以弹出一个对话框进行编辑，或直接就在行内进行编辑。样式见下图。
行内菜单
就是一个 dropdowm menu。
表与卡片
表通常与卡片一同使用。操作表格的功能会被放置到卡片的上方或下方。
卡片标题：
- 20sp Roboto Regular
- 87% black
操作 icon：
- 24dp 边框之内
- 54% black
表脚部文字
- 12sp Roboto Regular
- 54% black
可选头部
头部有可能会放置一些操作按钮，或者在表项被选中的时候才展示操作按钮。 样式看下图：
几个要注意的点：
使用文字按钮就好 如果头部要有背景色的话，使用透明度为50%的第二主要色作为背景色
尺寸
