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

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(
@@ -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/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 ? 'Enable' : 'Disable' }} Row Selection
+    </button>
   </div>
 </template>
 

knip.json

@@ -1,9 +1,12 @@
 {
   "$schema": "https://unpkg.com/knip@5/schema.json",
   "ignoreDependencies": ["@faker-js/faker"],
-  "ignoreWorkspaces": ["examples/**", "packages/table-core/tests/**"],
+  "ignoreWorkspaces": ["examples/**"],
   "ignore": ["**/*benchmark*", "**/benchmarks/**"],
   "workspaces": {
+    "packages/table-core": {
+      "ignore": ["**/tests/**"]
+    },
     "packages/match-sorter-utils": {
       "ignoreDependencies": ["remove-accents"]
     },