SuperAPI AI 工具集

tanstack-angular-table-create-table-hook

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:在 @tanstack/angular-table 基础上,用 createTableHook 建立应用级表格抽象,统一共享特性、默认值与已注册组件,适合重复出现的应用约定;一次性表格仍建议使用 injectTable。

主要能力:从 createTableHook 导出 injectAppTable、createAppColumnHelper、injectTableContext、injectTableCellContext、injectTableHeaderContext;可配置 features,例如 tableFeatures({ rowSortingFeature });通过 createAppColumnHelper<Person>() 定义列,并在组件中用 injectAppTable(() => ({ columns, data: this.data() })) 创建表格。已注册组件可直接消费类型化 DI 上下文,例如 injectTableCellContext<string, Person>(),无需逐层传递 context props。

使用方式:注册时可直接返回 Angular 组件类型,让 FlexRender 设置 context 输入;仅在需要显式 inputs/outputs/injector/bindings/directives 时使用 flexRenderComponent(Component, options)。

限制与常见错误:app 表格构造与返回的 context injector 都必须在 Angular 注入上下文中调用,不能在普通函数里调用 injectAppTable;不要对已注册上下文做 prop drilling,应直接使用 ctx.cell.NameCell;不要把普通渲染函数包成 flexRenderComponent,它只校验 Angular 组件类型;不要为一次性表格创建 hook。精确 DI 与渲染契约可查看 node_modules/@tanstack/angular-table/dist/types/。