SuperAPI AI 工具集

tanstack-svelte-table-create-table-hook

前端与建站

查看项目

更新于 10-16 06:24

技能介绍

用途:当应用中多个表格共享相同约定时,用该技能封装统一的表格钩子;一次性表格仍应使用 createTable。

主要能力:通过 @tanstack/svelte-table 提供的 rune 感知 createTableHook 生成 createAppTable、createAppColumnHelper、useTableContext、useCellContext、useHeaderContext。可注册共享的 features、tableComponents、cellComponents、headerComponents,并通过返回的 AppTable、AppCell、AppHeader 包装器提供类型化上下文。

使用方式:在钩子模块中调用 createTableHook({ features: tableFeatures({ rowSortingFeature }) }) 并导出上述成员;钩子模块本身可为普通 .ts 模块。表格侧用 createAppColumnHelper<Person>() 定义列,再用 createAppTable 创建表格,data 需通过 getter 暴露,如 get data() { return data },以保持响应式。在已注册组件内优先使用上下文钩子(如 useCellContext<string>())读取值,避免逐层传参。

限制与常见错误:不要自己重写 core 包装器,必须使用官方 createTableHook 实现,否则会丢失 Svelte rune 响应式、选项同步、包装器与上下文接线;不要冻结每张表的 rune 输入,即不要直接传 data,而要用 getter;上下文钩子必须在对应的 App 包装器渲染祖先树内使用;不要为单个表格过早抽象,createTableHook 仅适用于重复出现的应用约定。

API 细节可查看 node_modules/@tanstack/svelte-table/dist/createTableHook.svelte.d.ts 与 App*.svelte 包装器。其他收费、平台等信息暂未提供。