feat: add angular devtools support and fix core devtools reactivity

examples/angular/basic-app-table/package.json

@@ -17,7 +17,9 @@
     "@angular/forms": "^21.2.13",
     "@angular/platform-browser": "^21.2.13",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-table": "^9.0.0-alpha.49",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },

examples/angular/basic-app-table/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/basic-app-table/src/app/app.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
 import { FlexRender, createTableHook } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { makeData } from './makeData'
 import type { Person } from './makeData'
 
@@ -68,4 +69,10 @@ export class App {
 
   refreshData = () => this.data.set(makeData(20))
   stressTest = () => this.data.set(makeData(1_000))
+  constructor() {
+    injectTanStackTableDevtools(() => ({
+      table: this.table,
+      name: 'basic-app-table',
+    }))
+  }
 }

examples/angular/basic-inject-table/package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^21.2.13",
     "@angular/router": "^21.2.13",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-table": "^9.0.0-alpha.49",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },

examples/angular/basic-inject-table/src/app/app.config.ts

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

examples/angular/basic-inject-table/src/app/app.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
 import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { makeData } from './makeData'
 import type { Person } from './makeData'
 import type { ColumnDef } from '@tanstack/angular-table'
@@ -66,4 +67,10 @@ export class App {
 
   refreshData = () => this.data.set(makeData(20))
   stressTest = () => this.data.set(makeData(1_000))
+  constructor() {
+    injectTanStackTableDevtools(() => ({
+      table: this.table,
+      name: 'basic-inject-table',
+    }))
+  }
 }

examples/angular/column-ordering/package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^21.2.13",
     "@angular/router": "^21.2.13",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-table": "^9.0.0-alpha.49",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },

examples/angular/column-ordering/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/column-ordering/src/app/app.ts

@@ -12,6 +12,7 @@ import {
   injectTable,
   tableFeatures,
 } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { faker } from '@faker-js/faker'
 import { makeData } from './makeData'
 import type { Person } from './makeData'
@@ -118,4 +119,10 @@ export class App {
 
   refreshData = () => this.data.set(makeData(20))
   stressTest = () => this.data.set(makeData(1_000))
+  constructor() {
+    injectTanStackTableDevtools(() => ({
+      table: this.table,
+      name: 'column-ordering',
+    }))
+  }
 }

examples/angular/column-pinning-sticky/package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^21.2.13",
     "@angular/router": "^21.2.13",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-table": "^9.0.0-alpha.49",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },

examples/angular/column-pinning-sticky/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/column-pinning-sticky/src/app/app.ts

@@ -10,6 +10,7 @@ import {
   injectTable,
   tableFeatures,
 } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { faker } from '@faker-js/faker'
 import { makeData } from './makeData'
 import type { Person } from './makeData'
@@ -133,4 +134,10 @@ export class App {
 
   refreshData = () => this.data.set(makeData(20))
   stressTest = () => this.data.set(makeData(1_000))
+  constructor() {
+    injectTanStackTableDevtools(() => ({
+      table: this.table,
+      name: 'column-pinning-sticky',
+    }))
+  }
 }

examples/angular/column-pinning/package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^21.2.13",
     "@angular/router": "^21.2.13",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-table": "^9.0.0-alpha.49",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },

examples/angular/column-pinning/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/column-pinning/src/app/app.ts

@@ -12,6 +12,7 @@ import {
   injectTable,
   tableFeatures,
 } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { faker } from '@faker-js/faker'
 import { NgTemplateOutlet, SlicePipe } from '@angular/common'
 import { makeData } from './makeData'
@@ -138,4 +139,10 @@ export class App {
 
   refreshData = () => this.data.set(makeData(20))
   stressTest = () => this.data.set(makeData(1_000))
+  constructor() {
+    injectTanStackTableDevtools(() => ({
+      table: this.table,
+      name: 'column-pinning',
+    }))
+  }
 }

examples/angular/column-resizing-performant/package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^21.2.13",
     "@angular/router": "^21.2.13",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-table": "^9.0.0-alpha.49",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },

examples/angular/column-resizing-performant/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/column-resizing-performant/src/app/app.ts

@@ -13,6 +13,7 @@ import {
   shallow,
   tableFeatures,
 } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { makeData } from './makeData'
 import { TableResizableCells } from './resizable-cell/resizable-cell'
 import type { Person } from './makeData'
@@ -128,4 +129,10 @@ export class App {
 
   refreshData = () => this.data.set(makeData(200))
   stressTest = () => this.data.set(makeData(2_000))
+  constructor() {
+    injectTanStackTableDevtools(() => ({
+      table: this.table,
+      name: 'column-resizing-performant',
+    }))
+  }
 }

examples/angular/column-visibility/package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^21.2.13",
     "@angular/router": "^21.2.13",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-table": "^9.0.0-alpha.49",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },

examples/angular/column-visibility/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/column-visibility/src/app/app.ts

@@ -11,6 +11,7 @@ import {
   isFunction,
   tableFeatures,
 } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
 import { makeData } from './makeData'
 import type { Person } from './makeData'
 import type { ColumnDef, ColumnVisibilityState } from '@tanstack/angular-table'
@@ -105,4 +106,10 @@ export class App {
 
   refreshData = () => this.data.set(makeData(20))
   stressTest = () => this.data.set(makeData(1_000))
+  constructor() {
+    injectTanStackTableDevtools(() => ({
+      table: this.table,
+      name: 'column-visibility',
+    }))
+  }
 }

examples/angular/composable-tables/package.json

@@ -18,7 +18,9 @@
     "@angular/platform-browser": "^21.2.13",
     "@angular/router": "^21.2.13",
     "@faker-js/faker": "^10.4.0",
+    "@tanstack/angular-devtools": "^0.0.4",
     "@tanstack/angular-table": "^9.0.0-alpha.49",
+    "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1"
   },