用途:该技能用于处理 TanStack Table 的 UI 表格状态,针对 Svelte 数据表格,覆盖列、渲染、排序、过滤、分页和行标识等场景。资料说明它只管 UI 表格状态;Epicenter 存储表格数据应使用 yjs,把行读入组件应使用 svelte。
主要能力与用法:本地基线使用 @tanstack/svelte-table,导入 createTable as createSvelteTable、FlexRender、renderComponent,并从 @tanstack/table-core 导入 ColumnDef 类型。表格构建规则:持久化或本地优先的行必须设置 getRowId,不要依赖数组索引标识;保持数据引用稳定,除非有意重建表格,避免在 options getter 中新建数组;列用 satisfies ColumnDef<Row>[] 定义;访问器列应给稳定 id,尤其在涉及排序、隐藏或持久化偏好时;用 renderComponent 实现可复用表头与单元格组件;只包含 UI 实际用到的 row model,core 始终需要,sorted/filter/pagination 仅在需要时加入。
受控状态:只控制 Epicenter 外部拥有的状态,如排序、全局过滤、列可见性、行选择或分页。若存在 onXChange 处理器,必须同时存在对应的 state.get x()。状态所有权集中在一个组件或 handle 中,不要无故把排序、过滤、分页拆分到无关 store。
渲染:TanStack Table 负责行、列、单元格状态,@epicenter/ui/table 负责语义化表格标记与样式。用 FlexRender 渲染表头与单元格;行按 row.id 设 key,单元格按 cell.id 设 key;行数为零时在表体或周围面板渲染 Empty.Root。可点击行需显式键盘行为。大列表用 TanStack Virtual 单独处理,虚拟化不是表格内置功能。
限制:资料未提供收费、价格、平台或效果信息。API 正确性可向 DeepWiki 针对 TanStack/table 提问,并对照已安装的 @tanstack/svelte-table 与 @tanstack/table-core 版本验证。