fix(table-devtools): fix table state reactivity

Refactor devtools panel with a more solid-idiomatic approach, using memo and dynamic `useTableState` subscription via Accessor getter to not break reactivity.

Author: riccardoperra

packages/table-devtools/eslint.config.js

@@ -1,13 +1,9 @@
 // @ts-check
 
+import solid from 'eslint-plugin-solid/configs/recommended'
 import rootConfig from '../../eslint.config.js'
 
 /** @type {any} */
-const config = [
-  ...rootConfig,
-  {
-    rules: {},
-  },
-]
+const config = [...rootConfig, solid]
 
 export default config

packages/table-devtools/package.json

@@ -59,6 +59,7 @@
   },
   "devDependencies": {
     "@tanstack/table-core": "workspace:*",
+    "eslint-plugin-solid": "^0.14.5",
     "vite-plugin-solid": "^2.11.12"
   }
 }

packages/table-devtools/src/TableContextProvider.tsx

@@ -15,7 +15,7 @@ import type { RowData, Table, TableFeatures } from '@tanstack/table-core'
 import type { TableDevtoolsRegistration } from './tableTarget'
 
 type TableDevtoolsTabId = 'features' | 'state' | 'options' | 'rows' | 'columns'
-type AnyTable = Table<TableFeatures, RowData>
+type AnyTable = Table<{}, RowData>
 
 interface TableDevtoolsContextValue {
   targets: Accessor<Array<TableDevtoolsRegistration>>
@@ -31,12 +31,12 @@ const TableDevtoolsContext = createContext<
 >(undefined)
 
 export const TableContextProvider: ParentComponent = (props) => {
-  const [targets, setTargets] = createSignal<Array<TableDevtoolsRegistration>>(
-    getTableDevtoolsTargets(),
-  )
+  const initialTargets = getTableDevtoolsTargets()
+  const [targets, setTargets] =
+    createSignal<Array<TableDevtoolsRegistration>>(initialTargets)
   const [selectedTargetId, setSelectedTargetId] = createSignal<
     string | undefined
-  >(targets()[0]?.id)
+  >(initialTargets[0]?.id)
   const [activeTab, setActiveTab] = createSignal<TableDevtoolsTabId>('features')
 
   const selectedTarget = createMemo(() =>

packages/table-devtools/src/components/ColumnsPanel.tsx

@@ -1,4 +1,4 @@
-import { For } from 'solid-js'
+import { For, Show, createMemo } from 'solid-js'
 import { useTableDevtoolsContext } from '../TableContextProvider'
 import { useTableStore } from '../useTableStore'
 import { useStyles } from '../styles/use-styles'
@@ -32,65 +32,57 @@ export function ColumnsPanel() {
   const styles = useStyles()
   const { table } = useTableDevtoolsContext()
 
-  const tableInstance = table()
   const tableState = useTableStore(
-    tableInstance ? tableInstance.store : undefined,
+    () => table()?.store,
     (state) => state,
   )
 
-  if (!tableInstance) {
-    return <NoTableConnected title="Columns" />
-  }
-
-  const getColumns = (): Array<AnyColumn> => {
-    tableState?.()
-    const tableWithColumnFns = tableInstance as unknown as {
-      getAllFlatColumns?: () => Array<AnyColumn>
-      getAllLeafColumns?: () => Array<AnyColumn>
+  const columns = createMemo<Array<AnyColumn>>(() => {
+    const tableInstance = table()
+    if (!tableInstance) {
+      return []
     }
 
-    return (
-      tableWithColumnFns.getAllFlatColumns?.() ??
-      tableWithColumnFns.getAllLeafColumns?.() ??
-      []
-    )
-  }
+    tableState()
 
-  const columns = getColumns()
+    return tableInstance.getAllFlatColumns()
+  })
 
   return (
-    <div class={styles().panelScroll}>
-      <div class={styles().sectionTitle}>Columns ({columns.length})</div>
-      <div class={styles().tableWrapper}>
-        <table class={styles().rowsTable}>
-          <thead>
-            <tr>
-              <th class={styles().headerCell}>#</th>
-              <th class={styles().headerCell}>id</th>
-              <th class={styles().headerCell}>depth</th>
-              <th class={styles().headerCell}>accessor</th>
-              <th class={styles().headerCell}>columnDef</th>
-            </tr>
-          </thead>
-          <tbody>
-            <For each={columns}>
-              {(column, index) => (
-                <tr>
-                  <td class={styles().bodyCellMono}>{index() + 1}</td>
-                  <td class={styles().bodyCellMono}>{column.id}</td>
-                  <td class={styles().bodyCellMono}>{column.depth}</td>
-                  <td class={styles().bodyCellMono}>
-                    {column.accessorFn ? '✓' : '○'}
-                  </td>
-                  <td class={styles().bodyCell}>
-                    {getColumnDefSummary(column)}
-                  </td>
-                </tr>
-              )}
-            </For>
-          </tbody>
-        </table>
+    <Show fallback={<NoTableConnected title={'Columns'} />} when={table()}>
+      <div class={styles().panelScroll}>
+        <div class={styles().sectionTitle}>Columns ({columns().length})</div>
+        <div class={styles().tableWrapper}>
+          <table class={styles().rowsTable}>
+            <thead>
+              <tr>
+                <th class={styles().headerCell}>#</th>
+                <th class={styles().headerCell}>id</th>
+                <th class={styles().headerCell}>depth</th>
+                <th class={styles().headerCell}>accessor</th>
+                <th class={styles().headerCell}>columnDef</th>
+              </tr>
+            </thead>
+            <tbody>
+              <For each={columns()}>
+                {(column, index) => (
+                  <tr>
+                    <td class={styles().bodyCellMono}>{index() + 1}</td>
+                    <td class={styles().bodyCellMono}>{column.id}</td>
+                    <td class={styles().bodyCellMono}>{column.depth}</td>
+                    <td class={styles().bodyCellMono}>
+                      {column.accessorFn ? '✓' : '○'}
+                    </td>
+                    <td class={styles().bodyCell}>
+                      {getColumnDefSummary(column)}
+                    </td>
+                  </tr>
+                )}
+              </For>
+            </tbody>
+          </table>
+        </div>
       </div>
-    </div>
+    </Show>
   )
 }