diff --git a/examples/angular/basic-app-table/package.json b/examples/angular/basic-app-table/package.json
index 71ccac31ea..1eacd23556 100644
--- a/examples/angular/basic-app-table/package.json
+++ b/examples/angular/basic-app-table/package.json
@@ -17,7 +17,9 @@
"@angular/forms": "^21.2.12",
"@angular/platform-browser": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/basic-app-table/src/app/app.config.ts b/examples/angular/basic-app-table/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/basic-app-table/src/app/app.config.ts
+++ b/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/basic-app-table/src/app/app.ts b/examples/angular/basic-app-table/src/app/app.ts
index cb578b1920..b494583ec1 100644
--- a/examples/angular/basic-app-table/src/app/app.ts
+++ b/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',
+ }))
+ }
}
diff --git a/examples/angular/basic-inject-table/package.json b/examples/angular/basic-inject-table/package.json
index b321954056..eb63f68c82 100644
--- a/examples/angular/basic-inject-table/package.json
+++ b/examples/angular/basic-inject-table/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/basic-inject-table/src/app/app.config.ts b/examples/angular/basic-inject-table/src/app/app.config.ts
index 00f6004def..1805a5f5ce 100644
--- a/examples/angular/basic-inject-table/src/app/app.config.ts
+++ b/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/basic-inject-table/src/app/app.ts b/examples/angular/basic-inject-table/src/app/app.ts
index 44cce9194c..bef36c5583 100644
--- a/examples/angular/basic-inject-table/src/app/app.ts
+++ b/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',
+ }))
+ }
}
diff --git a/examples/angular/column-ordering/package.json b/examples/angular/column-ordering/package.json
index eed1caee54..cbf8e0b1e8 100644
--- a/examples/angular/column-ordering/package.json
+++ b/examples/angular/column-ordering/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/column-ordering/src/app/app.config.ts b/examples/angular/column-ordering/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/column-ordering/src/app/app.config.ts
+++ b/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/column-ordering/src/app/app.ts b/examples/angular/column-ordering/src/app/app.ts
index adcd415740..a8f866efff 100644
--- a/examples/angular/column-ordering/src/app/app.ts
+++ b/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',
+ }))
+ }
}
diff --git a/examples/angular/column-pinning-sticky/package.json b/examples/angular/column-pinning-sticky/package.json
index 7758846811..8c461ade33 100644
--- a/examples/angular/column-pinning-sticky/package.json
+++ b/examples/angular/column-pinning-sticky/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/column-pinning-sticky/src/app/app.config.ts b/examples/angular/column-pinning-sticky/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/column-pinning-sticky/src/app/app.config.ts
+++ b/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/column-pinning-sticky/src/app/app.ts b/examples/angular/column-pinning-sticky/src/app/app.ts
index c001307ce2..27ab0e349a 100644
--- a/examples/angular/column-pinning-sticky/src/app/app.ts
+++ b/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',
+ }))
+ }
}
diff --git a/examples/angular/column-pinning/package.json b/examples/angular/column-pinning/package.json
index c2de110d7a..3a90547f08 100644
--- a/examples/angular/column-pinning/package.json
+++ b/examples/angular/column-pinning/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/column-pinning/src/app/app.config.ts b/examples/angular/column-pinning/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/column-pinning/src/app/app.config.ts
+++ b/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/column-pinning/src/app/app.ts b/examples/angular/column-pinning/src/app/app.ts
index 34cc9de4b1..495a63ef22 100644
--- a/examples/angular/column-pinning/src/app/app.ts
+++ b/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',
+ }))
+ }
}
diff --git a/examples/angular/column-resizing-performant/package.json b/examples/angular/column-resizing-performant/package.json
index cacb02b3c8..e21891bf2a 100644
--- a/examples/angular/column-resizing-performant/package.json
+++ b/examples/angular/column-resizing-performant/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/column-resizing-performant/src/app/app.config.ts b/examples/angular/column-resizing-performant/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/column-resizing-performant/src/app/app.config.ts
+++ b/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/column-resizing-performant/src/app/app.ts b/examples/angular/column-resizing-performant/src/app/app.ts
index e09963e237..21445b4f46 100644
--- a/examples/angular/column-resizing-performant/src/app/app.ts
+++ b/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',
+ }))
+ }
}
diff --git a/examples/angular/column-visibility/package.json b/examples/angular/column-visibility/package.json
index 9f3ddad2c1..a19ddacfc5 100644
--- a/examples/angular/column-visibility/package.json
+++ b/examples/angular/column-visibility/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/column-visibility/src/app/app.config.ts b/examples/angular/column-visibility/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/column-visibility/src/app/app.config.ts
+++ b/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/column-visibility/src/app/app.ts b/examples/angular/column-visibility/src/app/app.ts
index 5ae88eff7e..fd295b5afa 100644
--- a/examples/angular/column-visibility/src/app/app.ts
+++ b/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',
+ }))
+ }
}
diff --git a/examples/angular/composable-tables/package.json b/examples/angular/composable-tables/package.json
index 325e933f4e..c8df771a44 100644
--- a/examples/angular/composable-tables/package.json
+++ b/examples/angular/composable-tables/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/composable-tables/src/app/app.config.ts b/examples/angular/composable-tables/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/composable-tables/src/app/app.config.ts
+++ b/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/composable-tables/src/app/components/products-table/products-table.ts b/examples/angular/composable-tables/src/app/components/products-table/products-table.ts
index b1808695a8..5d6e4a285a 100644
--- a/examples/angular/composable-tables/src/app/components/products-table/products-table.ts
+++ b/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,11 @@ export class ProductsTable {
refreshData = () => this.data.set(makeProductData(1_000))
stressTest = () => this.data.set(makeProductData(200_000))
+
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'products-table',
+ }))
+ }
}
diff --git a/examples/angular/composable-tables/src/app/components/users-table/users-table.ts b/examples/angular/composable-tables/src/app/components/users-table/users-table.ts
index b0a150513a..430dde604f 100644
--- a/examples/angular/composable-tables/src/app/components/users-table/users-table.ts
+++ b/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,11 @@ export class UsersTable {
refreshData = () => this.data.set(makeData(1_000))
stressTest = () => this.data.set(makeData(200_000))
+
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'users-table',
+ }))
+ }
}
diff --git a/examples/angular/custom-plugin/package.json b/examples/angular/custom-plugin/package.json
index 62a88bd585..5fb41e2429 100644
--- a/examples/angular/custom-plugin/package.json
+++ b/examples/angular/custom-plugin/package.json
@@ -17,7 +17,9 @@
"@angular/forms": "^21.2.12",
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/custom-plugin/src/app/app.config.ts b/examples/angular/custom-plugin/src/app/app.config.ts
index d6d1974987..5842a3e348 100644
--- a/examples/angular/custom-plugin/src/app/app.config.ts
+++ b/examples/angular/custom-plugin/src/app/app.config.ts
@@ -1,7 +1,23 @@
-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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/custom-plugin/src/app/app.ts b/examples/angular/custom-plugin/src/app/app.ts
index 0944e1f6e9..d9d7a2ac15 100644
--- a/examples/angular/custom-plugin/src/app/app.ts
+++ b/examples/angular/custom-plugin/src/app/app.ts
@@ -8,6 +8,7 @@ import {
rowPaginationFeature,
tableFeatures,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { densityPlugin } from './density/density-feature'
import { makeData } from './makeData'
import type { DensityState } from './density/density-feature'
@@ -79,4 +80,10 @@ export class App {
refreshData = () => this.data.set(makeData(20))
stressTest = () => this.data.set(makeData(1_000))
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'custom-plugin',
+ }))
+ }
}
diff --git a/examples/angular/editable/package.json b/examples/angular/editable/package.json
index c86806b50a..8bda8b0428 100644
--- a/examples/angular/editable/package.json
+++ b/examples/angular/editable/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/editable/src/app/app.config.ts b/examples/angular/editable/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/editable/src/app/app.config.ts
+++ b/examples/angular/editable/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/editable/src/app/app.ts b/examples/angular/editable/src/app/app.ts
index d12ca1dbb0..6be73a3ea0 100644
--- a/examples/angular/editable/src/app/app.ts
+++ b/examples/angular/editable/src/app/app.ts
@@ -14,6 +14,7 @@ import {
rowPaginationFeature,
tableFeatures,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { EditableCell } from './editable-cell/editable-cell'
import { makeData } from './makeData'
import type { Person } from './makeData'
@@ -130,4 +131,10 @@ export class App {
refreshData = () => this.data.set(makeData(10_000))
stressTest = () => this.data.set(makeData(200_000))
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'editable',
+ }))
+ }
}
diff --git a/examples/angular/expanding/package.json b/examples/angular/expanding/package.json
index 334cf7c840..f46c3fd3fe 100644
--- a/examples/angular/expanding/package.json
+++ b/examples/angular/expanding/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/expanding/src/app/app.config.ts b/examples/angular/expanding/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/expanding/src/app/app.config.ts
+++ b/examples/angular/expanding/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/expanding/src/app/app.ts b/examples/angular/expanding/src/app/app.ts
index 8670a8e65b..ef7c3c3f57 100644
--- a/examples/angular/expanding/src/app/app.ts
+++ b/examples/angular/expanding/src/app/app.ts
@@ -16,6 +16,7 @@ import {
shallow,
tableFeatures,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { ReactiveFormsModule } from '@angular/forms'
import { makeData } from './makeData'
import {
@@ -128,4 +129,10 @@ export class App {
refreshData = () => this.data.set(makeData(100, 5, 3))
stressTest = () => this.data.set(makeData(10_000, 5, 3))
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'expanding',
+ }))
+ }
}
diff --git a/examples/angular/filters/package.json b/examples/angular/filters/package.json
index e3f7635117..aee3547cad 100644
--- a/examples/angular/filters/package.json
+++ b/examples/angular/filters/package.json
@@ -18,8 +18,10 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
+ "@tanstack/angular-devtools": "^0.0.4",
"@tanstack/angular-pacer": "^0.23.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/filters/src/app/app.config.ts b/examples/angular/filters/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/filters/src/app/app.config.ts
+++ b/examples/angular/filters/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/filters/src/app/app.ts b/examples/angular/filters/src/app/app.ts
index 7cab3f551f..705a402137 100644
--- a/examples/angular/filters/src/app/app.ts
+++ b/examples/angular/filters/src/app/app.ts
@@ -19,6 +19,7 @@ import {
rowPaginationFeature,
tableFeatures,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { makeData } from './makeData'
import { TableFilter } from './table-filter/table-filter'
import type { ColumnFiltersState, Updater } from '@tanstack/angular-table'
@@ -120,4 +121,10 @@ export class App {
refreshData = () => this.data.set(makeData(1_000))
stressTest = () => this.data.set(makeData(200_000))
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'filters',
+ }))
+ }
}
diff --git a/examples/angular/grouping/package.json b/examples/angular/grouping/package.json
index db45ec5273..fb48f29c1c 100644
--- a/examples/angular/grouping/package.json
+++ b/examples/angular/grouping/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/grouping/src/app/app.config.ts b/examples/angular/grouping/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/grouping/src/app/app.config.ts
+++ b/examples/angular/grouping/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/grouping/src/app/app.ts b/examples/angular/grouping/src/app/app.ts
index 9f5aa4aa07..e36e3d4a89 100644
--- a/examples/angular/grouping/src/app/app.ts
+++ b/examples/angular/grouping/src/app/app.ts
@@ -5,6 +5,7 @@ import {
signal,
} from '@angular/core'
import { FlexRender, isFunction } from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { columns, injectTable } from './columns'
import { makeData } from './makeData'
import type { GroupingState, Updater } from '@tanstack/angular-table'
@@ -53,4 +54,10 @@ export class App {
refreshData = () => this.data.set(makeData(1_000))
stressTest = () => this.data.set(makeData(200_000))
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'grouping',
+ }))
+ }
}
diff --git a/examples/angular/remote-data/package.json b/examples/angular/remote-data/package.json
index 52c5522f4f..db04f141e6 100644
--- a/examples/angular/remote-data/package.json
+++ b/examples/angular/remote-data/package.json
@@ -22,7 +22,7 @@
"@angular/platform-server": "^21.2.12",
"@angular/router": "^21.2.12",
"@angular/ssr": "^21.2.11",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
"express": "^5.2.1",
"rxjs": "~7.8.2"
},
diff --git a/examples/angular/row-dnd/package.json b/examples/angular/row-dnd/package.json
index 5a95e11070..48f08b0f51 100644
--- a/examples/angular/row-dnd/package.json
+++ b/examples/angular/row-dnd/package.json
@@ -19,7 +19,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/row-dnd/src/app/app.config.ts b/examples/angular/row-dnd/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/row-dnd/src/app/app.config.ts
+++ b/examples/angular/row-dnd/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/row-dnd/src/app/app.ts b/examples/angular/row-dnd/src/app/app.ts
index f5361a670d..bd773fcbb7 100644
--- a/examples/angular/row-dnd/src/app/app.ts
+++ b/examples/angular/row-dnd/src/app/app.ts
@@ -13,6 +13,7 @@ import {
rowPaginationFeature,
tableFeatures,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { CdkDrag, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop'
import { JsonPipe } from '@angular/common'
import { DragHandleCell } from './drag-handle-cell/drag-handle-cell'
@@ -94,4 +95,10 @@ export class App {
refreshData = () => this.data.set(makeData(20))
stressTest = () => this.data.set(makeData(1_000))
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'row-dnd',
+ }))
+ }
}
diff --git a/examples/angular/row-selection-signal/package.json b/examples/angular/row-selection-signal/package.json
index 0209579df9..69255cdee6 100644
--- a/examples/angular/row-selection-signal/package.json
+++ b/examples/angular/row-selection-signal/package.json
@@ -19,7 +19,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/platform-browser-dynamic": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/row-selection-signal/src/app/app.component.ts b/examples/angular/row-selection-signal/src/app/app.component.ts
index 55152adb6b..0711e7a2c1 100644
--- a/examples/angular/row-selection-signal/src/app/app.component.ts
+++ b/examples/angular/row-selection-signal/src/app/app.component.ts
@@ -17,6 +17,7 @@ import {
rowSelectionFeature,
tableFeatures,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { FilterComponent } from './filter'
import { makeData } from './makeData'
import {
@@ -157,4 +158,10 @@ export class AppComponent {
refreshData = () => this.data.set(makeData(1_000))
stressTest = () => this.data.set(makeData(200_000))
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'row-selection-signal',
+ }))
+ }
}
diff --git a/examples/angular/row-selection-signal/src/app/app.config.ts b/examples/angular/row-selection-signal/src/app/app.config.ts
index f997e614ac..f654e82bfa 100644
--- a/examples/angular/row-selection-signal/src/app/app.config.ts
+++ b/examples/angular/row-selection-signal/src/app/app.config.ts
@@ -1,5 +1,21 @@
+import { isDevMode } from '@angular/core'
+import { provideTanStackDevtools } from '@tanstack/angular-devtools/provider'
import type { ApplicationConfig } from '@angular/core'
export const appConfig: ApplicationConfig = {
- providers: [],
+ providers: [
+ isDevMode()
+ ? provideTanStackDevtools(() => ({
+ plugins: [
+ {
+ name: 'TanStack Table',
+ render: () =>
+ import('@tanstack/angular-table-devtools').then((m) =>
+ m.TableDevtoolsPanel(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/row-selection/package.json b/examples/angular/row-selection/package.json
index 4abe641660..8e8ca620bd 100644
--- a/examples/angular/row-selection/package.json
+++ b/examples/angular/row-selection/package.json
@@ -19,7 +19,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/row-selection/src/app/app.config.ts b/examples/angular/row-selection/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/row-selection/src/app/app.config.ts
+++ b/examples/angular/row-selection/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/row-selection/src/app/app.ts b/examples/angular/row-selection/src/app/app.ts
index e495508fc0..f60dfcedea 100644
--- a/examples/angular/row-selection/src/app/app.ts
+++ b/examples/angular/row-selection/src/app/app.ts
@@ -10,6 +10,7 @@ import {
flexRenderComponent,
shallow,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { TableFilter } from './table-filter/table-filter'
import { makeData } from './makeData'
import {
@@ -143,4 +144,10 @@ export class App {
toggleEnableRowSelection() {
this.enableRowSelection.update((value) => !value)
}
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'row-selection',
+ }))
+ }
}
diff --git a/examples/angular/signal-input/package.json b/examples/angular/signal-input/package.json
index d39b20fc2e..a4f683838f 100644
--- a/examples/angular/signal-input/package.json
+++ b/examples/angular/signal-input/package.json
@@ -19,7 +19,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/signal-input/src/app/app.config.ts b/examples/angular/signal-input/src/app/app.config.ts
index cbb47d366c..00db520fb7 100644
--- a/examples/angular/signal-input/src/app/app.config.ts
+++ b/examples/angular/signal-input/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(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/signal-input/src/app/person-table/person-table.ts b/examples/angular/signal-input/src/app/person-table/person-table.ts
index dfdc308161..a8a8f37af2 100644
--- a/examples/angular/signal-input/src/app/person-table/person-table.ts
+++ b/examples/angular/signal-input/src/app/person-table/person-table.ts
@@ -7,6 +7,7 @@ import {
rowPaginationFeature,
tableFeatures,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import type { ColumnDef, PaginationState } from '@tanstack/angular-table'
import type { Person } from '../makeData'
@@ -68,4 +69,10 @@ export class PersonTable {
onPageSizeChange(event: any) {
this.table.setPageSize(Number(event.target.value))
}
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'signal-input',
+ }))
+ }
}
diff --git a/examples/angular/sub-components/package.json b/examples/angular/sub-components/package.json
index 6b3336ed6f..5f55b1b178 100644
--- a/examples/angular/sub-components/package.json
+++ b/examples/angular/sub-components/package.json
@@ -18,7 +18,9 @@
"@angular/platform-browser": "^21.2.12",
"@angular/router": "^21.2.12",
"@faker-js/faker": "^10.4.0",
- "@tanstack/angular-table": "^9.0.0-alpha.46",
+ "@tanstack/angular-devtools": "^0.0.4",
+ "@tanstack/angular-table": "^9.0.0-alpha.47",
+ "@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
"rxjs": "~7.8.2",
"tslib": "^2.8.1"
},
diff --git a/examples/angular/sub-components/src/app/app.config.ts b/examples/angular/sub-components/src/app/app.config.ts
index f997e614ac..f654e82bfa 100644
--- a/examples/angular/sub-components/src/app/app.config.ts
+++ b/examples/angular/sub-components/src/app/app.config.ts
@@ -1,5 +1,21 @@
+import { isDevMode } from '@angular/core'
+import { provideTanStackDevtools } from '@tanstack/angular-devtools/provider'
import type { ApplicationConfig } from '@angular/core'
export const appConfig: ApplicationConfig = {
- providers: [],
+ providers: [
+ isDevMode()
+ ? provideTanStackDevtools(() => ({
+ plugins: [
+ {
+ name: 'TanStack Table',
+ render: () =>
+ import('@tanstack/angular-table-devtools').then((m) =>
+ m.TableDevtoolsPanel(),
+ ),
+ },
+ ],
+ }))
+ : [],
+ ],
}
diff --git a/examples/angular/sub-components/src/app/app.ts b/examples/angular/sub-components/src/app/app.ts
index 23f564c4b5..a45e0e5dae 100644
--- a/examples/angular/sub-components/src/app/app.ts
+++ b/examples/angular/sub-components/src/app/app.ts
@@ -8,6 +8,7 @@ import {
rowExpandingFeature,
tableFeatures,
} from '@tanstack/angular-table'
+import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
import { ReactiveFormsModule } from '@angular/forms'
import { JsonPipe } from '@angular/common'
import { makeData } from './makeData'
@@ -121,4 +122,10 @@ export class App {
refreshData = () => this.data.set(makeData(20))
stressTest = () => this.data.set(makeData(1_000))
+ constructor() {
+ injectTanStackTableDevtools(() => ({
+ table: this.table,
+ name: 'sub-components',
+ }))
+ }
}
diff --git a/examples/lit/basic-external-store/package.json b/examples/lit/basic-external-store/package.json
new file mode 100644
index 0000000000..2eb63b874d
--- /dev/null
+++ b/examples/lit/basic-external-store/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic-external-store",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/lit/basic/package.json b/examples/lit/basic/package.json
new file mode 100644
index 0000000000..842b57344b
--- /dev/null
+++ b/examples/lit/basic/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/preact/basic-external-store/package.json b/examples/preact/basic-external-store/package.json
new file mode 100644
index 0000000000..2eb63b874d
--- /dev/null
+++ b/examples/preact/basic-external-store/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic-external-store",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/preact/basic/package.json b/examples/preact/basic/package.json
new file mode 100644
index 0000000000..842b57344b
--- /dev/null
+++ b/examples/preact/basic/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/qwik/basic/package.json b/examples/qwik/basic/package.json
new file mode 100644
index 0000000000..842b57344b
--- /dev/null
+++ b/examples/qwik/basic/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/qwik/filters/package.json b/examples/qwik/filters/package.json
new file mode 100644
index 0000000000..89473421a1
--- /dev/null
+++ b/examples/qwik/filters/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "filters",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/qwik/row-selection/package.json b/examples/qwik/row-selection/package.json
new file mode 100644
index 0000000000..f674366b7a
--- /dev/null
+++ b/examples/qwik/row-selection/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "row-selection",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/qwik/sorting/package.json b/examples/qwik/sorting/package.json
new file mode 100644
index 0000000000..923c01c23c
--- /dev/null
+++ b/examples/qwik/sorting/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "sorting",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/basic-external-store/package.json b/examples/react/basic-external-store/package.json
new file mode 100644
index 0000000000..2eb63b874d
--- /dev/null
+++ b/examples/react/basic-external-store/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic-external-store",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/basic-shadcn/package.json b/examples/react/basic-shadcn/package.json
new file mode 100644
index 0000000000..f4736b429e
--- /dev/null
+++ b/examples/react/basic-shadcn/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic-shadcn",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/basic/package.json b/examples/react/basic/package.json
new file mode 100644
index 0000000000..842b57344b
--- /dev/null
+++ b/examples/react/basic/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/bootstrap/package.json b/examples/react/bootstrap/package.json
new file mode 100644
index 0000000000..dd0474eb35
--- /dev/null
+++ b/examples/react/bootstrap/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "bootstrap",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/component-lib-shadcn-radix/package.json b/examples/react/component-lib-shadcn-radix/package.json
new file mode 100644
index 0000000000..784702ab1b
--- /dev/null
+++ b/examples/react/component-lib-shadcn-radix/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "component-lib-shadcn-radix",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/composable-tables/package.json b/examples/react/composable-tables/package.json
index 07a1567252..a2c66efa2d 100644
--- a/examples/react/composable-tables/package.json
+++ b/examples/react/composable-tables/package.json
@@ -19,6 +19,8 @@
"devDependencies": {
"@rolldown/plugin-babel": "^0.2.3",
"@rollup/plugin-replace": "^6.0.3",
+ "@tanstack/react-devtools": "^0.10.5",
+ "@tanstack/react-table-devtools": "^9.0.0-alpha.46",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^6.0.1",
diff --git a/examples/react/composable-tables/src/main.tsx b/examples/react/composable-tables/src/main.tsx
index 63239f86f5..07af91adb2 100644
--- a/examples/react/composable-tables/src/main.tsx
+++ b/examples/react/composable-tables/src/main.tsx
@@ -5,6 +5,11 @@ import { createAppColumnHelper, useAppTable } from './hooks/table'
import { makeData, makeProductData } from './makeData'
import type { Person, Product } from './makeData'
import './index.css'
+import { TanStackDevtools } from '@tanstack/react-devtools'
+import {
+ tableDevtoolsPlugin,
+ useTanStackTableDevtools,
+} from '@tanstack/react-table-devtools'
// Import cell components directly - they use useCellContext internally
// Create column helpers with TFeatures already bound - only need TData!
@@ -80,6 +85,8 @@ function UsersTable() {
(state) => state, // default selector
)
+ useTanStackTableDevtools(table, 'Users table')
+
return (
// Main selector on AppTable - selects all needed state in one place
state, // default selector
)
+ useTanStackTableDevtools(table, 'Products table')
+
return (
({
@@ -436,5 +445,6 @@ if (!rootElement) throw new Error('Failed to find the root element')
ReactDOM.createRoot(rootElement).render(
+
,
)
diff --git a/examples/react/custom-features/package.json b/examples/react/custom-features/package.json
new file mode 100644
index 0000000000..71654182c8
--- /dev/null
+++ b/examples/react/custom-features/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "custom-features",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/editable-data/package.json b/examples/react/editable-data/package.json
new file mode 100644
index 0000000000..911a54d820
--- /dev/null
+++ b/examples/react/editable-data/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "editable-data",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/full-width-resizable-table/package.json b/examples/react/full-width-resizable-table/package.json
new file mode 100644
index 0000000000..cedba1f787
--- /dev/null
+++ b/examples/react/full-width-resizable-table/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "full-width-resizable-table",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/full-width-table/package.json b/examples/react/full-width-table/package.json
new file mode 100644
index 0000000000..75a2028ef0
--- /dev/null
+++ b/examples/react/full-width-table/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "full-width-table",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/fully-controlled/package.json b/examples/react/fully-controlled/package.json
new file mode 100644
index 0000000000..0d1aa87f2b
--- /dev/null
+++ b/examples/react/fully-controlled/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "fully-controlled",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/kitchen-sink-shadcn/package.json b/examples/react/kitchen-sink-shadcn/package.json
new file mode 100644
index 0000000000..4161200811
--- /dev/null
+++ b/examples/react/kitchen-sink-shadcn/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "kitchen-sink-shadcn",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/kitchen-sink/package.json b/examples/react/kitchen-sink/package.json
new file mode 100644
index 0000000000..b20da029bb
--- /dev/null
+++ b/examples/react/kitchen-sink/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "kitchen-sink",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/material-ui-pagination/package.json b/examples/react/material-ui-pagination/package.json
new file mode 100644
index 0000000000..af9358c08c
--- /dev/null
+++ b/examples/react/material-ui-pagination/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "material-ui-pagination",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/pagination-controlled/package.json b/examples/react/pagination-controlled/package.json
new file mode 100644
index 0000000000..420bc37436
--- /dev/null
+++ b/examples/react/pagination-controlled/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "pagination-controlled",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/query-router-search-params/package.json b/examples/react/query-router-search-params/package.json
new file mode 100644
index 0000000000..2260684d0d
--- /dev/null
+++ b/examples/react/query-router-search-params/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "query-router-search-params",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/shadcn-basic/package.json b/examples/react/shadcn-basic/package.json
new file mode 100644
index 0000000000..c0f6ed761c
--- /dev/null
+++ b/examples/react/shadcn-basic/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "shadcn-basic",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/shadcn-kitchen-sink/package.json b/examples/react/shadcn-kitchen-sink/package.json
new file mode 100644
index 0000000000..067e61344a
--- /dev/null
+++ b/examples/react/shadcn-kitchen-sink/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "shadcn-kitchen-sink",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/state-external-state-slices/package.json b/examples/react/state-external-state-slices/package.json
new file mode 100644
index 0000000000..554fce1593
--- /dev/null
+++ b/examples/react/state-external-state-slices/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "state-external-state-slices",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/state-external-store/package.json b/examples/react/state-external-store/package.json
new file mode 100644
index 0000000000..0967c4bacc
--- /dev/null
+++ b/examples/react/state-external-store/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "state-external-store",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/tanstack-form/package.json b/examples/react/tanstack-form/package.json
new file mode 100644
index 0000000000..52edb50ee3
--- /dev/null
+++ b/examples/react/tanstack-form/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "tanstack-form",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/react/tanstack-query/package.json b/examples/react/tanstack-query/package.json
new file mode 100644
index 0000000000..05b13f2f51
--- /dev/null
+++ b/examples/react/tanstack-query/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "tanstack-query",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/solid/basic-external-store/package.json b/examples/solid/basic-external-store/package.json
new file mode 100644
index 0000000000..2eb63b874d
--- /dev/null
+++ b/examples/solid/basic-external-store/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic-external-store",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/solid/basic-table-helper/package.json b/examples/solid/basic-table-helper/package.json
new file mode 100644
index 0000000000..6e0a0aeb50
--- /dev/null
+++ b/examples/solid/basic-table-helper/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic-table-helper",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/solid/basic/package.json b/examples/solid/basic/package.json
new file mode 100644
index 0000000000..842b57344b
--- /dev/null
+++ b/examples/solid/basic/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/solid/bootstrap/package.json b/examples/solid/bootstrap/package.json
new file mode 100644
index 0000000000..dd0474eb35
--- /dev/null
+++ b/examples/solid/bootstrap/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "bootstrap",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/svelte/basic-external-store/package.json b/examples/svelte/basic-external-store/package.json
new file mode 100644
index 0000000000..2eb63b874d
--- /dev/null
+++ b/examples/svelte/basic-external-store/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic-external-store",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/svelte/basic-table-helper/package.json b/examples/svelte/basic-table-helper/package.json
new file mode 100644
index 0000000000..6e0a0aeb50
--- /dev/null
+++ b/examples/svelte/basic-table-helper/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic-table-helper",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/svelte/basic/package.json b/examples/svelte/basic/package.json
new file mode 100644
index 0000000000..842b57344b
--- /dev/null
+++ b/examples/svelte/basic/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/vue/basic/package.json b/examples/vue/basic/package.json
new file mode 100644
index 0000000000..842b57344b
--- /dev/null
+++ b/examples/vue/basic/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "basic",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/examples/vue/pagination-controlled/package.json b/examples/vue/pagination-controlled/package.json
new file mode 100644
index 0000000000..420bc37436
--- /dev/null
+++ b/examples/vue/pagination-controlled/package.json
@@ -0,0 +1,5 @@
+{
+ "name": "pagination-controlled",
+ "version": "0.0.0",
+ "private": true
+}
\ No newline at end of file
diff --git a/packages/angular-table-devtools/eslint.config.js b/packages/angular-table-devtools/eslint.config.js
new file mode 100644
index 0000000000..892f5314df
--- /dev/null
+++ b/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
diff --git a/packages/angular-table-devtools/package.json b/packages/angular-table-devtools/package.json
new file mode 100644
index 0000000000..6d5d25e4c4
--- /dev/null
+++ b/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": "^0.5.0",
+ "@tanstack/table-core": "workspace:*",
+ "@tanstack/table-devtools": "workspace:*"
+ },
+ "peerDependencies": {
+ "@angular/core": ">=21.0.0"
+ }
+}
diff --git a/packages/angular-table-devtools/src/TableDevtools.ts b/packages/angular-table-devtools/src/TableDevtools.ts
new file mode 100644
index 0000000000..f8c9ff90d7
--- /dev/null
+++ b/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 {}
+
+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
+ }
diff --git a/packages/angular-table-devtools/src/index.ts b/packages/angular-table-devtools/src/index.ts
new file mode 100644
index 0000000000..224ae9fee8
--- /dev/null
+++ b/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
diff --git a/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts b/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
new file mode 100644
index 0000000000..d21be1abf6
--- /dev/null
+++ b/packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
@@ -0,0 +1,68 @@
+import {
+ removeTableDevtoolsTarget,
+ upsertTableDevtoolsTarget,
+} from '@tanstack/table-devtools'
+import {
+ APP_ID,
+ DestroyRef,
+ Injector,
+ assertInInjectionContext,
+ effect,
+ inject,
+} from '@angular/core'
+import type { Table } from '@tanstack/table-core'
+
+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 interface InjectTanStackTableDevtoolsOptions {
+ table: Table | undefined
+ name: string
+ enabled?: () => boolean
+ injector?: Injector
+}
+
+export function injectTanStackTableDevtools(
+ 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 { table, name } = options()
+ const enabledValue = enabled()
+ if (!enabledValue || !table) {
+ removeTableDevtoolsTarget(registrationId)
+ }
+ upsertTableDevtoolsTarget({
+ id: registrationId,
+ table: table,
+ name: normalizeName(name),
+ })
+ onCleanup(() => {
+ removeTableDevtoolsTarget(registrationId)
+ })
+ },
+ { injector },
+ )
+
+ destroyRef.onDestroy(() => {
+ removeTableDevtoolsTarget(registrationId)
+ })
+}
+
+export function injectTanStackTableDevtoolsNoOp(
+ options: () => InjectTanStackTableDevtoolsOptions,
+): void {}
diff --git a/packages/angular-table-devtools/src/plugin.ts b/packages/angular-table-devtools/src/plugin.ts
new file mode 100644
index 0000000000..4db67c28b9
--- /dev/null
+++ b/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[0]
+
+const plugins = createAngularPlugin({
+ name: 'TanStack Table',
+ render: TableDevtoolsPanel,
+})
+
+export const tableDevtoolsPlugin: TableDevtoolsPluginFactory = plugins[0]
+export const tableDevtoolsNoOpPlugin: TableDevtoolsPluginFactory =
+ plugins[1] as any
diff --git a/packages/angular-table-devtools/src/production.ts b/packages/angular-table-devtools/src/production.ts
new file mode 100644
index 0000000000..f3e96534ef
--- /dev/null
+++ b/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'
diff --git a/packages/angular-table-devtools/tsconfig.json b/packages/angular-table-devtools/tsconfig.json
new file mode 100644
index 0000000000..7cd68e0598
--- /dev/null
+++ b/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"
+ ]
+}
diff --git a/packages/angular-table-devtools/tsdown.config.ts b/packages/angular-table-devtools/tsdown.config.ts
new file mode 100644
index 0000000000..63b0b0bd20
--- /dev/null
+++ b/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,
+ },
+})
diff --git a/packages/angular-table-devtools/vite.config.ts b/packages/angular-table-devtools/vite.config.ts
new file mode 100644
index 0000000000..8feed8cff3
--- /dev/null
+++ b/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
diff --git a/packages/angular-table/package.json b/packages/angular-table/package.json
index 0379404e81..5d9554bfca 100644
--- a/packages/angular-table/package.json
+++ b/packages/angular-table/package.json
@@ -1,6 +1,6 @@
{
"name": "@tanstack/angular-table",
- "version": "9.0.0-alpha.46",
+ "version": "9.0.0-alpha.49",
"description": "Headless UI for building powerful tables & datagrids for Angular.",
"author": "Tanner Linsley",
"license": "MIT",
diff --git a/packages/react-table-devtools/src/useTanStackTableDevtools.ts b/packages/react-table-devtools/src/useTanStackTableDevtools.ts
index 456f5d8f66..f880651ca5 100644
--- a/packages/react-table-devtools/src/useTanStackTableDevtools.ts
+++ b/packages/react-table-devtools/src/useTanStackTableDevtools.ts
@@ -5,6 +5,7 @@ import {
removeTableDevtoolsTarget,
upsertTableDevtoolsTarget,
} from '@tanstack/table-devtools'
+import { useEffect } from 'react'
import type { RowData, Table, TableFeatures } from '@tanstack/table-core'
export interface UseTanStackTableDevtoolsOptions {
@@ -25,24 +26,32 @@ export function useTanStackTableDevtools<
options?: UseTanStackTableDevtoolsOptions,
): void {
const registrationId = React.useId()
+ const normalizedName = normalizeName(name)
+
+ const instanceId =
+ // instanceId from react table adapter (if it exists) allows for stable devtools registration even if the table instance changes
+ (table as unknown as { instanceId?: string }).instanceId ||
+ `${registrationId}${normalizedName ? `-${normalizedName}` : ``}`
+
const enabled = options?.enabled ?? true
- React.useEffect(() => {
+ useEffect(() => {
if (!enabled || !table) {
- removeTableDevtoolsTarget(registrationId)
+ removeTableDevtoolsTarget(instanceId)
return
}
upsertTableDevtoolsTarget({
- id: registrationId,
+ id: instanceId,
table,
- name: normalizeName(name),
+ name: normalizedName,
})
return () => {
- removeTableDevtoolsTarget(registrationId)
+ removeTableDevtoolsTarget(instanceId)
}
- }, [enabled, name, registrationId, table])
+ // eslint-disable-next-line @eslint-react/exhaustive-deps,react-hooks/exhaustive-deps
+ }, [enabled, registrationId, instanceId])
}
export function useTanStackTableDevtoolsNoOp<
diff --git a/packages/react-table/src/useTable.ts b/packages/react-table/src/useTable.ts
index 8272983306..33f98cabcc 100644
--- a/packages/react-table/src/useTable.ts
+++ b/packages/react-table/src/useTable.ts
@@ -1,6 +1,6 @@
'use client'
-import { useMemo, useState } from 'react'
+import { useId, useMemo, useRef, useState } from 'react'
import { constructTable } from '@tanstack/table-core'
import { shallow, useSelector } from '@tanstack/react-store'
import { reactReactivity } from './reactivity'
@@ -23,6 +23,10 @@ export type ReactTable<
TData extends RowData,
TSelected = TableState,
> = Table & {
+ /**
+ * A stable id reference for table instance
+ */
+ instanceId?: string
/**
* A React HOC (Higher Order Component) that allows you to subscribe to the table state.
*
@@ -137,6 +141,12 @@ export function useTable<
tableOptions: TableOptions,
selector?: (state: TableState) => TSelected,
): ReactTable {
+ const instanceIdRef = useRef(undefined)
+ const id = useId()
+ if (!instanceIdRef.current) {
+ // eslint-disable-next-line @eslint-react/purity
+ instanceIdRef.current = `${id}-${Math.random().toString(36).slice(2, 9)}`
+ }
const [table] = useState(() => {
const tableInstance = constructTable({
...tableOptions,
@@ -156,6 +166,7 @@ export function useTable<
}) as ReactTable['Subscribe']
tableInstance.FlexRender = FlexRender
+ tableInstance.instanceId = id
return tableInstance
})
diff --git a/packages/table-devtools/eslint.config.js b/packages/table-devtools/eslint.config.js
index 5880eb7bfa..9fb656d60d 100644
--- a/packages/table-devtools/eslint.config.js
+++ b/packages/table-devtools/eslint.config.js
@@ -1,13 +1,9 @@
// @ts-check
+import solid from 'eslint-plugin-solid/configs/recommended'
import rootConfig from '../../eslint.config.js'
/** @type {any} */
-const config = [
- ...rootConfig,
- {
- rules: {},
- },
-]
+const config = [...rootConfig, solid]
export default config
diff --git a/packages/table-devtools/package.json b/packages/table-devtools/package.json
index 4cb69c597f..e3258d152d 100644
--- a/packages/table-devtools/package.json
+++ b/packages/table-devtools/package.json
@@ -57,6 +57,7 @@
},
"devDependencies": {
"@tanstack/table-core": "workspace:*",
+ "eslint-plugin-solid": "^0.14.5",
"vite-plugin-solid": "^2.11.12"
}
}
diff --git a/packages/table-devtools/src/TableContextProvider.tsx b/packages/table-devtools/src/TableContextProvider.tsx
index 5b333f30cf..26aa5119fb 100644
--- a/packages/table-devtools/src/TableContextProvider.tsx
+++ b/packages/table-devtools/src/TableContextProvider.tsx
@@ -15,7 +15,7 @@ import type { RowData, Table, TableFeatures } from '@tanstack/table-core'
import type { TableDevtoolsRegistration } from './tableTarget'
type TableDevtoolsTabId = 'features' | 'state' | 'options' | 'rows' | 'columns'
-type AnyTable = Table
+type AnyTable = Table<{}, RowData>
interface TableDevtoolsContextValue {
targets: Accessor>
@@ -31,12 +31,12 @@ const TableDevtoolsContext = createContext<
>(undefined)
export const TableContextProvider: ParentComponent = (props) => {
- const [targets, setTargets] = createSignal>(
- getTableDevtoolsTargets(),
- )
+ const initialTargets = getTableDevtoolsTargets()
+ const [targets, setTargets] =
+ createSignal>(initialTargets)
const [selectedTargetId, setSelectedTargetId] = createSignal<
string | undefined
- >(targets()[0]?.id)
+ >(initialTargets[0]?.id)
const [activeTab, setActiveTab] = createSignal('features')
const selectedTarget = createMemo(() =>
diff --git a/packages/table-devtools/src/components/ColumnsPanel.tsx b/packages/table-devtools/src/components/ColumnsPanel.tsx
index bd168f12af..8395b6d400 100644
--- a/packages/table-devtools/src/components/ColumnsPanel.tsx
+++ b/packages/table-devtools/src/components/ColumnsPanel.tsx
@@ -1,4 +1,4 @@
-import { For } from 'solid-js'
+import { For, Show, createMemo } from 'solid-js'
import { useTableDevtoolsContext } from '../TableContextProvider'
import { useTableStore } from '../useTableStore'
import { useStyles } from '../styles/use-styles'
@@ -32,65 +32,61 @@ export function ColumnsPanel() {
const styles = useStyles()
const { table } = useTableDevtoolsContext()
- const tableInstance = table()
const tableState = useTableStore(
- tableInstance ? tableInstance.store : undefined,
+ () => table()?.store,
(state) => state,
)
- if (!tableInstance) {
- return
- }
-
- const getColumns = (): Array => {
- tableState?.()
- const tableWithColumnFns = tableInstance as unknown as {
- getAllFlatColumns?: () => Array
- getAllLeafColumns?: () => Array
+ const columns = createMemo>(() => {
+ const tableInstance = table()
+ if (!tableInstance) {
+ return []
}
+ tableState()
+
return (
- tableWithColumnFns.getAllFlatColumns?.() ??
- tableWithColumnFns.getAllLeafColumns?.() ??
+ tableInstance.getAllFlatColumns?.() ??
+ tableInstance.getAllLeafColumns?.() ??
[]
)
- }
-
- const columns = getColumns()
+ })
return (
-