feat(angular): integrate angular devtools

examples/angular/composable-tables/package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^21.2.11",
     "@angular/router": "^21.2.11",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "https://pkg.pr.new/TanStack/devtools/@tanstack/angular-devtools@368",
     "@tanstack/angular-table": "^9.0.0-alpha.45",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },

examples/angular/composable-tables/src/app/app.config.ts

@@ -1,6 +1,22 @@
-import { provideBrowserGlobalErrorListeners } from '@angular/core'
+import { isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core'
+import { provideTanStackDevtools } from '@tanstack/angular-devtools/provider'
 import type { ApplicationConfig } from '@angular/core'
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideBrowserGlobalErrorListeners()],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    isDevMode()
+      ? provideTanStackDevtools(() => ({
+          plugins: [
+            {
+              name: 'TanStack Table',
+              render: () =>
+                import('@tanstack/angular-table-devtools').then((m) =>
+                  m.TableDevtoolsPanel(),
+                ),
+            },
+          ],
+        }))
+      : [],
+  ],
 }

examples/angular/composable-tables/src/app/app.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { tableDevtoolsPlugin } from '@tanstack/angular-table-devtools'
 import { UsersTable } from './components/users-table/users-table'
 import { ProductsTable } from './components/products-table/products-table'
+import type { TanStackDevtoolsAngularPlugin } from '@tanstack/angular-devtools'
 
 @Component({
   selector: 'app-root',
@@ -24,4 +26,11 @@ import { ProductsTable } from './components/products-table/products-table'
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class App {}
+export class App {
+  readonly plugins: Array<TanStackDevtoolsAngularPlugin> = [
+    tableDevtoolsPlugin(() => ({
+      theme: 'dark',
+      devtoolsOpen: true,
+    })),
+  ]
+}

examples/angular/composable-tables/src/app/components/products-table/products-table.ts

@@ -6,6 +6,7 @@ import {
   TanStackTableCell,
   TanStackTableHeader,
 } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { makeProductData } from '../../makeData'
 import { createAppColumnHelper, injectAppTable } from '../../table'
 import type { Product } from '../../makeData'
@@ -68,4 +69,8 @@ export class ProductsTable {
 
   refreshData = () => this.data.set(makeProductData(1_000))
   stressTest = () => this.data.set(makeProductData(200_000))
+
+  constructor() {
+    injectTanStackTableDevtools(() => this.table, 'products-table')
+  }
 }

examples/angular/composable-tables/src/app/components/users-table/users-table.ts

@@ -7,6 +7,7 @@ import {
   TanStackTableHeader,
   flexRenderComponent,
 } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { makeData } from '../../makeData'
 import { createAppColumnHelper, injectAppTable } from '../../table'
 import type { Person } from '../../makeData'
@@ -79,4 +80,8 @@ export class UsersTable {
 
   refreshData = () => this.data.set(makeData(1_000))
   stressTest = () => this.data.set(makeData(200_000))
+
+  constructor() {
+    injectTanStackTableDevtools(() => this.table, 'users-table')
+  }
 }

packages/angular-table-devtools/eslint.config.js

@@ -0,0 +1,8 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+/** @type {any} */
+const config = [...rootConfig]
+
+export default config

packages/angular-table-devtools/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@tanstack/angular-table-devtools",
+  "version": "9.0.0-alpha.43",
+  "description": "Angular devtools for TanStack Table.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/table.git",
+    "directory": "packages/angular-table-devtools"
+  },
+  "homepage": "https://tanstack.com/table",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": [
+    "angular",
+    "tanstack",
+    "table",
+    "devtools"
+  ],
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "tsdown"
+  },
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./production": "./dist/production.js",
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=20"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@tanstack/devtools-utils": "https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@368",
+    "@tanstack/table-core": "workspace:*",
+    "@tanstack/table-devtools": "workspace:*"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=21.0.0"
+  }
+}

packages/angular-table-devtools/src/TableDevtools.ts

@@ -0,0 +1,34 @@
+import { TableDevtoolsCore } from '@tanstack/table-devtools'
+import { createAngularPanel } from '@tanstack/devtools-utils/angular'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/angular'
+
+export interface TableDevtoolsAngularInit extends Partial<DevtoolsPanelProps> {}
+
+const [TableDevtoolsPanelBase, TableDevtoolsPanelNoOpBase] =
+  createAngularPanel(TableDevtoolsCore)
+
+function resolvePanelProps(
+  props?: TableDevtoolsAngularInit,
+): DevtoolsPanelProps {
+  return {
+    theme: props?.theme ?? 'dark',
+    devtoolsOpen: props?.devtoolsOpen ?? false,
+  }
+}
+
+type TableDevtoolsPanelComponent = () => (
+  inputs: () => TableDevtoolsAngularInit,
+  hostElement: HTMLElement,
+) => () => void
+
+export const TableDevtoolsPanel: TableDevtoolsPanelComponent =
+  () => (props, host) => {
+    const panel = TableDevtoolsPanelBase()
+    return panel(() => resolvePanelProps(props()), host)
+  }
+
+export const TableDevtoolsPanelNoOp: TableDevtoolsPanelComponent =
+  () => (props, host) => {
+    const panel = TableDevtoolsPanelNoOpBase()
+    return () => panel
+  }

packages/angular-table-devtools/src/index.ts

@@ -0,0 +1,20 @@
+import { isDevMode } from '@angular/core'
+import * as plugin from './plugin'
+import * as Devtools from './TableDevtools'
+import * as inject from './injectTanStackTableDevtools'
+
+export const TableDevtoolsPanel = isDevMode()
+  ? Devtools.TableDevtoolsPanel
+  : Devtools.TableDevtoolsPanelNoOp
+
+export const tableDevtoolsPlugin = isDevMode()
+  ? plugin.tableDevtoolsPlugin
+  : plugin.tableDevtoolsNoOpPlugin
+
+export type { TableDevtoolsAngularInit } from './TableDevtools'
+
+export type { InjectTanStackTableDevtoolsOptions } from './injectTanStackTableDevtools'
+
+export const injectTanStackTableDevtools = isDevMode()
+  ? inject.injectTanStackTableDevtools
+  : inject.injectTanStackTableDevtoolsNoOp

packages/angular-table-devtools/src/injectTanStackTableDevtools.ts

@@ -0,0 +1,77 @@
+import {
+  removeTableDevtoolsTarget,
+  upsertTableDevtoolsTarget,
+} from '@tanstack/table-devtools'
+import {
+  APP_ID,
+  DestroyRef,
+  Injectable,
+  Injector,
+  assertInInjectionContext,
+  effect,
+  inject,
+} from '@angular/core'
+import type { RowData, Table, TableFeatures } from '@tanstack/table-core'
+
+export interface InjectTanStackTableDevtoolsOptions {
+  enabled?: () => boolean
+  injector?: Injector
+}
+
+function normalizeName(name?: string) {
+  const trimmedName = name?.trim()
+  return trimmedName ? trimmedName : undefined
+}
+
+let autoId = 0
+function generateId(): string {
+  const appId = inject(APP_ID)
+  return `tanstacktable-${appId}_${autoId++}${Date.now().toString(36)}`
+}
+
+export function injectTanStackTableDevtools<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+>(
+  table: () => Table<TFeatures, TData> | undefined,
+  name?: string,
+  options?: InjectTanStackTableDevtoolsOptions,
+): void {
+  const registrationId = generateId()
+  const enabled = () => options?.enabled?.() ?? true
+  assertInInjectionContext(injectTanStackTableDevtools)
+  const injector = options?.injector ?? inject(Injector)
+  const destroyRef = inject(DestroyRef)
+
+  effect(
+    (onCleanup) => {
+      const enabledValue = enabled()
+      const tableValue = table()
+      if (!enabledValue || !tableValue) {
+        removeTableDevtoolsTarget(registrationId)
+      }
+      upsertTableDevtoolsTarget({
+        id: registrationId,
+        table: tableValue,
+        name: normalizeName(name),
+      })
+      onCleanup(() => {
+        removeTableDevtoolsTarget(registrationId)
+      })
+    },
+    { injector },
+  )
+
+  destroyRef.onDestroy(() => {
+    removeTableDevtoolsTarget(registrationId)
+  })
+}
+
+export function injectTanStackTableDevtoolsNoOp<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+>(
+  _table: Table<TFeatures, TData> | undefined,
+  _name?: string,
+  _options?: InjectTanStackTableDevtoolsOptions,
+): void {}

packages/angular-table-devtools/src/plugin.ts

@@ -0,0 +1,13 @@
+import { createAngularPlugin } from '@tanstack/devtools-utils/angular'
+import { TableDevtoolsPanel } from './TableDevtools'
+
+type TableDevtoolsPluginFactory = ReturnType<typeof createAngularPlugin>[0]
+
+const plugins = createAngularPlugin({
+  name: 'TanStack Table',
+  render: TableDevtoolsPanel,
+})
+
+export const tableDevtoolsPlugin: TableDevtoolsPluginFactory = plugins[0]
+export const tableDevtoolsNoOpPlugin: TableDevtoolsPluginFactory =
+  plugins[1] as any

packages/angular-table-devtools/src/production.ts

@@ -0,0 +1,5 @@
+export { TableDevtoolsPanel } from './TableDevtools'
+export type { TableDevtoolsAngularInit } from './TableDevtools'
+export { tableDevtoolsPlugin } from './plugin'
+export { injectTanStackTableDevtools } from './injectTanStackTableDevtools'
+export type { InjectTanStackTableDevtoolsOptions } from './injectTanStackTableDevtools'

packages/angular-table-devtools/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "useDefineForClassFields": false,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": [
+    "src",
+    "tests",
+    "eslint.config.js",
+    "vite.config.ts",
+    "tsdown.config.ts"
+  ]
+}

packages/angular-table-devtools/tsdown.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'tsdown'
+
+export default defineConfig({
+  plugins: [],
+  entry: ['./src/index.ts', './src/production.ts'],
+  format: ['esm'],
+  unbundle: true,
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  minify: false,
+  fixedExtension: false,
+  exports: true,
+  publint: {
+    strict: true,
+  },
+})

packages/angular-table-devtools/vite.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig, mergeConfig } from 'vitest/config'
+import packageJson from './package.json'
+
+const config = defineConfig({
+  plugins: [],
+  test: {
+    name: packageJson.name,
+    dir: './',
+    watch: false,
+    environment: 'jsdom',
+    globals: true,
+  },
+})
+
+export default config