Skip to content

Improve table devtools performance #6474

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
riccardoperra wants to merge 4 commits into
base: beta
Choose a base branch
from
Open

Improve table devtools performance #6474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a439984
Improve table devtools registration and reactive panels
riccardoperra Jul 31, 2026
e07de2e
Coalesce devtools store updates during browser idle time
riccardoperra Jul 31, 2026
18ffccd
Delete .changeset/quiet-table-devtools.md
riccardoperra Jul 31, 2026
b28a1c1
Merge branch 'beta' into codex/review-tanstack-table-devtools
KevinVandy Aug 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 21 additions & 10 deletions packages/angular-table-devtools/src/TableDevtools.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
import { TableDevtoolsCore } from '@tanstack/table-devtools'
import { createAngularPanel } from '@tanstack/devtools-utils/angular'
import { computed, effect } from '@angular/core'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/angular'

export interface TableDevtoolsAngularInit extends Partial<DevtoolsPanelProps> {}

const [TableDevtoolsPanelBase, TableDevtoolsPanelNoOpBase] =
createAngularPanel(TableDevtoolsCore)

function resolvePanelProps(
props?: TableDevtoolsAngularInit,
): DevtoolsPanelProps {
Expand All @@ -23,12 +20,26 @@ type TableDevtoolsPanelComponent = () => (

export const TableDevtoolsPanel: TableDevtoolsPanelComponent =
() => (props, host) => {
const panel = TableDevtoolsPanelBase()
return panel(() => resolvePanelProps(props()), host)
const panel = host.ownerDocument.createElement('div')
panel.style.height = '100%'
host.appendChild(panel)

const panelProps = computed(() => resolvePanelProps(props()), {
equal: (previous, next) =>
previous.theme === next.theme &&
previous.devtoolsOpen === next.devtoolsOpen,
})
const panelEffect = effect((onCleanup) => {
const instance = new TableDevtoolsCore()
void instance.mount(panel, panelProps())
onCleanup(() => instance.unmount())
})

return () => {
panelEffect.destroy()
panel.remove()
}
Comment on lines +23 to +41

@coderabbitai coderabbitai Bot Aug 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy lift

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Inspect TableDevtoolsCore for a prop-update API distinct from mount/unmount.
ast-grep outline packages/table-devtools/src/core.tsx --items all
rg -n "mount\(|unmount\(|update\(|setProps\(" packages/table-devtools/src -A 3

Repository: TanStack/table

Length of output: 771

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Locate relevant files"
git ls-files | rg '(^|/)TableDevtools(\.tsx|\.ts)$|packages/table-devtools/src/core\.tsx|packages/table-devtools/src/TableDevtools\.tsx|devtoolsUpdateScheduler|constructCoreClass' || true

echo
echo "angular-table-devtools File outline and relevant section"
for f in $(git ls-files | rg 'packages/angular-table-devtools/src/TableDevtools\.tsx?$|packages/angular-table-devtools/src/TableDevtools\.ts$'); do
  echo "--- $f"
  wc -l "$f"
  sed -n '1,120p' "$f" | cat -n
done

echo
echo "table-devtools core/preview outlines"
for f in packages/table-devtools/src/core.tsx packages/table-devtools/src/TableDevtools.tsx packages/table-devtools/src/devtoolsUpdateScheduler.ts; do
  if [ -f "$f" ]; then
    echo "--- $f"
    wc -l "$f"
    sed -n '1,240p' "$f" | cat -n
  fi
done

echo
echo "Search TableDevtoolsCore references and prop type"
rg -n "class TableDevtoolsCore|TableDevtoolsCore|TableDevtoolsInit|devtoolsOpen|theme:" packages -S

Repository: TanStack/table

Length of output: 15688

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Find devtools-utils core class implementation"
git ls-files | rg '`@tanstack/devtools-utils`|devtools-utils' | sed -n '1,200p'
rg -n "constructCoreClass|ClassType|function .*mount|class .*mount|unmount\(|updatePanelProps|setProps|mount\\(" --glob '!*(node_modules|build|dist)/**' packages -S

echo
echo "Package files likely containing constructors"
for f in $(git ls-files | rg 'packages/.*(devtools-utils).*\.(ts|tsx)$' | sed -n '1,120p'); do
  if grep -qE "constructCoreClass|mount\\(|unmount\\(" "$f"; then
    echo "--- $f"
    wc -l "$f"
    sed -n '1,260p' "$f" | cat -n
  fi
done

Repository: TanStack/table

Length of output: 198

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Repository top-level and target package package.json"
git ls-files | sed -n '1,120p'
for f in package.json packages/angular-table-devtools/package.json packages/table-devtools/package.json; do
  if [ -f "$f" ]; then echo "--- $f"; sed -n '1,220p' "$f"; fi
done

echo
echo "All tracked devtools-utils references"
rg -n "`@tanstack/devtools-utils`|devtools-utils|constructCoreClass|create[A-Za-z]*Panel|TableDevtoolsPanel|ClassType" packages package.json -S

echo
echo "Locate any file containing constructCoreClass by exact search"
python3 - <<'PY'
from pathlib import Path
for p in Path('packages').rglob('*'):
    if p.is_file() and p.suffix in {'.ts','.tsx'}:
        try:
            s=p.read_text(errors='ignore')
        except Exception:
            continue
        if 'constructCoreClass' in s or 'TableDevtoolsPanel' in s:
            print(p)
PY

Repository: TanStack/table

Length of output: 32720

🌐 Web query:

@tanstack/devtools-utils 0.6.0 constructCoreClass ClassType mount unmount

💡 Result:

In @tanstack/devtools-utils, the constructCoreClass function is used to create a lazy-loaded "core class" for devtools [1][2]. This utility helps in decoupling the devtools implementation from the main application, allowing the devtools core to be loaded only when needed [1][2]. The ClassType expected by framework-specific panel factories (such as createReactPanel, createSolidPanel, etc.) refers to a class with a specific interface [2][3]: 1. mount(el: HTMLElement, theme: 'light' | 'dark'): This method is called by the framework adapter when the panel is mounted into the DOM. It provides the container element (el) and the current devtools theme, allowing the devtools to render into that container [3]. 2. unmount: This method is called when the panel is removed from the DOM, allowing for necessary cleanup of the devtools instance [2][3]. By wrapping your devtools core class with constructCoreClass, you enable efficient lazy-loading, while the framework-specific panel factories (e.g., createSolidPanel) handle the automated invocation of mount and unmount within the component lifecycle (using hooks like onMount/onCleanup in Solid or useEffect/useLayoutEffect logic in React) [2][3]. Example usage pattern: // 1. Define the core class const [MyDevtoolsCore, NoOpCore] = constructCoreClass( => import('./MyDevtoolsUI'),); // 2. Wrap it for a framework (e.g., Solid) const [MyPanel, NoOpPanel] = createSolidPanel(MyDevtoolsCore); [2]

Citations:

🌐 Web query:

@tanstack/devtools-utils 0.6.0 angular DevtoolsPanelProps createAngularPanel

💡 Result:

In version 0.6.0 of @tanstack/devtools-utils, createAngularPanel is a factory function designed to facilitate the creation of Angular devtools panels from class-based devtools cores [1]. It returns a tuple containing the panel component and a no-op variant: const [MyPanel, NoOpPanel] = createAngularPanel(MyDevtoolsCore) [1] The resulting panel component is a standalone Angular component that handles the mounting and unmounting of the provided core class [1]. It uses Angular's afterNextRender to mount the core instance into a div element and cleans up via DestroyRef.onDestroy [1]. The component accepts theme and devtoolsProps as signal inputs [1]. Additionally, the package provides the DevtoolsPanelProps type for Angular, which can be imported from @tanstack/devtools-utils/angular [1]. This interface defines the expected properties, such as theme, for devtools panels [1][2]. For defining plugins in Angular, the package also includes the createAngularPlugin function, which allows wrapping an Angular component class into a plugin definition [1]. This function returns a tuple of [Plugin, NoOpPlugin] and accepts the plugin name and the component class as arguments [1].

Citations:

🌐 Web query:

TanStack devtools TableDevtools open close tab selected state devtoolsOpen

💡 Result:

TanStack Table Devtools rely on the TanStack Devtools host package to provide the UI, while the framework-specific table adapters (e.g., @tanstack/react-table-devtools) provide the integration [1][2]. Regarding your specific interests: Open/Close State The visibility of the devtools panel is managed by the host TanStack Devtools package, typically integrated via a plugin like tableDevtoolsPlugin at the app root [1][2]. In older or specific framework implementations, internal state for visibility (often tracked as isOpen) is managed internally within the devtools component, sometimes persisting to localStorage (e.g., 'reactTableDevtoolsOpen') to maintain state across page refreshes [3]. Tab Selected State The active tab state (such as "Features", "Options", "State", "Rows", or "Columns") is managed internally by the devtools Shell component [4][5]. This state is typically handled via a context provider (e.g., TableDevtoolsContext) within the devtools package, which maintains an activeTab state and exposes an setActiveTab function to switch between views [4][5]. devtoolsOpen If you are looking for a programmatic way to control or reference the open state, note that the official documentation recommends mounting the devtools via the provided plugin system [1][2]. Direct manipulation of internal variables like devtoolsOpen is not the standard API; instead, users are expected to interact with the devtools through the official plugin configuration and registration process using useTanStackTableDevtools [1][2]. To implement the devtools, follow these steps [1][2]: 1. Assign a unique key to each table instance [1]. 2. Mount the TanStackDevtools host with the tableDevtoolsPlugin at the app root [1]. 3. Register your table instance using the framework-specific hook (e.g., useTanStackTableDevtools(table)) [1][2]. For production environments, ensure you import adapters from the /production entrypoint to prevent unnecessary bloat [1][2].

Citations:

Avoid rebuilding TableDevtoolsCore on every prop change.

Angular re-runs this effect whenever props() changes; the previous onCleanup calls instance.unmount(), so each theme or devtoolsOpen update destroys the mounted instance and creates a new one. Toggling devtoolsOpen therefore tears down the devtools shell and loses internal UI state. Use a stable TableDevtoolsCore instance and update its props instead of remounting after each tracked signal change.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/angular-table-devtools/src/TableDevtools.ts` around lines 23 - 41,
Update the effect around TableDevtoolsCore so it creates and mounts one stable
instance, then applies updated panelProps through the core’s existing
props-update mechanism instead of constructing and unmounting on every change.
Keep unmount cleanup only for the returned teardown, preserving internal UI
state across theme and devtoolsOpen updates.

}

export const TableDevtoolsPanelNoOp: TableDevtoolsPanelComponent =
() => (_props, _host) => {
const panel = TableDevtoolsPanelNoOpBase()
return () => panel
}
() => (_props, _host) => () => {}
17 changes: 8 additions & 9 deletions packages/angular-table-devtools/src/injectTanStackTableDevtools.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { upsertTableDevtoolsTarget } from '@tanstack/table-devtools'
import { createTableDevtoolsRegistrationManager } from '@tanstack/table-devtools'
import {
DestroyRef,
Injector,
assertInInjectionContext,
effect,
Expand Down Expand Up @@ -30,17 +31,15 @@ export function injectTanStackTableDevtools<
injector = inject(Injector)
}

const destroyRef = injector.get(DestroyRef)
const registration = createTableDevtoolsRegistrationManager()
destroyRef.onDestroy(() => registration.dispose())

effect(
(onCleanup) => {
() => {
const { table } = options()
const enabledValue = enabled()
if (!enabledValue || !table) {
return
}
const cleanup = untracked(() => upsertTableDevtoolsTarget({ table }))
onCleanup(() => {
cleanup?.()
})
untracked(() => registration.update(table, enabledValue))
},
{ injector },
)
Expand Down
4 changes: 2 additions & 2 deletions packages/angular-table-devtools/src/production.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
export { TableDevtoolsPanel } from './TableDevtools'
export { TableDevtoolsPanel } from './production/TableDevtools'
export type { TableDevtoolsAngularInit } from './TableDevtools'
export { tableDevtoolsPlugin } from './plugin'
export { tableDevtoolsPlugin } from './production/plugin'
export { injectTanStackTableDevtools } from './injectTanStackTableDevtools'
export type { InjectTanStackTableDevtoolsOptions } from './injectTanStackTableDevtools'
41 changes: 41 additions & 0 deletions packages/angular-table-devtools/src/production/TableDevtools.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { computed, effect } from '@angular/core'
import { TableDevtoolsCore } from '@tanstack/table-devtools/production'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/angular'
import type { TableDevtoolsAngularInit } from '../TableDevtools'

function resolvePanelProps(
props?: TableDevtoolsAngularInit,
): DevtoolsPanelProps {
return {
theme: props?.theme ?? 'dark',
devtoolsOpen: props?.devtoolsOpen ?? false,
}
}

type TableDevtoolsPanelComponent = () => (
inputs: () => TableDevtoolsAngularInit,
hostElement: HTMLElement,
) => () => void

export const TableDevtoolsPanel: TableDevtoolsPanelComponent =
() => (props, host) => {
const panel = host.ownerDocument.createElement('div')
panel.style.height = '100%'
host.appendChild(panel)

const panelProps = computed(() => resolvePanelProps(props()), {
equal: (previous, next) =>
previous.theme === next.theme &&
previous.devtoolsOpen === next.devtoolsOpen,
})
const panelEffect = effect((onCleanup) => {
const instance = new TableDevtoolsCore()
void instance.mount(panel, panelProps())
onCleanup(() => instance.unmount())
})

return () => {
panelEffect.destroy()
panel.remove()
}
}
Comment on lines +20 to +41

@coderabbitai coderabbitai Bot Aug 1, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
set -euo pipefail

echo "Repository files matching TableDevtools:"
fd -i 'TableDevtools\.(ts|tsx|js|jsx)$' .

echo
echo "Production file outline:"
ast-grep outline packages/angular-table-devtools/src/production/TableDevtools.ts --view compact || true

echo
echo "Dev file outline:"
ast-grep outline packages/angular-table-devtools/src/TableDevtools.ts --view compact || true

echo
echo "Relevant production file:"
cat -n packages/angular-table-devtools/src/production/TableDevtools.ts | sed -n '1,220p'

echo
echo "Relevant dev file:"
cat -n packages/angular-table-devtools/src/TableDevtools.ts | sed -n '1,220p' 2>/dev/null || true

echo
echo "Search for TableDevtoolsCore mount/unmount and panelProps usages:"
rg -n "class TableDevtoolsCore|TableDevtoolsCore|panelProps|effect\\(|resolvePanelProps|inject\\(" packages/angular-table-devtools/src || true

echo
echo "Search for devtools panel definitions:"
rg -n "TableDevtoolsPanel|devtoolsOpen|theme" packages/angular-table-devtools/src -S || true

Repository: TanStack/table

Length of output: 8615

Reuse a single TableDevtoolsCore instance.

effect() runs after each theme or devtoolsOpen change and currently mounts a new TableDevtoolsCore each time. Store the core instance outside the effect and destroy/unmount it once when the panel is cleaned up.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/angular-table-devtools/src/production/TableDevtools.ts` around lines
20 - 41, Update TableDevtoolsPanel to create and retain a single
TableDevtoolsCore instance outside the panelEffect effect, then reuse it for
mounting on panelProps changes. Ensure cleanup unmounts and destroys that same
instance once when the panel teardown function runs, rather than creating a new
instance per effect execution.

11 changes: 11 additions & 0 deletions packages/angular-table-devtools/src/production/plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { createAngularPlugin } from '@tanstack/devtools-utils/angular'
import { TableDevtoolsPanel } from './TableDevtools'

type TableDevtoolsPluginFactory = ReturnType<typeof createAngularPlugin>[0]

const [plugin] = createAngularPlugin({
name: 'TanStack Table',
render: TableDevtoolsPanel,
})

export const tableDevtoolsPlugin: TableDevtoolsPluginFactory = plugin
23 changes: 19 additions & 4 deletions packages/preact-table-devtools/src/PreactTableDevtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { h } from 'preact'
import { useMemo } from 'preact/hooks'
import { createPreactPanel } from '@tanstack/devtools-utils/preact'
import { TableDevtoolsCore } from '@tanstack/table-devtools'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
Expand All @@ -22,8 +23,22 @@ function resolvePanelProps(
}
}

export const TableDevtoolsPanel: TableDevtoolsPanelComponent = (props) =>
h(TableDevtoolsPanelBase, resolvePanelProps(props))
export const TableDevtoolsPanel: TableDevtoolsPanelComponent = (props) => {
const theme = props?.theme
const devtoolsOpen = props?.devtoolsOpen
const panelProps = useMemo(
() => resolvePanelProps({ theme, devtoolsOpen }),
[devtoolsOpen, theme],
)
return h(TableDevtoolsPanelBase, panelProps)
}

export const TableDevtoolsPanelNoOp: TableDevtoolsPanelComponent = (props) =>
h(TableDevtoolsPanelNoOpBase, resolvePanelProps(props))
export const TableDevtoolsPanelNoOp: TableDevtoolsPanelComponent = (props) => {
const theme = props?.theme
const devtoolsOpen = props?.devtoolsOpen
const panelProps = useMemo(
() => resolvePanelProps({ theme, devtoolsOpen }),
[devtoolsOpen, theme],
)
return h(TableDevtoolsPanelNoOpBase, panelProps)
}
4 changes: 2 additions & 2 deletions packages/preact-table-devtools/src/production.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client'

export { TableDevtoolsPanel } from './PreactTableDevtools'
export { TableDevtoolsPanel } from './production/PreactTableDevtools'
export type { TableDevtoolsPreactInit } from './PreactTableDevtools'
export { tableDevtoolsPlugin } from './plugin'
export { tableDevtoolsPlugin } from './production/plugin'
export { useTanStackTableDevtools } from './useTanStackTableDevtools'
export type { UseTanStackTableDevtoolsOptions } from './useTanStackTableDevtools'
32 changes: 32 additions & 0 deletions packages/preact-table-devtools/src/production/PreactTableDevtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { h } from 'preact'
import { useMemo } from 'preact/hooks'
import { createPreactPanel } from '@tanstack/devtools-utils/preact'
import { TableDevtoolsCore } from '@tanstack/table-devtools/production'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/preact'
import type { JSX } from 'preact'
import type { TableDevtoolsPreactInit } from '../PreactTableDevtools'

type TableDevtoolsPanelComponent = (
props?: TableDevtoolsPreactInit,
) => JSX.Element

const [TableDevtoolsPanelBase] = createPreactPanel(TableDevtoolsCore)

function resolvePanelProps(
props?: TableDevtoolsPreactInit,
): DevtoolsPanelProps {
return {
theme: props?.theme ?? 'dark',
devtoolsOpen: props?.devtoolsOpen ?? false,
}
}

export const TableDevtoolsPanel: TableDevtoolsPanelComponent = (props) => {
const theme = props?.theme
const devtoolsOpen = props?.devtoolsOpen
const panelProps = useMemo(
() => resolvePanelProps({ theme, devtoolsOpen }),
[devtoolsOpen, theme],
)
return h(TableDevtoolsPanelBase, panelProps)
}
13 changes: 13 additions & 0 deletions packages/preact-table-devtools/src/production/plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { createPreactPlugin } from '@tanstack/devtools-utils/preact'
import { TableDevtoolsPanel } from './PreactTableDevtools'

type PreactTableDevtoolsPlugin = ReturnType<
ReturnType<typeof createPreactPlugin>[0]
>

const [plugin] = createPreactPlugin({
name: 'TanStack Table',
Component: TableDevtoolsPanel,
})

export const tableDevtoolsPlugin: () => PreactTableDevtoolsPlugin = plugin
22 changes: 11 additions & 11 deletions packages/preact-table-devtools/src/useTanStackTableDevtools.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client'

import { useEffect } from 'preact/hooks'
import { upsertTableDevtoolsTarget } from '@tanstack/table-devtools'
import { useEffect, useRef } from 'preact/hooks'
import { createTableDevtoolsRegistrationManager } from '@tanstack/table-devtools'
import type { RowData, Table, TableFeatures } from '@tanstack/table-core'

export interface UseTanStackTableDevtoolsOptions {
Expand All @@ -16,18 +16,18 @@ export function useTanStackTableDevtools<
options?: UseTanStackTableDevtoolsOptions,
): void {
const enabled = options?.enabled ?? true
const registrationRef =
useRef<ReturnType<typeof createTableDevtoolsRegistrationManager>>()
registrationRef.current ??= createTableDevtoolsRegistrationManager()
const registration = registrationRef.current

useEffect(() => {
if (!enabled || !table) {
return
}
return () => registration.dispose()
}, [registration])

const cleanup = upsertTableDevtoolsTarget({ table })

return () => {
cleanup?.()
}
}, [enabled, table, table?.options.key])
useEffect(() => {
registration.update(table, enabled)
}, [enabled, registration, table, table?.options.key])
}

export function useTanStackTableDevtoolsNoOp<
Expand Down
24 changes: 19 additions & 5 deletions packages/react-table-devtools/src/ReactTableDevtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { createElement } from 'react'
import { createElement, useMemo } from 'react'
import { createReactPanel } from '@tanstack/devtools-utils/react'
import { TableDevtoolsCore } from '@tanstack/table-devtools'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
Expand All @@ -20,8 +20,22 @@ function resolvePanelProps(props?: TableDevtoolsReactInit): DevtoolsPanelProps {
}
}

export const TableDevtoolsPanel: TableDevtoolsPanelComponent = (props) =>
createElement(TableDevtoolsPanelBase, resolvePanelProps(props))
export const TableDevtoolsPanel: TableDevtoolsPanelComponent = (props) => {
const theme = props?.theme
const devtoolsOpen = props?.devtoolsOpen
const panelProps = useMemo(
() => resolvePanelProps({ theme, devtoolsOpen }),
[devtoolsOpen, theme],
)
return createElement(TableDevtoolsPanelBase, panelProps)
}

export const TableDevtoolsPanelNoOp: TableDevtoolsPanelComponent = (props) =>
createElement(TableDevtoolsPanelNoOpBase, resolvePanelProps(props))
export const TableDevtoolsPanelNoOp: TableDevtoolsPanelComponent = (props) => {
const theme = props?.theme
const devtoolsOpen = props?.devtoolsOpen
const panelProps = useMemo(
() => resolvePanelProps({ theme, devtoolsOpen }),
[devtoolsOpen, theme],
)
return createElement(TableDevtoolsPanelNoOpBase, panelProps)
}
4 changes: 2 additions & 2 deletions packages/react-table-devtools/src/production.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
'use client'

export { TableDevtoolsPanel } from './ReactTableDevtools'
export { TableDevtoolsPanel } from './production/ReactTableDevtools'
export type { TableDevtoolsReactInit } from './ReactTableDevtools'
export { tableDevtoolsPlugin } from './plugin'
export { tableDevtoolsPlugin } from './production/plugin'
export { useTanStackTableDevtools } from './useTanStackTableDevtools'
export type { UseTanStackTableDevtoolsOptions } from './useTanStackTableDevtools'
29 changes: 29 additions & 0 deletions packages/react-table-devtools/src/production/ReactTableDevtools.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { createElement, useMemo } from 'react'
import { createReactPanel } from '@tanstack/devtools-utils/react'
import { TableDevtoolsCore } from '@tanstack/table-devtools/production'
import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
import type { JSX } from 'react'
import type { TableDevtoolsReactInit } from '../ReactTableDevtools'

type TableDevtoolsPanelComponent = (
props?: TableDevtoolsReactInit,
) => JSX.Element

const [TableDevtoolsPanelBase] = createReactPanel(TableDevtoolsCore)

function resolvePanelProps(props?: TableDevtoolsReactInit): DevtoolsPanelProps {
return {
theme: props?.theme ?? 'dark',
devtoolsOpen: props?.devtoolsOpen ?? false,
}
}

export const TableDevtoolsPanel: TableDevtoolsPanelComponent = (props) => {
const theme = props?.theme
const devtoolsOpen = props?.devtoolsOpen
const panelProps = useMemo(
() => resolvePanelProps({ theme, devtoolsOpen }),
[devtoolsOpen, theme],
)
return createElement(TableDevtoolsPanelBase, panelProps)
}
11 changes: 11 additions & 0 deletions packages/react-table-devtools/src/production/plugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { createReactPlugin } from '@tanstack/devtools-utils/react'
import { TableDevtoolsPanel } from './ReactTableDevtools'

type TableDevtoolsPluginFactory = ReturnType<typeof createReactPlugin>[0]

const [plugin] = createReactPlugin({
name: 'TanStack Table',
Component: TableDevtoolsPanel,
})

export const tableDevtoolsPlugin: TableDevtoolsPluginFactory = plugin
10 changes: 10 additions & 0 deletions packages/react-table-devtools/src/table-devtools.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,4 +31,14 @@ declare module '@tanstack/table-devtools' {
): (() => void) | undefined

export function removeTableDevtoolsTarget(id: string): void

export interface TableDevtoolsRegistrationManager {
update: <TFeatures extends TableFeatures, TData extends RowData>(
table: Table<TFeatures, TData> | undefined,
enabled?: boolean,
) => void
dispose: () => void
}

export function createTableDevtoolsRegistrationManager(): TableDevtoolsRegistrationManager
}
Loading
Loading