数据表格 UI 设计模式

结构化数据的标准呈现：表头一行 + 若干数据行，列宽按内容权重分配，数字右对齐。信息密度最高的展示形式。

点击表头按该列排序，当前排序列显示方向箭头。数据表最基本也最常用的交互。

每行前面一个复选框，表头那个是全选（支持半选态）。选中后通常在上方浮出批量操作条。

选中若干行后在表格上方（或底部吸底）浮出一条深色操作栏，显示「已选 N 项」与可用动作。

横向滚动时把关键列（通常是名称列）钉在左侧，右侧列滚过去但名称始终可见。宽表格的必备能力。

点击行首的箭头，在行下方展开一块明细区展示详情。比跳转新页面轻，比弹窗更不打断上下文。

直接点单元格就变输入框，改完回车保存。省掉「打开编辑页 → 改一个字段 → 保存 → 返回」的四步。

用「字段 + 运算符 + 值」的条件行组合出复杂筛选，行间用 与/或 连接。适合数据量大、筛选逻辑复杂的后台。

只渲染可视区内的行，滚动时复用 DOM。把万级列表的渲染成本从「行数」降到「可视行数」。

筛选后没有结果时，用一个带图标的居中提示替代空白表格，并给出「清除筛选」等出口。