Use a stable identifier reference to register devtools in table

Author: riccardoperra

packages/angular-table-devtools/package.json

@@ -44,7 +44,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/devtools-utils": "https://pkg.pr.new/TanStack/devtools/@tanstack/devtools-utils@368",
+    "@tanstack/devtools-utils": "^0.5.0",
     "@tanstack/table-core": "workspace:*",
     "@tanstack/table-devtools": "workspace:*"
   },

packages/angular-table-devtools/src/injectTanStackTableDevtools.ts

@@ -5,18 +5,12 @@ import {
 import {
   APP_ID,
   DestroyRef,
-  Injectable,
   Injector,
   assertInInjectionContext,
   effect,
   inject,
 } from '@angular/core'
-import type { RowData, Table, TableFeatures } from '@tanstack/table-core'
-
-export interface InjectTanStackTableDevtoolsOptions {
-  enabled?: () => boolean
-  injector?: Injector
-}
+import type { Table } from '@tanstack/table-core'
 
 function normalizeName(name?: string) {
   const trimmedName = name?.trim()
@@ -29,30 +23,32 @@ function generateId(): string {
   return `tanstacktable-${appId}_${autoId++}${Date.now().toString(36)}`
 }
 
-export function injectTanStackTableDevtools<
-  TFeatures extends TableFeatures = TableFeatures,
-  TData extends RowData = RowData,
->(
-  table: () => Table<TFeatures, TData> | undefined,
-  name?: string,
-  options?: InjectTanStackTableDevtoolsOptions,
+export interface InjectTanStackTableDevtoolsOptions {
+  table: Table<any, any> | undefined
+  name: string
+  enabled?: () => boolean
+  injector?: Injector
+}
+
+export function injectTanStackTableDevtools(
+  options: () => InjectTanStackTableDevtoolsOptions,
 ): void {
   const registrationId = generateId()
-  const enabled = () => options?.enabled?.() ?? true
+  const enabled = () => options().enabled?.() ?? true
   assertInInjectionContext(injectTanStackTableDevtools)
-  const injector = options?.injector ?? inject(Injector)
+  const injector = options().injector ?? inject(Injector)
   const destroyRef = inject(DestroyRef)
 
   effect(
     (onCleanup) => {
+      const { table, name } = options()
       const enabledValue = enabled()
-      const tableValue = table()
-      if (!enabledValue || !tableValue) {
+      if (!enabledValue || !table) {
         removeTableDevtoolsTarget(registrationId)
       }
       upsertTableDevtoolsTarget({
         id: registrationId,
-        table: tableValue,
+        table: table,
         name: normalizeName(name),
       })
       onCleanup(() => {
@@ -67,11 +63,6 @@ export function injectTanStackTableDevtools<
   })
 }
 
-export function injectTanStackTableDevtoolsNoOp<
-  TFeatures extends TableFeatures = TableFeatures,
-  TData extends RowData = RowData,
->(
-  _table: Table<TFeatures, TData> | undefined,
-  _name?: string,
-  _options?: InjectTanStackTableDevtoolsOptions,
+export function injectTanStackTableDevtoolsNoOp(
+  options: () => InjectTanStackTableDevtoolsOptions,
 ): void {}

packages/angular-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/angular-table",
-  "version": "9.0.0-alpha.46",
+  "version": "9.0.0-alpha.49",
   "description": "Headless UI for building powerful tables & datagrids for Angular.",
   "author": "Tanner Linsley",
   "license": "MIT",

packages/react-table-devtools/src/useTanStackTableDevtools.ts

@@ -5,6 +5,7 @@ import {
   removeTableDevtoolsTarget,
   upsertTableDevtoolsTarget,
 } from '@tanstack/table-devtools'
+import { useEffect } from 'react'
 import type { RowData, Table, TableFeatures } from '@tanstack/table-core'
 
 export interface UseTanStackTableDevtoolsOptions {
@@ -25,24 +26,32 @@ export function useTanStackTableDevtools<
   options?: UseTanStackTableDevtoolsOptions,
 ): void {
   const registrationId = React.useId()
+  const normalizedName = normalizeName(name)
+
+  const instanceId =
+    // instanceId from react table adapter (if it exists) allows for stable devtools registration even if the table instance changes
+    (table as unknown as { instanceId?: string }).instanceId ||
+    `${registrationId}${normalizedName ? `-${normalizedName}` : ``}`
+
   const enabled = options?.enabled ?? true
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!enabled || !table) {
-      removeTableDevtoolsTarget(registrationId)
+      removeTableDevtoolsTarget(instanceId)
       return
     }
 
     upsertTableDevtoolsTarget({
-      id: registrationId,
+      id: instanceId,
       table,
-      name: normalizeName(name),
+      name: normalizedName,
     })
 
     return () => {
-      removeTableDevtoolsTarget(registrationId)
+      removeTableDevtoolsTarget(instanceId)
     }
-  }, [enabled, name, registrationId, table])
+    // eslint-disable-next-line @eslint-react/exhaustive-deps,react-hooks/exhaustive-deps
+  }, [enabled, registrationId, instanceId])
 }
 
 export function useTanStackTableDevtoolsNoOp<

packages/react-table/src/useTable.ts

@@ -1,6 +1,6 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { useId, useMemo, useRef, useState } from 'react'
 import { constructTable } from '@tanstack/table-core'
 import { shallow, useSelector } from '@tanstack/react-store'
 import { reactReactivity } from './reactivity'
@@ -23,6 +23,10 @@ export type ReactTable<
   TData extends RowData,
   TSelected = TableState<TFeatures>,
 > = Table<TFeatures, TData> & {
+  /**
+   * A stable id reference for table instance
+   */
+  instanceId?: string
   /**
    * A React HOC (Higher Order Component) that allows you to subscribe to the table state.
    *
@@ -137,6 +141,12 @@ export function useTable<
   tableOptions: TableOptions<TFeatures, TData>,
   selector?: (state: TableState<TFeatures>) => TSelected,
 ): ReactTable<TFeatures, TData, TSelected> {
+  const instanceIdRef = useRef<string | undefined>(undefined)
+  const id = useId()
+  if (!instanceIdRef.current) {
+    // eslint-disable-next-line @eslint-react/purity
+    instanceIdRef.current = `${id}-${Math.random().toString(36).slice(2, 9)}`
+  }
   const [table] = useState(() => {
     const tableInstance = constructTable({
       ...tableOptions,
@@ -156,6 +166,7 @@ export function useTable<
     }) as ReactTable<TFeatures, TData, TSelected>['Subscribe']
 
     tableInstance.FlexRender = FlexRender
+    tableInstance.instanceId = id
 
     return tableInstance
   })