@tanstack/angular-table 9.0.0-beta.4 → 9.0.0-beta.43

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.
Files changed (39) hide show
  1. package/README.md +2 -0
  2. package/dist/README.md +2 -0
  3. package/dist/fesm2022/tanstack-angular-table-experimental-worker-plugin.mjs +6 -0
  4. package/dist/fesm2022/tanstack-angular-table-experimental-worker-plugin.mjs.map +1 -0
  5. package/dist/fesm2022/tanstack-angular-table.mjs +41 -21
  6. package/dist/fesm2022/tanstack-angular-table.mjs.map +1 -1
  7. package/dist/types/tanstack-angular-table-experimental-worker-plugin.d.ts +1 -0
  8. package/dist/types/tanstack-angular-table.d.ts +10 -19
  9. package/package.json +13 -8
  10. package/skills/create-table-hook/SKILL.md +148 -0
  11. package/skills/getting-started/SKILL.md +138 -0
  12. package/skills/migrate-v8-to-v9/SKILL.md +194 -0
  13. package/skills/table-state/SKILL.md +197 -0
  14. package/skills/with-tanstack-query/SKILL.md +142 -0
  15. package/skills/with-tanstack-virtual/SKILL.md +126 -0
  16. package/src/flex-render/flexRenderComponent.ts +2 -2
  17. package/src/flex-render/view.ts +1 -1
  18. package/src/helpers/cell.ts +6 -2
  19. package/src/helpers/createTableHook.ts +44 -26
  20. package/src/helpers/flexRenderCell.ts +14 -0
  21. package/src/helpers/header.ts +4 -2
  22. package/src/helpers/table.ts +4 -2
  23. package/src/injectTable.ts +7 -12
  24. package/skills/angular/angular-rendering-directives/SKILL.md +0 -415
  25. package/skills/angular/angular-rendering-directives/references/content-shapes.md +0 -142
  26. package/skills/angular/angular-rendering-directives/references/create-table-hook-registries.md +0 -89
  27. package/skills/angular/angular-rendering-directives/references/di-tokens.md +0 -171
  28. package/skills/angular/angular-rendering-directives/references/flex-render-component-options.md +0 -64
  29. package/skills/angular/client-to-server/SKILL.md +0 -467
  30. package/skills/angular/compose-with-tanstack-query/SKILL.md +0 -482
  31. package/skills/angular/compose-with-tanstack-store/SKILL.md +0 -397
  32. package/skills/angular/compose-with-tanstack-virtual/SKILL.md +0 -400
  33. package/skills/angular/getting-started/SKILL.md +0 -496
  34. package/skills/angular/getting-started/references/feature-row-model-mapping.md +0 -48
  35. package/skills/angular/migrate-v8-to-v9/SKILL.md +0 -419
  36. package/skills/angular/migrate-v8-to-v9/references/v8-to-v9-mapping.md +0 -261
  37. package/skills/angular/production-readiness/SKILL.md +0 -469
  38. package/skills/angular/table-state/SKILL.md +0 -429
  39. package/skills/angular/table-state/references/external-atoms-and-app-hook.md +0 -152
package/README.md CHANGED
@@ -39,6 +39,8 @@
39
39
  > - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
40
40
  > - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
41
41
  > - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
42
+ > - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
43
+ > - [Ember Table](https://tanstack.com/table/alpha/docs/framework/ember/ember-table)
42
44
 
43
45
  A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
44
46
 
package/dist/README.md CHANGED
@@ -39,6 +39,8 @@
39
39
  > - [Solid Table](https://tanstack.com/table/alpha/docs/framework/solid/solid-table)
40
40
  > - [Svelte Table](https://tanstack.com/table/alpha/docs/framework/svelte/svelte-table)
41
41
  > - [Vue Table](https://tanstack.com/table/alpha/docs/framework/vue/vue-table)
42
+ > - [Alpine Table](https://tanstack.com/table/alpha/docs/framework/alpine/alpine-table)
43
+ > - [Ember Table](https://tanstack.com/table/alpha/docs/framework/ember/ember-table)
42
44
 
43
45
  A headless table library for building powerful datagrids with full control over markup, styles, and behavior.
44
46
 
@@ -0,0 +1,6 @@
1
+ export * from '@tanstack/table-core/experimental-worker-plugin';
2
+
3
+ /**
4
+ * Generated bundle index. Do not edit.
5
+ */
6
+ //# sourceMappingURL=tanstack-angular-table-experimental-worker-plugin.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"tanstack-angular-table-experimental-worker-plugin.mjs","sources":["../../experimental-worker-plugin/tanstack-angular-table-experimental-worker-plugin.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;AAEG"}
@@ -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.0", ngImport: i0, type: TanStackTableCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
59
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: TanStackTableCell, isStandalone: true, selector: "[tanStackTableCell]", inputs: { cell: { classPropertyName: "cell", publicName: "tanStackTableCell", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
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.0", ngImport: i0, type: TanStackTableCell, decorators: [{
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.0", ngImport: i0, type: TanStackTableHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
136
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: TanStackTableHeader, isStandalone: true, selector: "[tanStackTableHeader]", inputs: { header: { classPropertyName: "header", publicName: "tanStackTableHeader", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
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.0", ngImport: i0, type: TanStackTableHeader, decorators: [{
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.0", ngImport: i0, type: TanStackTable, deps: [], target: i0.ɵɵFactoryTarget.Directive });
215
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", type: TanStackTable, isStandalone: true, selector: "[tanStackTable]", inputs: { table: { classPropertyName: "table", publicName: "tanStackTable", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
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.0", ngImport: i0, type: TanStackTable, decorators: [{
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.0", ngImport: i0, type: FlexRenderComponentFactory, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Injectable });
382
- static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FlexRenderComponentFactory });
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.0", ngImport: i0, type: FlexRenderComponentFactory, decorators: [{
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
  /**
@@ -597,7 +597,7 @@ class FlexRenderTemplateView extends FlexRenderView {
597
597
  constructor(initialContent, view) {
598
598
  super(initialContent, view);
599
599
  }
600
- updateProps(props) {
600
+ updateProps(_props) {
601
601
  this.view.markForCheck();
602
602
  }
603
603
  dirtyCheck() {
@@ -956,6 +956,15 @@ class FlexRenderCell {
956
956
  const header = this.header();
957
957
  const footer = this.footer();
958
958
  if (cell) {
959
+ const def = cell.column.columnDef;
960
+ const groupingCell = cell;
961
+ const groupingDef = def;
962
+ if (groupingCell.getIsAggregated?.()) {
963
+ return [groupingDef.aggregatedCell ?? def.cell, cell.getContext()];
964
+ }
965
+ if (groupingCell.getIsPlaceholder?.()) {
966
+ return [null, null];
967
+ }
959
968
  return [cell.column.columnDef.cell, cell.getContext()];
960
969
  }
961
970
  if (header) {
@@ -988,10 +997,10 @@ class FlexRenderCell {
988
997
  renderer.destroy();
989
998
  });
990
999
  }
991
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FlexRenderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
992
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", 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 });
1000
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderCell, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1001
+ 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
1002
  }
994
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FlexRenderCell, decorators: [{
1003
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderCell, decorators: [{
995
1004
  type: Directive,
996
1005
  args: [{
997
1006
  selector: 'ng-template[flexRenderCell], ng-template[flexRenderFooter], ng-template[flexRenderHeader]',
@@ -1065,10 +1074,10 @@ class FlexRenderDirective {
1065
1074
  renderer.destroy();
1066
1075
  });
1067
1076
  }
1068
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FlexRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1069
- static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.0", 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 });
1077
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
1078
+ 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
1079
  }
1071
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: FlexRenderDirective, decorators: [{
1080
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: FlexRenderDirective, decorators: [{
1072
1081
  type: Directive,
1073
1082
  args: [{
1074
1083
  selector: 'ng-template[flexRender]',
@@ -1248,10 +1257,13 @@ function injectTable(options) {
1248
1257
  const injector = inject(Injector);
1249
1258
  const ngZone = inject(NgZone);
1250
1259
  return ngZone.runOutsideAngular(() => lazyInit(() => {
1260
+ // Explicit type arguments skip generic inference from the spread object
1261
+ // (a type-check hot spot); the spread only adds the angular reactivity
1262
+ // binding to `features`.
1251
1263
  const table = constructTable({
1252
1264
  ...options(),
1253
1265
  features: {
1254
- coreReativityFeature: angularReactivity(injector),
1266
+ coreReactivityFeature: angularReactivity(injector),
1255
1267
  ...options().features,
1256
1268
  },
1257
1269
  });
@@ -1286,7 +1298,6 @@ function injectTable(options) {
1286
1298
  * ```ts
1287
1299
  * const { injectAppTable, createAppColumnHelper } = createTableHook({
1288
1300
  * features,
1289
- * rowModels: {},
1290
1301
  * tableComponents: {},
1291
1302
  * cellComponents: {},
1292
1303
  * headerComponents: {},
@@ -1295,12 +1306,21 @@ function injectTable(options) {
1295
1306
  */
1296
1307
  function createTableHook({ tableComponents, cellComponents, headerComponents, ...defaultTableOptions }) {
1297
1308
  function injectTableContext$1() {
1309
+ // `injectAppTable` Object.assign-es `tableComponents` onto the same table
1310
+ // instance it returns (via `constructTableAPIs`), and that instance is what
1311
+ // gets provided to DI, so this asserts the runtime shape.
1298
1312
  return injectTableContext();
1299
1313
  }
1300
1314
  function injectTableHeaderContext$1() {
1315
+ // `injectAppTable` Object.assign-es `headerComponents` onto the header
1316
+ // prototype (via `assignHeaderPrototype`), so every header instance carries
1317
+ // them. This asserts the runtime shape.
1301
1318
  return injectTableHeaderContext();
1302
1319
  }
1303
1320
  function injectTableCellContext$1() {
1321
+ // `injectAppTable` Object.assign-es `cellComponents` onto the cell prototype
1322
+ // (via `assignCellPrototype`), so every cell instance carries them. This
1323
+ // asserts the runtime shape.
1304
1324
  return injectTableCellContext();
1305
1325
  }
1306
1326
  function injectFlexRenderHeaderContext() {