交互数据网格
Data Grid
在行列中进行排序、筛选、选择或编辑等密集操作。
| Button | 已核验 | 1.2 |
| Input | 待核验 | 2.0 |
方向键移动，双击或 Enter 编辑，Escape 取消。
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'data-grid'
);
view.element.addEventListener('ui:sort', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
多列业务数据需要列控制、批量操作或单元格交互。
什么时候不用
只读少量行列使用普通 Table 更简单。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "可编辑组件状态" |
columns | [{"key":"name","label":"名称"},{"key":"state","label":"状态","editable":true},{"key":"version","label":"版本","editable":true}] |
rows | [{"name":"Button","state":"已核验","version":"1.2"},{"name":"Input","state":"待核验","version":"2.0"}] |
editable | true |
事件
ui:sort ui:change
INTERACTION NOTES
交互与可访问性
- 为交互单元格设计明确的键盘导航。
- 区分表格语义与网格语义，不能只加一个 grid 角色。
和相似组件的区别
Data Grid 是交互工作区；Table 主要表达行列关系。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Svelte / SvelteKit、Angular、Solid · 来源核验