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

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"

examples/react/sub-components/src/main.tsx

@@ -103,56 +103,60 @@ function Table({
   })
 
   return (
-    <div className="p-2">
-      <div className="h-2" />
-      <table>
-        <thead>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <tr key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <th key={header.id} colSpan={header.colSpan}>
-                    {header.isPlaceholder ? null : (
-                      <div>
-                        <table.FlexRender header={header} />
-                      </div>
-                    )}
-                  </th>
-                )
-              })}
-            </tr>
-          ))}
-        </thead>
-        <tbody>
-          {table.getRowModel().rows.map((row) => {
-            return (
-              <Fragment key={row.id}>
-                <tr>
-                  {/* first row is a normal row */}
-                  {row.getAllCells().map((cell) => {
+    <table.Subscribe selector={(state) => state}>
+      {() => (
+        <div className="p-2">
+          <div className="h-2" />
+          <table>
+            <thead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => {
                     return (
-                      <td key={cell.id}>
-                        <table.FlexRender cell={cell} />
-                      </td>
+                      <th key={header.id} colSpan={header.colSpan}>
+                        {header.isPlaceholder ? null : (
+                          <div>
+                            <table.FlexRender header={header} />
+                          </div>
+                        )}
+                      </th>
                     )
                   })}
                 </tr>
-                {row.getIsExpanded() && (
-                  <tr>
-                    {/* 2nd row is a custom 1 cell row */}
-                    <td colSpan={row.getAllCells().length}>
-                      {renderSubComponent({ row })}
-                    </td>
-                  </tr>
-                )}
-              </Fragment>
-            )
-          })}
-        </tbody>
-      </table>
-      <div className="h-2" />
-      <div>{table.getRowModel().rows.length} Rows</div>
-    </div>
+              ))}
+            </thead>
+            <tbody>
+              {table.getRowModel().rows.map((row) => {
+                return (
+                  <Fragment key={row.id}>
+                    <tr>
+                      {/* first row is a normal row */}
+                      {row.getAllCells().map((cell) => {
+                        return (
+                          <td key={cell.id}>
+                            <table.FlexRender cell={cell} />
+                          </td>
+                        )
+                      })}
+                    </tr>
+                    {row.getIsExpanded() && (
+                      <tr>
+                        {/* 2nd row is a custom 1 cell row */}
+                        <td colSpan={row.getAllCells().length}>
+                          {renderSubComponent({ row })}
+                        </td>
+                      </tr>
+                    )}
+                  </Fragment>
+                )
+              })}
+            </tbody>
+          </table>
+          <div className="h-2" />
+          <div>{table.getRowModel().rows.length} Rows</div>
+        </div>
+      )}
+    </table.Subscribe>
   )
 }
 

examples/react/with-tanstack-query/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@faker-js/faker": "^10.2.0",
     "@tanstack/react-query": "^5.90.20",
-    "@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/solid/row-selection/package.json

@@ -17,7 +17,9 @@
     "vite-plugin-solid": "^2.11.10"
   },
   "dependencies": {
+    "@tanstack/solid-devtools": "^0.7.26",
     "@tanstack/solid-table": "^9.0.0-alpha.10",
+    "@tanstack/solid-table-devtools": "workspace:*",
     "solid-js": "^1.9.11"
   }
 }

examples/solid/row-selection/src/App.tsx

@@ -1,3 +1,9 @@
+import type {
+  Column,
+  ColumnDef,
+  SolidTable,
+  Table,
+} from '@tanstack/solid-table'
 import {
   columnFilteringFeature,
   createFilteredRowModel,
@@ -11,15 +17,11 @@ import {
   tableFeatures,
 } from '@tanstack/solid-table'
 import { For, Show, createEffect, createSignal } from 'solid-js'
-import { makeData } from './makeData'
-import type {
-  Column,
-  ColumnDef,
-  SolidTable,
-  Table,
-} from '@tanstack/solid-table'
 import type { Person } from './makeData'
+import { makeData } from './makeData'
 import './index.css'
+import { TanStackDevtools } from '@tanstack/solid-devtools'
+import { tableDevtoolsPlugin } from '@tanstack/solid-table-devtools'
 
 export const _features = tableFeatures({
   rowPaginationFeature,
@@ -31,6 +33,7 @@ export const _features = tableFeatures({
 function App() {
   const [data, setData] = createSignal(makeData(1_000))
   const refreshData = () => setData(makeData(100_000)) // stress test
+  const [enableRowSelection, setEnableRowSelection] = createSignal(true)
 
   // Create table first with a placeholder for columns
   let table: SolidTable<typeof _features, Person>
@@ -51,16 +54,18 @@ function App() {
           </table.Subscribe>
         )
       },
-      cell: ({ row }) => (
-        <div class="px-1">
-          <IndeterminateCheckbox
-            checked={row.getIsSelected()}
-            disabled={!row.getCanSelect()}
-            indeterminate={row.getIsSomeSelected()}
-            onChange={row.getToggleSelectedHandler()}
-          />
-        </div>
-      ),
+      cell: ({ row }) => {
+        return (
+          <div class="px-1">
+            <IndeterminateCheckbox
+              checked={row.getIsSelected()}
+              disabled={!row.getCanSelect()}
+              indeterminate={row.getIsSomeSelected()}
+              onChange={row.getToggleSelectedHandler()}
+            />
+          </div>
+        )
+      },
     },
     {
       header: 'Name',
@@ -124,8 +129,9 @@ function App() {
     },
     columns,
     getRowId: (row) => row.id,
-    enableRowSelection: true, // enable row selection for all rows
-    // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
+    get enableRowSelection() {
+      return enableRowSelection()
+    },
     debugTable: true,
   })
 
@@ -140,6 +146,8 @@ function App() {
     // >
     //   {(state) => (
     <div class="p-2">
+      <TanStackDevtools plugins={[tableDevtoolsPlugin({ table })]} />
+
       <div>
         <table.Subscribe
           selector={(state) => ({ globalFilter: state.globalFilter })}
@@ -325,6 +333,12 @@ function App() {
         >
           Log table.getSelectedRowModel().flatRows
         </button>
+        <button
+          class="border rounded p-2 mb-2"
+          onClick={() => setEnableRowSelection((prev) => !prev)}
+        >
+          {enableRowSelection() ? 'Disable' : 'Enable'} Row Selection
+        </button>
       </div>
       <div>
         <label>Row Selection State:</label>
@@ -333,8 +347,6 @@ function App() {
         </table.Subscribe>
       </div>
     </div>
-    //   )}
-    // </table.Subscribe>
   )
 }
 

examples/vue/row-selection/src/App.vue

@@ -88,18 +88,26 @@ const columns = columnHelper.columns([
 ])
 
 const data = ref(makeData(10))
+const enableRowSelection = ref(true)
 
 const rerender = () => {
   data.value = makeData(10)
 }
 
+const toggleRowSelection = () => {
+  enableRowSelection.value = !enableRowSelection.value
+}
+
 const table = useTable(
   {
     _features,
     _rowModels: {},
     data,
     columns,
-    enableRowSelection: true, //enable row selection for all rows
+    // enable row selection for all rows
+    get enableRowSelection() {
+      return enableRowSelection.value
+    },
     // enableRowSelection: row => row.original.age > 18, // or enable row selection conditionally per row
   },
   (state) => ({ rowSelection: state.rowSelection }),
@@ -152,6 +160,9 @@ const table = useTable(
     </table>
     <div class="h-4" />
     <button @click="rerender" class="border p-2">Rerender</button>
+    <button @click="toggleRowSelection" class="border p-2">
+      {{ enableRowSelection ? 'Disable' : 'Enable' }} Row Selection
+    </button>
   </div>
 </template>