Skip to content

Commit b79d00d

Browse files
riccardoperrariccardoperra
committed
Add devtools in all angular examples
1 parent 926dcf9 commit b79d00d

100 files changed

Lines changed: 920 additions & 165 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@
1717
"@angular/forms": "^21.2.12",
1818
"@angular/platform-browser": "^21.2.12",
1919
"@faker-js/faker": "^10.4.0",
20-
"@tanstack/angular-table": "^9.0.0-alpha.46",
20+
"@tanstack/angular-devtools": "^0.0.4",
21+
"@tanstack/angular-table": "^9.0.0-alpha.47",
22+
"@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
2123
"rxjs": "~7.8.2",
2224
"tslib": "^2.8.1"
2325
},

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
1-
import { provideBrowserGlobalErrorListeners } from '@angular/core'
1+
import { isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core'
2+
import { provideTanStackDevtools } from '@tanstack/angular-devtools/provider'
23
import type { ApplicationConfig } from '@angular/core'
34

45
export const appConfig: ApplicationConfig = {
5-
providers: [provideBrowserGlobalErrorListeners()],
6+
providers: [
7+
provideBrowserGlobalErrorListeners(),
8+
isDevMode()
9+
? provideTanStackDevtools(() => ({
10+
plugins: [
11+
{
12+
name: 'TanStack Table',
13+
render: () =>
14+
import('@tanstack/angular-table-devtools').then((m) =>
15+
m.TableDevtoolsPanel(),
16+
),
17+
},
18+
],
19+
}))
20+
: [],
21+
],
622
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
22
import { FlexRender, createTableHook } from '@tanstack/angular-table'
3+
import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
34
import { makeData } from './makeData'
45
import type { Person } from './makeData'
56

@@ -68,4 +69,10 @@ export class App {
6869

6970
refreshData = () => this.data.set(makeData(20))
7071
stressTest = () => this.data.set(makeData(1_000))
72+
constructor() {
73+
injectTanStackTableDevtools(() => ({
74+
table: this.table,
75+
name: 'basic-app-table',
76+
}))
77+
}
7178
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
"@angular/platform-browser": "^21.2.12",
1919
"@angular/router": "^21.2.12",
2020
"@faker-js/faker": "^10.4.0",
21-
"@tanstack/angular-table": "^9.0.0-alpha.46",
21+
"@tanstack/angular-devtools": "^0.0.4",
22+
"@tanstack/angular-table": "^9.0.0-alpha.47",
23+
"@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
2224
"rxjs": "~7.8.2",
2325
"tslib": "^2.8.1"
2426
},

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,25 @@
1+
import { isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core'
2+
import { provideTanStackDevtools } from '@tanstack/angular-devtools/provider'
13
import { provideRouter } from '@angular/router'
2-
import { provideBrowserGlobalErrorListeners } from '@angular/core'
34
import { routes } from './app.routes'
45
import type { ApplicationConfig } from '@angular/core'
56

67
export const appConfig: ApplicationConfig = {
7-
providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes)],
8+
providers: [
9+
provideBrowserGlobalErrorListeners(),
10+
provideRouter(routes),
11+
isDevMode()
12+
? provideTanStackDevtools(() => ({
13+
plugins: [
14+
{
15+
name: 'TanStack Table',
16+
render: () =>
17+
import('@tanstack/angular-table-devtools').then((m) =>
18+
m.TableDevtoolsPanel(),
19+
),
20+
},
21+
],
22+
}))
23+
: [],
24+
],
825
}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ChangeDetectionStrategy, Component, signal } from '@angular/core'
22
import { FlexRender, injectTable, tableFeatures } from '@tanstack/angular-table'
3+
import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
34
import { makeData } from './makeData'
45
import type { Person } from './makeData'
56
import type { ColumnDef } from '@tanstack/angular-table'
@@ -66,4 +67,10 @@ export class App {
6667

6768
refreshData = () => this.data.set(makeData(20))
6869
stressTest = () => this.data.set(makeData(1_000))
70+
constructor() {
71+
injectTanStackTableDevtools(() => ({
72+
table: this.table,
73+
name: 'basic-inject-table',
74+
}))
75+
}
6976
}

‎examples/angular/column-ordering/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
"@angular/platform-browser": "^21.2.12",
1919
"@angular/router": "^21.2.12",
2020
"@faker-js/faker": "^10.4.0",
21-
"@tanstack/angular-table": "^9.0.0-alpha.46",
21+
"@tanstack/angular-devtools": "^0.0.4",
22+
"@tanstack/angular-table": "^9.0.0-alpha.47",
23+
"@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
2224
"rxjs": "~7.8.2",
2325
"tslib": "^2.8.1"
2426
},

‎examples/angular/column-ordering/src/app/app.config.ts‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
1-
import { provideBrowserGlobalErrorListeners } from '@angular/core'
1+
import { isDevMode, provideBrowserGlobalErrorListeners } from '@angular/core'
2+
import { provideTanStackDevtools } from '@tanstack/angular-devtools/provider'
23
import type { ApplicationConfig } from '@angular/core'
34

45
export const appConfig: ApplicationConfig = {
5-
providers: [provideBrowserGlobalErrorListeners()],
6+
providers: [
7+
provideBrowserGlobalErrorListeners(),
8+
isDevMode()
9+
? provideTanStackDevtools(() => ({
10+
plugins: [
11+
{
12+
name: 'TanStack Table',
13+
render: () =>
14+
import('@tanstack/angular-table-devtools').then((m) =>
15+
m.TableDevtoolsPanel(),
16+
),
17+
},
18+
],
19+
}))
20+
: [],
21+
],
622
}

‎examples/angular/column-ordering/src/app/app.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
injectTable,
1313
tableFeatures,
1414
} from '@tanstack/angular-table'
15+
import { injectTanStackTableDevtools } from '@tanstack/angular-table-devtools'
1516
import { faker } from '@faker-js/faker'
1617
import { makeData } from './makeData'
1718
import type { Person } from './makeData'
@@ -118,4 +119,10 @@ export class App {
118119

119120
refreshData = () => this.data.set(makeData(20))
120121
stressTest = () => this.data.set(makeData(1_000))
122+
constructor() {
123+
injectTanStackTableDevtools(() => ({
124+
table: this.table,
125+
name: 'column-ordering',
126+
}))
127+
}
121128
}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
"@angular/platform-browser": "^21.2.12",
1919
"@angular/router": "^21.2.12",
2020
"@faker-js/faker": "^10.4.0",
21-
"@tanstack/angular-table": "^9.0.0-alpha.46",
21+
"@tanstack/angular-devtools": "^0.0.4",
22+
"@tanstack/angular-table": "^9.0.0-alpha.47",
23+
"@tanstack/angular-table-devtools": "^9.0.0-alpha.43",
2224
"rxjs": "~7.8.2",
2325
"tslib": "^2.8.1"
2426
},

0 commit comments

Comments
 (0)