返回
UI · №03 · SPECIMEN
数据表格Table / Data Grid
后台那种一行行的数据表能排序筛选的表格管理列表
LIVE SPECIMEN真的能玩，点点看
| 姓名 | 角色 | |
|---|---|---|
| 陈默 | 设计 | |
| 阿杰 | 开发 | |
| 小满 | 产品 |
先看结论
行列结构展示同构数据，Data Grid 版本带排序、筛选、行选择等操作能力。
- 适合
- 字段多、需要扫读对比的结构化数据——管理后台的主力组件。
- 不适合
- 移动端窄屏——横向挤不下时考虑卡片列表替代。
直接发给 agent
Build a data table for the user list: sortable columns (click header toggles asc/desc with an arrow indicator), a checkbox column for row selection with a select-all header, and zebra striping for readability.已于 2026-07-17 实测通过
技术标注2 项
- web
- <table> + <th aria-sort> 排序语义
- react
- TanStack Table（无头）/ <DataTable>（各库）
详细说明
表格是管理后台的心脏，也是「说不清就返工」的重灾区：排序在哪列、选择怎么做、斑马纹要不要——这些说清了，agent 一次就能给出能用的后台表格，而不是一个纯 HTML table 骨架。