Skip to content

全面对标 Airtable 的表格(Grid/List)UX 优化任务 #906

@hotlong

Description

@hotlong

目标

对比当前 ObjectUI 的表格组件(Grid/List/ObjectGrid)与 Airtable 的体验,综合落地以下优化,以实现用户感知上的高一致度。所有子项可单独提交 PR。


1. 日期字段人性化格式默认展示

  • 将所有日期型列的值从 ISO 格式(如 2024-01-15T00:00:00.000Z)自动格式化为本地化、人类可读格式(如 2024/2/28 12:57am),优先跟随浏览器 locale。
  • 涉及:cell renderer、Grid/ListView/fields 层的 formatDate 自动调用。

2. 行悬浮"Open >"按钮/行为规范

  • Grid 和 ListView 统一:鼠标悬浮于首列或整行时,出现 "Open >" 文字按钮(含展开 icon),点击直达详情页(record detail)。
  • 优化现有 row-expand-button,去除仅 icon/tooltip 的做法,改用文字按钮。

3. 单击单元格即进入编辑状态(单击编辑)

  • grid cell 默认支持 "点击即编辑"(editMode: 'click'),双击可作为快捷保存。
  • 相关属性:singleClickEdit、editMode,新建选项,默认值为 click。
  • InlineEditing 组件兼容此交互。

4. 默认紧凑行高/密度模式

  • Grid 和 List 行高默认32-36px(densityMode: 'compact')。
  • 工具栏保留密度切换,但默认使用紧凑。

5. 列头样式极简化

  • 表头背景统一为浅灰(bg-muted/30),去除冗余分割线/色块。
  • 列名用 font-normal text-muted-foreground,排序箭头与文本内联。
  • 字段类型图标(如A,#,📅)全部启用。

6. 搜索框移至工具栏

  • 搜索框与筛选、分组按钮并列在 toolbar 区域,而不用嵌入表头或首行。

7. 筛选器 pill/chip 样式美化

  • 快速筛选条件区块采用更轻量化、Airtable 风格的 pill/chip,支持多条件并列、x移除。

8. 列宽自适应内容

  • 启用自动列宽(autoSizeColumns),智能为文本/数值类等分配最优宽度。

9. 行选择 Checkbox 交互样式

  • 新增 selectionStyle: 'hover'|'always',支持始终显示 checkbox,适配批量操作。

10. 空表格 ghost row 占位

  • 无数据时,底部以半透明 ghost row 显示示例数据轮廓,占位整体表格高度。

  • 工具栏支持 dock/浮动切换
  • Dashboard/table 编辑右侧联动配置 panel 交互再精细

对应参考图:
ObjectUI演示截图
Airtable截图

Metadata

Metadata

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions