@tanstack/angular-table 9.0.0-beta.2 → 9.0.0-beta.21
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 +22 -66
- package/dist/fesm2022/tanstack-angular-table.mjs.map +1 -1
- package/dist/types/tanstack-angular-table.d.ts +8 -14
- package/package.json +8 -7
- 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 +8 -71
|
@@ -55,15 +55,15 @@ class TanStackTableCell {
|
|
|
55
55
|
* Provided as a required signal input so DI consumers always read the latest value.
|
|
56
56
|
*/
|
|
57
57
|
cell = input.required({ ...(ngDevMode ? { debugName: "cell" } : /* istanbul ignore next */ {}), alias: 'tanStackTableCell' });
|
|
58
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
59
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
58
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TanStackTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
59
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: TanStackTableCell, isStandalone: true, selector: "[tanStackTableCell]", inputs: { cell: { classPropertyName: "cell", publicName: "tanStackTableCell", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
60
60
|
{
|
|
61
61
|
provide: TanStackTableCellToken,
|
|
62
62
|
useFactory: () => inject(TanStackTableCell).cell,
|
|
63
63
|
},
|
|
64
64
|
], exportAs: ["cell"], ngImport: i0 });
|
|
65
65
|
}
|
|
66
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
66
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TanStackTableCell, decorators: [{
|
|
67
67
|
type: Directive,
|
|
68
68
|
args: [{
|
|
69
69
|
selector: '[tanStackTableCell]',
|
|
@@ -132,15 +132,15 @@ class TanStackTableHeader {
|
|
|
132
132
|
* Provided as a required signal input so DI consumers always read the latest value.
|
|
133
133
|
*/
|
|
134
134
|
header = input.required({ ...(ngDevMode ? { debugName: "header" } : /* istanbul ignore next */ {}), alias: 'tanStackTableHeader' });
|
|
135
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
136
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
135
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TanStackTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
136
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: TanStackTableHeader, isStandalone: true, selector: "[tanStackTableHeader]", inputs: { header: { classPropertyName: "header", publicName: "tanStackTableHeader", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
137
137
|
{
|
|
138
138
|
provide: TanStackTableHeaderToken,
|
|
139
139
|
useFactory: () => inject(TanStackTableHeader).header,
|
|
140
140
|
},
|
|
141
141
|
], exportAs: ["header"], ngImport: i0 });
|
|
142
142
|
}
|
|
143
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
143
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TanStackTableHeader, decorators: [{
|
|
144
144
|
type: Directive,
|
|
145
145
|
args: [{
|
|
146
146
|
selector: '[tanStackTableHeader]',
|
|
@@ -211,15 +211,15 @@ class TanStackTable {
|
|
|
211
211
|
* Provided as a required signal input so DI consumers always read the latest value.
|
|
212
212
|
*/
|
|
213
213
|
table = input.required({ ...(ngDevMode ? { debugName: "table" } : /* istanbul ignore next */ {}), alias: 'tanStackTable' });
|
|
214
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
215
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
214
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TanStackTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
215
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: TanStackTable, isStandalone: true, selector: "[tanStackTable]", inputs: { table: { classPropertyName: "table", publicName: "tanStackTable", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
|
|
216
216
|
{
|
|
217
217
|
provide: TanStackTableToken,
|
|
218
218
|
useFactory: () => inject(TanStackTable).table,
|
|
219
219
|
},
|
|
220
220
|
], exportAs: ["table"], ngImport: i0 });
|
|
221
221
|
}
|
|
222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
222
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TanStackTable, decorators: [{
|
|
223
223
|
type: Directive,
|
|
224
224
|
args: [{
|
|
225
225
|
selector: '[tanStackTable]',
|
|
@@ -378,10 +378,10 @@ class FlexRenderComponentFactory {
|
|
|
378
378
|
view.setOutputs(outputs);
|
|
379
379
|
return view;
|
|
380
380
|
}
|
|
381
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
382
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
381
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderComponentFactory, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
|
|
382
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderComponentFactory });
|
|
383
383
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderComponentFactory, decorators: [{
|
|
385
385
|
type: Injectable
|
|
386
386
|
}], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
|
|
387
387
|
/**
|
|
@@ -988,10 +988,10 @@ class FlexRenderCell {
|
|
|
988
988
|
renderer.destroy();
|
|
989
989
|
});
|
|
990
990
|
}
|
|
991
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
992
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
991
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
992
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: FlexRenderCell, isStandalone: true, selector: "ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]", inputs: { cell: { classPropertyName: "cell", publicName: "flexRenderCell", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "flexRenderHeader", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "flexRenderFooter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
993
993
|
}
|
|
994
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderCell, decorators: [{
|
|
995
995
|
type: Directive,
|
|
996
996
|
args: [{
|
|
997
997
|
selector: 'ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]',
|
|
@@ -1065,10 +1065,10 @@ class FlexRenderDirective {
|
|
|
1065
1065
|
renderer.destroy();
|
|
1066
1066
|
});
|
|
1067
1067
|
}
|
|
1068
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
1069
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.
|
|
1068
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1069
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: FlexRenderDirective, isStandalone: true, selector: "ng-template[flexRender]", inputs: { content: { classPropertyName: "content", publicName: "flexRender", isSignal: true, isRequired: false, transformFunction: null }, props: { classPropertyName: "props", publicName: "flexRenderProps", isSignal: true, isRequired: false, transformFunction: null }, injector: { classPropertyName: "injector", publicName: "flexRenderInjector", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
1070
1070
|
}
|
|
1071
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
1071
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderDirective, decorators: [{
|
|
1072
1072
|
type: Directive,
|
|
1073
1073
|
args: [{
|
|
1074
1074
|
selector: 'ng-template[flexRender]',
|
|
@@ -1187,44 +1187,6 @@ function angularReactivity(injector) {
|
|
|
1187
1187
|
};
|
|
1188
1188
|
}
|
|
1189
1189
|
|
|
1190
|
-
function createStateProxy(table) {
|
|
1191
|
-
const getSnapshot = () => {
|
|
1192
|
-
const snapshot = {};
|
|
1193
|
-
const stateKeys = Object.keys(table.initialState);
|
|
1194
|
-
for (const key of stateKeys) {
|
|
1195
|
-
;
|
|
1196
|
-
snapshot[key] = table.atoms[key].get();
|
|
1197
|
-
}
|
|
1198
|
-
return snapshot;
|
|
1199
|
-
};
|
|
1200
|
-
const target = {};
|
|
1201
|
-
return new Proxy(target, {
|
|
1202
|
-
get(target, prop, receiver) {
|
|
1203
|
-
if (prop === 'toJSON') {
|
|
1204
|
-
return getSnapshot;
|
|
1205
|
-
}
|
|
1206
|
-
if (typeof prop === 'string' && prop in table.initialState) {
|
|
1207
|
-
return table.atoms[prop]?.get();
|
|
1208
|
-
}
|
|
1209
|
-
return Reflect.get(target, prop, receiver);
|
|
1210
|
-
},
|
|
1211
|
-
has(_, prop) {
|
|
1212
|
-
return typeof prop === 'string' && prop in table.initialState;
|
|
1213
|
-
},
|
|
1214
|
-
ownKeys() {
|
|
1215
|
-
return Reflect.ownKeys(table.initialState);
|
|
1216
|
-
},
|
|
1217
|
-
getOwnPropertyDescriptor(_, prop) {
|
|
1218
|
-
if (typeof prop !== 'string' || !(prop in table.initialState)) {
|
|
1219
|
-
return undefined;
|
|
1220
|
-
}
|
|
1221
|
-
return {
|
|
1222
|
-
enumerable: true,
|
|
1223
|
-
configurable: true,
|
|
1224
|
-
};
|
|
1225
|
-
},
|
|
1226
|
-
});
|
|
1227
|
-
}
|
|
1228
1190
|
/**
|
|
1229
1191
|
* Creates and returns an Angular-reactive table instance.
|
|
1230
1192
|
*
|
|
@@ -1286,24 +1248,19 @@ function injectTable(options) {
|
|
|
1286
1248
|
const injector = inject(Injector);
|
|
1287
1249
|
const ngZone = inject(NgZone);
|
|
1288
1250
|
return ngZone.runOutsideAngular(() => lazyInit(() => {
|
|
1251
|
+
// Explicit type arguments skip generic inference from the spread object
|
|
1252
|
+
// (a type-check hot spot); the spread only adds the angular reactivity
|
|
1253
|
+
// binding to `features`.
|
|
1289
1254
|
const table = constructTable({
|
|
1290
1255
|
...options(),
|
|
1291
1256
|
features: {
|
|
1292
|
-
|
|
1257
|
+
coreReactivityFeature: angularReactivity(injector),
|
|
1293
1258
|
...options().features,
|
|
1294
1259
|
},
|
|
1295
1260
|
});
|
|
1296
1261
|
injector.get(DestroyRef).onDestroy(() => {
|
|
1297
1262
|
table._reactivity.unmount?.();
|
|
1298
1263
|
});
|
|
1299
|
-
const stateProxy = createStateProxy(table);
|
|
1300
|
-
Object.defineProperty(table, 'state', {
|
|
1301
|
-
get() {
|
|
1302
|
-
return stateProxy;
|
|
1303
|
-
},
|
|
1304
|
-
configurable: true,
|
|
1305
|
-
enumerable: true,
|
|
1306
|
-
});
|
|
1307
1264
|
let isMount = true;
|
|
1308
1265
|
effect(() => {
|
|
1309
1266
|
const newOptions = options();
|
|
@@ -1332,7 +1289,6 @@ function injectTable(options) {
|
|
|
1332
1289
|
* ```ts
|
|
1333
1290
|
* const { injectAppTable, createAppColumnHelper } = createTableHook({
|
|
1334
1291
|
* features,
|
|
1335
|
-
* rowModels: {},
|
|
1336
1292
|
* tableComponents: {},
|
|
1337
1293
|
* cellComponents: {},
|
|
1338
1294
|
* headerComponents: {},
|