feat(angular-table): Improve proxy signal implementation for v9 - May…

…be also v8 (#5816) * angular v19 table adapter * angular v19 table adapter * add angular table helper * wip: fix proxy build * eslint * fix basic example * table selection fix * wip reactivity feature * wip reactivity feature * fix * update with reactivity feat * change * improve proxy impl * fix examples * fix test add test typecheck improve test fixes fix flex render experimental reactivity improve test, fix reactivity toComputed enable experimental reactivity fix grouping example fix some examples * fix types * angular v19 table adapter * angular v19 table adapter * angular v19 table adapter
TanStack · Nov 25, 2024 · 9e8029f · 9e8029f
1 parent bcb4c78
commit 9e8029f
Show file tree

Hide file tree

Showing 13 changed files with 447 additions and 64 deletions.
diff --git a/examples/angular/column-ordering/src/app/app.component.ts b/examples/angular/column-ordering/src/app/app.component.ts
@@ -20,11 +20,6 @@ import type {
   ColumnVisibilityState,
 } from '@tanstack/angular-table'
 
-const _features = tableFeatures({
-  columnVisibilityFeature,
-  columnOrderingFeature,
-})
-
 const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   {
     header: 'Name',
@@ -77,6 +72,11 @@ const defaultColumns: Array<ColumnDef<typeof _features, Person>> = [
   },
 ]
 
+const _features = tableFeatures({
+  columnVisibilityFeature,
+  columnOrderingFeature,
+})
+
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -91,12 +91,13 @@ export class AppComponent {
 
   readonly table = injectTable(() => ({
     _features,
-    columns: defaultColumns,
     data: this.data(),
+    columns: defaultColumns,
     state: {
       columnOrder: this.columnOrder(),
       columnVisibility: this.columnVisibility(),
     },
+    enableExperimentalReactivity: true,
     onColumnVisibilityChange: (updaterOrValue) => {
       typeof updaterOrValue === 'function'
         ? this.columnVisibility.update(updaterOrValue)

diff --git a/examples/angular/column-pinning-sticky/src/app/app.component.ts b/examples/angular/column-pinning-sticky/src/app/app.component.ts
@@ -102,6 +102,7 @@ export class AppComponent {
     },
     columns: this.columns(),
     data: this.data(),
+    enableExperimentalReactivity: true,
     debugTable: true,
     debugHeaders: true,
     debugColumns: true,

diff --git a/examples/angular/column-pinning/src/app/app.component.ts b/examples/angular/column-pinning/src/app/app.component.ts
@@ -115,6 +115,7 @@ export class AppComponent {
       columnOrder: this.columnOrder(),
       columnPinning: this.columnPinning(),
     },
+    enableExperimentalReactivity: true,
     onColumnVisibilityChange: (updaterOrValue) => {
       typeof updaterOrValue === 'function'
         ? this.columnVisibility.update(updaterOrValue)

diff --git a/examples/angular/grouping/src/app/app.component.ts b/examples/angular/grouping/src/app/app.component.ts
@@ -54,6 +54,7 @@ export class AppComponent {
       paginatedRowModel: createPaginatedRowModel(),
       filteredRowModel: createFilteredRowModel(),
     },
+    enableExperimentalReactivity: true,
     data: this.data(),
     columns,
     initialState: {

diff --git a/examples/angular/row-selection-signal/src/app/app.component.ts b/examples/angular/row-selection-signal/src/app/app.component.ts
@@ -113,6 +113,17 @@ export class AppComponent {
       paginatedRowModel: createPaginatedRowModel(),
     },
     data: this.data(),
+    enableExperimentalReactivity: true,
+    _features: {
+      rowSelectionFeature,
+      rowPaginationFeature,
+      columnFilteringFeature,
+      columnVisibilityFeature,
+    },
+    _rowModels: {
+      filteredRowModel: createFilteredRowModel(),
+      paginatedRowModel: createPaginatedRowModel(),
+    },
     columns: this.columns,
     state: {
       rowSelection: this.rowSelection(),

diff --git a/examples/angular/row-selection/src/app/app.component.ts b/examples/angular/row-selection/src/app/app.component.ts
@@ -123,6 +123,7 @@ export class AppComponent {
     state: {
       rowSelection: this.rowSelection(),
     },
+    enableExperimentalReactivity: true,
     enableRowSelection: true, // enable row selection for all rows
     // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
     onRowSelectionChange: (updaterOrValue) => {

diff --git a/examples/angular/signal-input/src/app/person-table/person-table.component.ts b/examples/angular/signal-input/src/app/person-table/person-table.component.ts
@@ -52,6 +52,7 @@ export class PersonTableComponent {
       state: {
         pagination: this.pagination(),
       },
+      enableExperimentalReactivity: true,
       onPaginationChange: (updaterOrValue) => {
         typeof updaterOrValue === 'function'
           ? this.pagination.update(updaterOrValue)

diff --git a/packages/angular-table/src/flex-render.ts b/packages/angular-table/src/flex-render.ts
@@ -1,19 +1,19 @@
+import type { DoCheck, OnChanges, SimpleChanges } from '@angular/core'
 import {
   ChangeDetectorRef,
   ComponentRef,
   Directive,
   EmbeddedViewRef,
   Inject,
+  inject,
   InjectionToken,
   Injector,
   Input,
+  isSignal,
   TemplateRef,
   Type,
   ViewContainerRef,
-  inject,
-  isSignal,
 } from '@angular/core'
-import type { DoCheck, OnChanges, SimpleChanges } from '@angular/core'
 import type { Table } from '@tanstack/table-core'
 
 export type FlexRenderContent<TProps extends NonNullable<unknown>> =
@@ -48,6 +48,8 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
 
   ref?: ComponentRef<unknown> | EmbeddedViewRef<unknown> | null = null
 
+  experimentalReactivity = false
+
   constructor(
     @Inject(ViewContainerRef)
     private readonly viewContainerRef: ViewContainerRef,
@@ -56,7 +58,7 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
   ) {}
 
   ngDoCheck(): void {
-    if (this.ref instanceof ComponentRef) {
+    if (!this.experimentalReactivity && this.ref instanceof ComponentRef) {
       this.ref.injector.get(ChangeDetectorRef).markForCheck()
     }
   }
@@ -65,6 +67,13 @@ export class FlexRenderDirective<TProps extends NonNullable<unknown>>
     if (!changes['content']) {
       return
     }
+
+    if ('table' in this.props) {
+      this.experimentalReactivity =
+        (this.props.table as Partial<Table<any, any>>).options
+          ?.enableExperimentalReactivity ?? false
+    }
+
     this.render()
   }
 

diff --git a/packages/angular-table/src/index.ts b/packages/angular-table/src/index.ts
@@ -5,3 +5,4 @@ export * from './proxy'
 export * from './lazy-signal-initializer'
 export * from './injectTable'
 export * from './createTableHelper'
+export * from './reactivity'
diff --git a/packages/angular-table/src/injectTable.ts b/packages/angular-table/src/injectTable.ts
@@ -1,4 +1,12 @@
+import type { Signal } from '@angular/core'
 import { computed, signal } from '@angular/core'
+import type {
+  RowData,
+  Table,
+  TableFeatures,
+  TableOptions,
+  TableState,
+} from '@tanstack/table-core'
 import {
   constructTable,
   coreFeatures,
@@ -7,14 +15,7 @@ import {
 } from '@tanstack/table-core'
 import { lazyInit } from './lazy-signal-initializer'
 import { proxifyTable } from './proxy'
-import type {
-  RowData,
-  Table,
-  TableFeatures,
-  TableOptions,
-  TableState,
-} from '@tanstack/table-core'
-import type { Signal } from '@angular/core'
+import { reactivityFeature } from './reactivity'
 
 export function injectTable<
   TFeatures extends TableFeatures,
@@ -27,6 +28,7 @@ export function injectTable<
       return {
         ...coreFeatures,
         ...options()._features,
+        reactivityFeature,
       }
     }
 
@@ -76,6 +78,8 @@ export function injectTable<
       },
     )
 
+    table._setRootNotifier?.(tableSignal as any)
+
     // proxify Table instance to provide ability for consumer to listen to any table state changes
     return proxifyTable(tableSignal)
   })