数据表格
Table
用行列关系比较结构化数据。
| 组件 | 类型 | 来源 |
|---|---|---|
| Tool | 组合模式 | shadcn/ui |
| Dialog | 现成组件 | MUI |
| Upload | 现成组件 | Ant Design |
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'table'
);
// view.update({ ...nextProps });
// view.destroy();什么时候用
用户需要跨行比较、排序或筛选。
什么时候不用
非结构化叙述和长正文不适合强塞进表格。
COMPONENT API
属性与事件
传入业务数据，通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
caption | "组件状态" |
columns | [{"key":"name","label":"组件"},{"key":"kind","label":"类型"},{"key":"source","label":"来源"}] |
rows | [{"name":"Tool","kind":"组合模式","source":"shadcn/ui"},{"name":"Dialog","kind":"现成组件","source":"MUI"},{"name":"Upload","kind":"现成组件","source":"Ant Design |
事件
展示组件；通过 update(props) 更新内容。
INTERACTION NOTES
交互与可访问性
- 列头与单元格关系可被读屏理解。
- 排序方向和分页有文字名称。
和相似组件的区别
普通 Table 是展示结构；Data Grid 还可能包含编辑、虚拟化与复杂键盘模型。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
React / Next.js、Vue / Nuxt、Angular · 来源核验