[WIP] feat(angular,solid): add core signal reactivity feature

examples/solid/row-selection/package.json

@@ -18,6 +18,8 @@
   },
   "dependencies": {
     "@tanstack/solid-table": "^9.0.0-alpha.10",
+    "@tanstack/solid-devtools": "^0.7.26",
+    "@tanstack/solid-table-devtools": "9.0.0-alpha.11",
     "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,
@@ -51,16 +53,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',
@@ -113,6 +117,8 @@ function App() {
     },
   ]
 
+  const [enableRowSelection, setEnableRowSelection] = createSignal(true)
+
   table = createTable({
     _features,
     _rowModels: {
@@ -124,11 +130,14 @@ 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,
   })
 
+  window.setEnable = setEnableRowSelection
+
   return (
     // <table.Subscribe
     //   selector={(state) => ({
@@ -140,6 +149,8 @@ function App() {
     // >
     //   {(state) => (
     <div class="p-2">
+      <TanStackDevtools plugins={[tableDevtoolsPlugin({ table })]} />
+
       <div>
         <table.Subscribe
           selector={(state) => ({ globalFilter: state.globalFilter })}
@@ -333,8 +344,6 @@ function App() {
         </table.Subscribe>
       </div>
     </div>
-    //   )}
-    // </table.Subscribe>
   )
 }
 

packages/angular-table/src/index.ts

@@ -3,7 +3,6 @@ import { FlexRenderDirective } from './flexRender'
 
 export * from '@tanstack/table-core'
 
-export * from './angularReactivityFeature'
 export * from './flexRender'
 export * from './injectTable'
 export * from './flex-render/flexRenderComponent'

packages/angular-table/src/injectTable.ts

@@ -3,12 +3,16 @@ import {
   assertInInjectionContext,
   computed,
   inject,
+  isSignal,
+  signal,
   untracked,
 } from '@angular/core'
-import { constructTable } from '@tanstack/table-core'
+import {
+  constructReactivityFeature,
+  constructTable,
+} from '@tanstack/table-core'
 import { injectStore } from '@tanstack/angular-store'
 import { lazyInit } from './lazySignalInitializer'
-import { angularReactivityFeature } from './angularReactivityFeature'
 import type {
   RowData,
   Table,
@@ -104,6 +108,16 @@ export function injectTable<
   assertInInjectionContext(injectTable)
   const injector = inject(Injector)
 
+  const angularReactivityFeature = constructReactivityFeature({
+    createSignal: (value) => {
+      return signal(value) as any
+    },
+    createMemo: (fn) => {
+      return computed(() => fn())
+    },
+    isSignal: (value) => isSignal(value),
+  })
+
   return lazyInit(() => {
     const resolvedOptions: TableOptions<TFeatures, TData> = {
       ...options(),
@@ -142,7 +156,8 @@ export function injectTable<
     const tableSignalNotifier = computed(
       () => {
         tableState()
-        table.setOptions(updatedOptions())
+        const newOptions = updatedOptions()
+        untracked(() => table.setOptions(newOptions))
         untracked(() => table.baseStore.setState((prev) => ({ ...prev })))
         return table
       },

packages/angular-table/tests/injectTable.test.ts

@@ -75,7 +75,7 @@ describe('injectTable', () => {
     })
 
     test('supports "Object.keys"', () => {
-      const keys = Object.keys(table.get()).concat('state')
+      const keys = Object.keys(table.value()).concat('state')
       expect(Object.keys(table)).toEqual(keys)
     })
 

packages/solid-table-devtools/eslint.config.js

@@ -0,0 +1,8 @@
+// @ts-check
+
+import rootConfig from '../../eslint.config.js'
+
+/** @type {any} */
+const config = [...rootConfig]
+
+export default config