SuperAPI AI 工具集

tanstack-preact-table-create-table-hook

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 @tanstack/preact-table 之上封装可复用的 Preact 表格基础设施。当多个表格重复相同约定(features、getRowId 等)时,用 createTableHook 集中策略;一次性表格仍应直接用 useTable。

主要能力:createTableHook 接收 features、getRowId 等共享选项,返回 createAppColumnHelper、useAppTable、useTableContext 等绑定钩子,并支持可选的组件注册表。AppTable 可接收普通 JSX 子节点,也可用函数子节点配合 selector 取值。

用法:从 @tanstack/preact-table 导入 createTableHook、tableFeatures、rowSelectionFeature,在模块作用域创建工厂并导出绑定钩子;用 createAppColumnHelper 定义列,用 useAppTable 生成表格,并在 table.AppTable 包裹下通过 useTableContext 读取上下文。嵌套不同表格配置时,可用 createTableHookContexts 创建独立上下文。

限制与常见错误:不要为单个表格做抽象;上下文钩子必须在对应的 AppTable、AppCell 或 AppHeader 包裹内使用;工厂及其绑定钩子应保持在模块作用域,避免每次渲染重建导致配置与注册表不稳定。默认上下文为模块级且 HMR 稳定,兄弟表格已由各自 provider 隔离,但嵌套 provider 可能让消费者静默解析到内层表格。精确返回名、provider 属性与作用域上下文类型可查看 node_modules/@tanstack/preact-table/dist 下的 createTableHook.d.ts 与 createTableHookContexts.d.ts。