feat(angular,solid,vue): add core signal reactivity feature (#6181)

feat: angular, solid, vue adapters with notifier reactivity feature

- Table will expose a optionsStore which is a store storing the table options. This remove the necessity to call table.baseStore.setOptions(prev => ({...prev})) on every setOptions in our adapters. Since options will be reactive and patched with the notifier given by the adapter through thetableReactivityFeature, solid/vue table will update even if an option change after table construction (properties given as a getter)
- Add table solid devtools
- Improve solid reactivity to automatically react to changes when options change while using signals

Author: riccardoperra

examples/angular/column-resizing-performant/src/app/app.ts

@@ -92,7 +92,7 @@ export class App {
     debugColumns: true,
   }))
 
-  readonly columnSizing = this.table.Subscribe({
+  readonly columnSizing = this.table.subscribe({
     selector: (state) => state.columnSizing,
   })
 

examples/angular/expanding/src/app/app.ts

@@ -105,7 +105,7 @@ export class App {
     JSON.stringify(this.expanded(), undefined, 2),
   )
 
-  readonly rowSelectionState = this.table.Subscribe({
+  readonly rowSelectionState = this.table.subscribe({
     selector: (state) => state.rowSelection,
   })
   readonly rawRowSelectionState = computed(() =>

examples/angular/row-selection/src/app/app.html

@@ -1,4 +1,8 @@
 <div class="p-2">
+  <button class="border rounded px-2" (click)="toggleEnableRowSelection()">
+    {{ enableRowSelection() ? 'Disable' : 'Enable' }} Row selection
+  </button>
+
   <div class="h-2"></div>
 
   <table [tanStackTable]="table">

examples/angular/row-selection/src/app/app.ts

@@ -32,6 +32,7 @@ export class App {
   private readonly rowSelection = signal<RowSelectionState>({})
   readonly globalFilter = signal<string>('')
   readonly data = signal(makeData(10_000))
+  readonly enableRowSelection = signal(true)
 
   readonly columns = columnHelper.columns([
     columnHelper.display({
@@ -93,7 +94,8 @@ export class App {
     state: {
       rowSelection: this.rowSelection(),
     },
-    enableRowSelection: true, // enable row selection for all rows
+
+    enableRowSelection: this.enableRowSelection(), // enable row selection for all rows
     // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
     onRowSelectionChange: (updaterOrValue) => {
       this.rowSelection.set(
@@ -104,7 +106,7 @@ export class App {
     },
   }))
 
-  readonly paginationState = this.table.Subscribe({
+  readonly paginationState = this.table.subscribe({
     selector: (state) => state.pagination,
   })
 
@@ -136,4 +138,8 @@ export class App {
   refreshData(): void {
     this.data.set(makeData(10_000))
   }
+
+  toggleEnableRowSelection() {
+    this.enableRowSelection.update((value) => !value)
+  }
 }

examples/angular/row-selection/src/app/selection-column/selection-column.ts

@@ -29,6 +29,7 @@ export class TableHeaderSelection {
     <input
       type="checkbox"
       [checked]="context.row.getIsSelected()"
+      [disabled]="!context.row.getCanSelect()"
       (change)="context.row.getToggleSelectedHandler()($event)"
     />
   `,

examples/react/basic-external-state/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.9.1",
+    "@tanstack/react-store": "^0.9.2",
     "@tanstack/react-table": "^9.0.0-alpha.15",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"

examples/react/basic-external-store/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.9.1",
+    "@tanstack/react-store": "^0.9.2",
     "@tanstack/react-table": "^9.0.0-alpha.15",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"

examples/react/composable-tables/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.9.1",
+    "@tanstack/react-store": "^0.9.2",
     "@tanstack/react-table": "^9.0.0-alpha.15",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"

examples/react/pagination/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.9.1",
+    "@tanstack/react-store": "^0.9.2",
     "@tanstack/react-table": "^9.0.0-alpha.15",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"

examples/react/row-selection/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
-    "@tanstack/react-store": "^0.9.1",
+    "@tanstack/react-store": "^0.9.2",
     "@tanstack/react-table": "^9.0.0-alpha.15",
     "react": "^19.2.4",
     "react-dom": "^19.2.4"