# Table 表格

用于数据的展示， 可对数据进行排序、筛选、对比、自定义操作等复杂行为。

# 设计说明

# 使用说明

# 何时使用

• 当有大量结构化的数据需要展现时；
• 当需要对数据进行排序、筛选、及自定义操作时；
• 当需要对数据进行归纳、分类，便于用户快速了解其中的关联和区别时。

# 数据展示

• 列的展示顺序要符合常规的浏览顺序，依据信息重要程度从左到右放置；
• 需考虑每列数据间的关系，保证数据的整体性与关联性。

# 样式

主要分为：有边框、无边框、斑马纹、无数据、自定义（带状态）。

# 对齐方式

由于表格中的数据类型比较多，需根据数据内容选用合适的对齐方式。

• 左对齐： 文字及混合型文本（图片、进度、状态、标签、评价等）；
• 右对齐： 金额统一右对齐、统计类的数据；
• 居中对齐： 固定字段/固定长度的内容，比如：性别（男性、女性）、单/复选框等。

# 数据省略展示、折行展示

# 行内编辑

行内编辑分为 3 种：1、鼠标单击单元格触发 2、鼠标双击单元格触发 3、点击编辑操作触发

# 行内新增

行内新增按照添加的时间排序，默认最新创建的在最上面。

# 拖拽排序

拖拽排序属于低频操作，默认不展示可拖拽标识，仅鼠标移入时显示可拖拽的样式。

# 列宽拖拽

列宽分为两种：固定（fixed）、自适应（auto），可在其基础上通过鼠标拖拽的方式调整列的宽度。

# 数据加载

数据加载时需要有加载中的状态提示，做到实时反馈。

# 规范

• 表格的尺寸（行高）有 4 种：40px、36px、32px、28px，默认为：40px；
• 单元格内容的内边距有 4 种：16px、12px、8px、4px。

# 类型

# 单选、多选

在涉及到表单选择、批量操作场景中，可直接单选或多选操作选中内容。

# 固定表头

当数据量大、一屏显示不全需要滚动查看时。帮助用户在滚动过程中可以实时看到 行 和 列 对应的内容，提高阅读效率。

# 总结行

设置表尾为总结行（可固定位置），对列进行统计，支持多行数据统计。

# 固定列

当表格列过多时，固定列有利于用户在左右滑动屏幕时，能够便捷地进行数据定位与对比，以及进行相应的操作。

# 分组表头

信息分类层级较多，数据结构较为复杂的情况下使用。

# 单元格合并

单元格支持行合并、列合并，有助于数据的归类及视觉上的降噪。

# 可展开收起表格

提供可收纳功能，展开后可以进一步查看详细内容。

# 树形表格

点击可展开更多数据，默认为收起。

# 嵌套子表格

子集的数据展示的列数据信息与主数据的列信息不同，需要单独展示，通过内嵌表格的形式，可以很好的展示数据层级关系，且数据的维护和查阅更方便。

# 筛选与排序

筛选可以改变数据展示的类型，帮助用户更好的观察数据，发现数据规律；

# 自定义表头

表头支持自定义配置，如查询、启/停用、列设置等功能。