组件 · 内容 · 24
表格
表格 = 数据网格，含吸顶表头、可调行高、行悬停效果和经过设计的空状态。
直达修改 Prompt →
| Name | Status | Role | Updated |
|---|
| North | Active | Admin | 2h |
| Pike | Idle | Editor | 1d |
| Harbor | Active | Viewer | 3d |
表格是什么？
表格是扫描面。点名粘性表头、密度、行悬停和空状态。
变体
点击属性即可在预览中高亮。
-
- 行高紧凑、留白少、便于快速扫读的表格。
-
- 行距宽松、留白更多的表格。
-
- 表格滚动时保持可见的表头。
-
- 指针所在行的高亮，便于扫读。
-
- 给具体值，不要只给感觉词。
-
- 无数据时的状态，需给出提示与下一步操作。
状态
点击属性即可在预览中高亮。
-
- 输入或报错前字段的默认有效状态。
-
- 指针所在行的高亮，便于扫读。
结构解剖
这些是 Prompt 里应该点名的部件。
什么时候用
- 需要扫读的记录列表：用户、订单、任务
- 需要跨行比较的仪表盘
- 带行内操作的后台列表
什么时候别用
- 移动优先的布局——改用堆叠卡片
- 叙事型数据——改用图表
- 层级很深的数据——进详情页
Create a data table.
STYLE
- sticky header in a rounded scroll container, 40px row height, row hover
STATES
- loading skeleton, empty state
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui