解构
- 表格头部 用于容纳搜索、筛选以及对表格的整体操作。
- 表头行 展示每一列的标题，以及对列进行排序动作。不建议在表头行进行筛选操作。
- 表格主体 展示表格的主体内容。
- 表格底部 容纳浏览进度、分页器的区域。
- 搜索框 对表格内容进行搜索，通常情况下，一个表格只能包含一个搜索框。
- 筛选区域 对表格内容进行筛选。
- 操作区域 对表格的整体操作。
- 分页器 对表格进行分页。
Components Demo
❎ Figma Variants
基础用法
表头行
表头行的操作可以用于对列进行排序。针对可以排序并且有排序需求的列，可以开启使用表头行的操作进行排序。默认情况下，表头点击一次降序，再次点击升序，第三次点击回到默认顺序。如果有更复杂的排序需求，可以在表头使用下拉菜单。
表格主体
表格主体由表格行组成。每一表格行在鼠标悬停时，其背景颜色会变成 Fill 0 颜色。
响应式规则
表格垂直滚动
表格的垂直滚动有两种处理方式。
| 处理方式 | 描述 | 表头行 |
|---|---|---|
| 内部滚动 | 滚动仅发生在表格内部，表格内有一个独立的垂直滚动条 | 表头行一直固定 |
| 页面滚动 | 表格的内容平铺在页面上，表格没有单独的滚动条 | 表头行跟随滚动，但可以使表头行吸附在页面顶部 |
内部滚动
页面滚动（含表头吸附页面顶部）
表格水平滚动
对于鼠标用户而言，水平滚动交互体验不佳。因此，尽可能通过调整列宽，避免出现水平滚动的情况。如实在无法避免，可按以下步骤设计水平滚动交互：
- 根据内容长度与间距规则，将不同字段的内容填入表格。
- 已知固定格式的内容例如日期、ID、数字等，可对该列设置固定的宽度。
- 去掉非必要的内容列，或者允许用户自定义需要显示哪一些列。
- 对于长度分布分散的内容，可以使用文本截断，以避免出现极端情况。
- 对剩下的列合理分配宽度（最小宽度和最大宽度），尽量使表格在主要宽度情况如全宽屏幕（1368px 或 1440px）不需要水平滚动。
- 指定固定不动的列，保证在表格需要水平滚动时，该列还能够留在视野内。
变体
树形表格
树形表格是指表格的主要列的数据组织方式是一个树结构。
宽度可调整的表格
表格的数据内容可以很简单，也可以非常复杂。有时候，预设的宽度并不能给用户最好的浏览体验。这种情况下，我们可以使用宽度可调整的表格，让用户在浏览时根据需要，自主控制表格列的宽度。
可拖拽调整顺序的表格
当表格需要调整数据项目的顺序时，可以使用可拖拽行的表格来帮助用户更加直观自然地调整顺序。
行展开或嵌套表格
通常为了提高用户的快速浏览效率，表格不会默认展示所有的信息，一些次要的、不是必须要关注的内容会被折叠起来，通过行展开的方式呈现。