tanstack-angular-table-devtools

用途

该技能用于在 Angular 应用中，将 TanStack Table v9 的表格实例注册到 TanStack Table Devtools，以便在开发阶段对表格进行调试与观察。它建立在 @tanstack/table-core#core 与 @tanstack/table-devtools#devtools 之上，并提供 Angular 适配层。

主要能力

通过 injectTanStackTableDevtools 在 Angular 注入上下文中注册表格实例。
支持响应式注册：注入器选项函数可返回 table: undefined 或 enabled 函数，从而移除或禁用注册。
与 injectTable、tableFeatures 配合使用，构建表格并完成注册。
依赖 Angular 的注入与 effects 机制进行生命周期清理。

使用方式

基本设置示例：

import { Component } from '@angular/core'
import { injectTable, tableFeatures } from '@tanstack/angular-table'
import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'

const features = tableFeatures({})
const columns = [{ accessorKey: 'id' }]
const data: Array<{ id: string }> = []

@Component({ selector: 'users-table', template: 'Users table registered' })
export class UsersTable {
  readonly table = injectTable(() => ({
    key: 'users-table',
    features,
    columns,
    data,
  }))

  constructor() {
    injectTanStackTableDevtools(() => ({ table: this.table }))
  }
}

需按 docs/devtools.md 的说明，在应用配置层提供一次 Angular TanStack Devtools 宿主。

常见错误与限制

关键：注入器必须在注入上下文中调用。不要在 bootstrap 之后的任意回调中调用 injectTanStackTableDevtools；应放在组件/服务的字段初始化器或构造函数注入上下文中。适配器使用 Angular 注入和 effects 进行生命周期清理。
高：缺少表格 key。注册前必须为表格分配稳定唯一的 options.key；核心注册会对无 key 的目标记录错误并跳过。
中：isDevMode 空操作被误解。默认 Angular 导出不会在生产环境渲染 Devtools；标准设置应保持仅开发使用，仅在明确需要时使用 /production 入口。包索引通过 Angular isDevMode() 切换导出。

API 发现

可查看 node_modules/@tanstack/angular-table-devtools/dist/index.d.ts 与 injectTanStackTableDevtools.d.ts 以了解当前注入选项。

技能介绍

用途

主要能力

使用方式

常见错误与限制

API 发现