@tanstack/angular-table 9.0.0-beta.1 → 9.0.0-beta.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/fesm2022/tanstack-angular-table.mjs +1 -47
- package/dist/fesm2022/tanstack-angular-table.mjs.map +1 -1
- package/dist/types/tanstack-angular-table.d.ts +8 -14
- package/package.json +3 -3
- package/skills/angular/angular-rendering-directives/SKILL.md +4 -4
- package/skills/angular/angular-rendering-directives/references/create-table-hook-registries.md +4 -4
- package/skills/angular/client-to-server/SKILL.md +22 -21
- package/skills/angular/compose-with-tanstack-query/SKILL.md +17 -13
- package/skills/angular/compose-with-tanstack-store/SKILL.md +16 -8
- package/skills/angular/compose-with-tanstack-virtual/SKILL.md +1 -2
- package/skills/angular/getting-started/SKILL.md +34 -43
- package/skills/angular/getting-started/references/feature-row-model-mapping.md +9 -6
- package/skills/angular/migrate-v8-to-v9/SKILL.md +43 -40
- package/skills/angular/migrate-v8-to-v9/references/v8-to-v9-mapping.md +21 -14
- package/skills/angular/production-readiness/SKILL.md +40 -37
- package/skills/angular/table-state/SKILL.md +19 -26
- package/skills/angular/table-state/references/external-atoms-and-app-hook.md +8 -7
- package/src/helpers/cell.ts +6 -2
- package/src/helpers/createTableHook.ts +11 -12
- package/src/helpers/header.ts +4 -2
- package/src/helpers/table.ts +4 -2
- package/src/injectTable.ts +4 -70
package/src/helpers/header.ts
CHANGED
|
@@ -23,7 +23,7 @@ export interface TanStackTableHeaderContext<
|
|
|
23
23
|
* This token is provided by the {@link TanStackTableHeader} directive.
|
|
24
24
|
*/
|
|
25
25
|
export const TanStackTableHeaderToken = new InjectionToken<
|
|
26
|
-
TanStackTableHeaderContext<
|
|
26
|
+
TanStackTableHeaderContext<TableFeatures, RowData, CellData>['header']
|
|
27
27
|
>('[TanStack Table] HeaderContext')
|
|
28
28
|
|
|
29
29
|
/**
|
|
@@ -95,5 +95,7 @@ export function injectTableHeaderContext<
|
|
|
95
95
|
TData extends RowData,
|
|
96
96
|
TValue extends CellData,
|
|
97
97
|
>(): TanStackTableHeaderContext<TFeatures, TData, TValue>['header'] {
|
|
98
|
-
return inject(
|
|
98
|
+
return inject(
|
|
99
|
+
TanStackTableHeaderToken,
|
|
100
|
+
) as unknown as TanStackTableHeaderContext<TFeatures, TData, TValue>['header']
|
|
99
101
|
}
|
package/src/helpers/table.ts
CHANGED
|
@@ -9,7 +9,7 @@ import type { Signal } from '@angular/core'
|
|
|
9
9
|
* This token is provided by the {@link TanStackTable} directive.
|
|
10
10
|
*/
|
|
11
11
|
export const TanStackTableToken = new InjectionToken<
|
|
12
|
-
Signal<AngularTable<
|
|
12
|
+
Signal<AngularTable<TableFeatures, RowData>>
|
|
13
13
|
>('[TanStack Table] Table Context')
|
|
14
14
|
|
|
15
15
|
/**
|
|
@@ -81,5 +81,7 @@ export function injectTableContext<
|
|
|
81
81
|
TFeatures extends TableFeatures,
|
|
82
82
|
TData extends RowData,
|
|
83
83
|
>(): Signal<AngularTable<TFeatures, TData>> {
|
|
84
|
-
return inject(TanStackTableToken)
|
|
84
|
+
return inject(TanStackTableToken) as unknown as Signal<
|
|
85
|
+
AngularTable<TFeatures, TData>
|
|
86
|
+
>
|
|
85
87
|
}
|
package/src/injectTable.ts
CHANGED
|
@@ -15,7 +15,6 @@ import type {
|
|
|
15
15
|
Table,
|
|
16
16
|
TableFeatures,
|
|
17
17
|
TableOptions,
|
|
18
|
-
TableState,
|
|
19
18
|
} from '@tanstack/table-core'
|
|
20
19
|
import type {
|
|
21
20
|
Atom,
|
|
@@ -36,66 +35,11 @@ export type AngularTable<
|
|
|
36
35
|
> = Table<TFeatures, TData> & {
|
|
37
36
|
/**
|
|
38
37
|
* @deprecated Prefer `table.atoms.<slice>.get()` for template/render reads
|
|
39
|
-
* of a specific state slice,
|
|
40
|
-
*
|
|
41
|
-
*
|
|
38
|
+
* of a specific state slice, or Angular computed values around explicit
|
|
39
|
+
* selectors. `table.store.state` is a current-value snapshot and is easy to
|
|
40
|
+
* misuse in render code.
|
|
42
41
|
*/
|
|
43
42
|
readonly store: Table<TFeatures, TData>['store']
|
|
44
|
-
/**
|
|
45
|
-
* The current table state exposed as a flat proxy. Prefer
|
|
46
|
-
* `table.atoms.<slice>.get()` when reading a specific slice.
|
|
47
|
-
*/
|
|
48
|
-
readonly state: Readonly<TableState<TFeatures>>
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function createStateProxy<
|
|
52
|
-
TFeatures extends TableFeatures,
|
|
53
|
-
TData extends RowData,
|
|
54
|
-
>(table: Table<TFeatures, TData>): Readonly<TableState<TFeatures>> {
|
|
55
|
-
const getSnapshot = () => {
|
|
56
|
-
const snapshot = {} as TableState<TFeatures>
|
|
57
|
-
const stateKeys = Object.keys(table.initialState) as Array<
|
|
58
|
-
keyof TableState<TFeatures>
|
|
59
|
-
>
|
|
60
|
-
|
|
61
|
-
for (const key of stateKeys) {
|
|
62
|
-
snapshot[key] = table.atoms[key].get()
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
return snapshot
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
const target = {} as TableState<TFeatures>
|
|
69
|
-
|
|
70
|
-
return new Proxy(target, {
|
|
71
|
-
get(target, prop, receiver) {
|
|
72
|
-
if (prop === 'toJSON') {
|
|
73
|
-
return getSnapshot
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
if (typeof prop === 'string' && prop in table.initialState) {
|
|
77
|
-
return table.atoms[prop as keyof TableState<TFeatures>]?.get()
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
return Reflect.get(target, prop, receiver)
|
|
81
|
-
},
|
|
82
|
-
has(_, prop) {
|
|
83
|
-
return typeof prop === 'string' && prop in table.initialState
|
|
84
|
-
},
|
|
85
|
-
ownKeys() {
|
|
86
|
-
return Reflect.ownKeys(table.initialState)
|
|
87
|
-
},
|
|
88
|
-
getOwnPropertyDescriptor(_, prop) {
|
|
89
|
-
if (typeof prop !== 'string' || !(prop in table.initialState)) {
|
|
90
|
-
return undefined
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
return {
|
|
94
|
-
enumerable: true,
|
|
95
|
-
configurable: true,
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
})
|
|
99
43
|
}
|
|
100
44
|
|
|
101
45
|
/**
|
|
@@ -169,7 +113,7 @@ export function injectTable<
|
|
|
169
113
|
const table = constructTable({
|
|
170
114
|
...options(),
|
|
171
115
|
features: {
|
|
172
|
-
|
|
116
|
+
coreReactivityFeature: angularReactivity(injector),
|
|
173
117
|
...options().features,
|
|
174
118
|
},
|
|
175
119
|
}) as AngularTable<TFeatures, TData>
|
|
@@ -178,16 +122,6 @@ export function injectTable<
|
|
|
178
122
|
table._reactivity.unmount?.()
|
|
179
123
|
})
|
|
180
124
|
|
|
181
|
-
const stateProxy = createStateProxy(table)
|
|
182
|
-
|
|
183
|
-
Object.defineProperty(table, 'state', {
|
|
184
|
-
get() {
|
|
185
|
-
return stateProxy
|
|
186
|
-
},
|
|
187
|
-
configurable: true,
|
|
188
|
-
enumerable: true,
|
|
189
|
-
})
|
|
190
|
-
|
|
191
125
|
let isMount = true
|
|
192
126
|
effect(
|
|
193
127
|
() => {
|