SuperAPI AI 工具集

tanstack-angular-table-getting-started

前端与建站

查看项目

更新于 10-16 00:02

技能介绍

用途:指导在 Angular 中搭建 TanStack Table v9 无头表格,基于 @tanstack/table-core 的 core 与 table-features 模型,需先理解其显式特性机制。

主要能力:通过 injectTable 在注入上下文中创建表格实例;用 tableFeatures({}) 声明特性;用 columns 定义列;用 signal 提供数据;用 FlexRender 的 *flexRender、*flexRenderCell、*flexRenderHeader、*flexRenderFooter 渲染内容。表格本身不提供标记或 CSS。

用法要点:injectTable 的选项初始化函数会在读取的 signal 变化时重跑,因此 features、行模型工厂和 columns 应定义在模块或稳定的类作用域,只在初始化函数内读取变化值。示例:const features = tableFeatures({});const columns = makeColumns();injectTable(() => ({ features, columns, data: this.data() }))。

限制与常见错误:injectTable 必须在 Angular 注入上下文中调用,不能在普通函数中调用,否则会断言失败;不要响应式地重建静态选项,否则会使已记忆化的表格工作失效;不要把渲染函数当作组件,flexRenderComponent 只包装 Angular 组件类型,普通函数和原始值由 FlexRender 直接处理。

API 发现:可查看 node_modules/@tanstack/angular-table/dist/types/ 中的公开 API,以及已安装的 @tanstack/table-core/dist/features/ 中的可选特性 API。