add new devtools POC

Author: KevinVandy

docs/installation.md

@@ -4,66 +4,51 @@ title: Installation
 
 Before we dig in to the API, let's get you set up!
 
-Install your table adapter as a dependency using your favorite npm package manager.
+Install your table adapter as a dependency using your preferred package manager:
 
-_Only install ONE of the following packages:_
+<!-- ::start:tabs variant="package-managers" -->
 
-## React Table
+react: @tanstack/react-table
+vue: @tanstack/vue-table
+solid: @tanstack/solid-table
+svelte: @tanstack/svelte-table
+angular: @tanstack/angular-table
+lit: @tanstack/lit-table
 
-```bash
-npm install @tanstack/react-table
-```
+<!-- ::end:tabs -->
 
-The `@tanstack/react-table` package works with React 16.8, React 17, React 18, and React 19.
-
-> NOTE: Even though the react adapter works with React 19, it may not work with the new React Compiler that's coming out along-side React 19. This may be fixed in future TanStack Table updates.
+<!-- ::start:framework -->
 
-## Vue Table
+# React
 
-```bash
-npm install @tanstack/vue-table
-```
+The `@tanstack/react-table` package works with React 16.8, React 17, React 18, and React 19.
 
-The `@tanstack/vue-table` package works with Vue 3.
+> [!NOTE]
+> Even though the React adapter works with React 19, it may not work with the new React Compiler that's coming out alongside React 19. This may be fixed in future TanStack Table updates.
 
-## Solid Table
+# Vue
 
-```bash
-npm install @tanstack/solid-table
-```
+The `@tanstack/vue-table` package works with Vue 3.
 
-The `@tanstack/solid-table` package works with Solid-JS 1
+# Solid
 
-## Svelte Table
+The `@tanstack/solid-table` package works with Solid-JS 1.
 
-```bash
-npm install @tanstack/svelte-table
-```
+# Svelte
 
 The `@tanstack/svelte-table` package works with Svelte 3 and Svelte 4.
 
-> NOTE: There is not a built-in Svelte 5 adapter yet, but you can still use TanStack Table with Svelte 5 by installing the `@tanstack/table-core` package and using a custom adapter from the community. See this [PR](https://github.com/TanStack/table/pull/5403) for inspiration.
-
-## Angular Table
+> [!NOTE]
+> There is not a built-in Svelte 5 adapter yet, but you can still use TanStack Table with Svelte 5 by installing the `@tanstack/table-core` package and using a custom adapter from the community. See this [PR](https://github.com/TanStack/table/pull/5403) for inspiration.
 
-```bash
-npm install @tanstack/angular-table
-```
+# Angular
 
 The `@tanstack/angular-table` package works with Angular 17. The Angular adapter uses a new Angular Signal implementation.
 
-## Lit Table
-
-```bash
-npm install @tanstack/lit-table
-```
+# Lit
 
 The `@tanstack/lit-table` package works with Lit 3.
 
-## Table Core (no framework)
-
-```bash
-npm install @tanstack/table-core
-```
+<!-- ::end:framework -->
 
 Don't see your favorite framework (or favorite version of your framework) listed? You can always just use the `@tanstack/table-core` package and build your own adapter in your own codebase. Usually, only a thin wrapper is needed to manage state and rendering for your specific framework. Browse the [source code](https://github.com/TanStack/table/tree/main/packages) of all of the other adapters to see how they work.

examples/react/row-selection/package.json

@@ -18,6 +18,8 @@
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
+    "@tanstack/react-devtools": "0.9.6",
+    "@tanstack/react-table-devtools": "9.0.0-alpha.11",
     "@rollup/plugin-replace": "^6.0.3",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",

examples/react/row-selection/src/main.tsx

@@ -12,6 +12,10 @@ import {
   tableFeatures,
   useTable,
 } from '@tanstack/react-table'
+import {
+  tableDevtoolsPlugin,
+} from '@tanstack/react-table-devtools'
+import { TanStackDevtools } from '@tanstack/react-devtools'
 import { makeData } from './makeData'
 import type { HTMLProps } from 'react'
 import type { Person } from './makeData'
@@ -111,16 +115,17 @@ function App() {
   )
 
   return (
-    <table.Subscribe
-      selector={(state) => ({
-        // don't include row selection state to optimize re-renders
-        columnFilters: state.columnFilters,
-        globalFilter: state.globalFilter,
-        pagination: state.pagination,
-      })}
-    >
-      {(state) => (
-        <div className="p-2">
+    <>
+      <table.Subscribe
+        selector={(state) => ({
+          // don't include row selection state to optimize re-renders
+          columnFilters: state.columnFilters,
+          globalFilter: state.globalFilter,
+          pagination: state.pagination,
+        })}
+      >
+        {(state) => (
+          <div className="p-2">
           <div>
             <input
               value={state.globalFilter ?? ''}
@@ -306,9 +311,11 @@ function App() {
               {(state) => <pre>{JSON.stringify(state, null, 2)}</pre>}
             </table.Subscribe>
           </div>
-        </div>
-      )}
-    </table.Subscribe>
+          </div>
+        )}
+      </table.Subscribe>
+      <TanStackDevtools plugins={[tableDevtoolsPlugin({ table })]} />
+    </>
   )
 }
 

package.json

@@ -8,8 +8,8 @@
   "packageManager": "pnpm@10.28.2",
   "type": "module",
   "scripts": {
-    "build": "nx run-many --targets=build -p @tanstack/table-core @tanstack/react-table @tanstack/preact-table @tanstack/angular-table && size-limit",
-    "build:all": "nx run-many --targets=build -p @tanstack/table-core @tanstack/react-table @tanstack/preact-table @tanstack/angular-table && size-limit",
+    "build": "nx run-many --targets=build -p @tanstack/table-core @tanstack/react-table @tanstack/table-devtools @tanstack/react-table-devtools @tanstack/preact-table @tanstack/angular-table && size-limit",
+    "build:all": "nx run-many --targets=build -p @tanstack/table-core @tanstack/react-table @tanstack/table-devtools @tanstack/react-table-devtools @tanstack/preact-table @tanstack/angular-table && size-limit",
     "build:core": "nx build @tanstack/table-core && size-limit",
     "cipublish": "node scripts/publish.js",
     "clean": "find . -name 'dist' -type d -prune -exec rm -rf {} +",
@@ -23,7 +23,7 @@
     "size": "size-limit",
     "test": "pnpm run test:ci",
     "test:build": "nx affected --target=test:build --exclude='examples/{lit,solid,svelte,vanilla,vue}/**' --exclude='packages/{lit-table,solid-table,svelte-table,vue-table,match-sorter-utils}'",
-    "test:ci": "nx run-many --targets=test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build -p @tanstack/table-core @tanstack/react-table @tanstack/preact-table @tanstack/angular-table 'examples/react/**' 'examples/preact/**' 'examples/angular/**'",
+    "test:ci": "nx run-many --targets=test:eslint,test:sherif,test:knip,test:lib,test:types,test:build,build -p @tanstack/table-core @tanstack/react-table @tanstack/table-devtools @tanstack/react-table-devtools @tanstack/preact-table @tanstack/angular-table 'examples/react/**' 'examples/preact/**' 'examples/angular/**'",
     "test:docs": "node scripts/verify-links.ts",
     "test:eslint": "nx affected --target=test:eslint --exclude='examples/{lit,solid,svelte,vanilla,vue}/**' --exclude='packages/{lit-table,solid-table,svelte-table,vue-table,match-sorter-utils}'",
     "test:knip": "knip",

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

@@ -0,0 +1,29 @@
+// @ts-check
+
+import pluginReact from '@eslint-react/eslint-plugin'
+import pluginReactCompiler from 'eslint-plugin-react-compiler'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+import rootConfig from '../../eslint.config.js'
+
+/** @type {any} */
+const config = [
+  ...rootConfig,
+  {
+    files: ['**/*.{ts,tsx}'],
+    ...pluginReact.configs.recommended,
+  },
+  {
+    plugins: {
+      'react-hooks': pluginReactHooks,
+      'react-compiler': pluginReactCompiler,
+    },
+    rules: {
+      '@eslint-react/dom/no-missing-button-type': 'off',
+      'react-compiler/react-compiler': 'error',
+      'react-hooks/exhaustive-deps': 'error',
+      'react-hooks/rules-of-hooks': 'error',
+    },
+  },
+]
+
+export default config

packages/react-table-devtools/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@tanstack/react-table-devtools",
+  "version": "9.0.0-alpha.11",
+  "description": "React devtools for TanStack Table.",
+  "author": "Tanner Linsley",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TanStack/table.git",
+    "directory": "packages/react-table-devtools"
+  },
+  "homepage": "https://tanstack.com/table",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/tannerlinsley"
+  },
+  "keywords": ["react", "tanstack", "table", "devtools"],
+  "scripts": {
+    "clean": "rimraf ./build && rimraf ./dist",
+    "test:eslint": "eslint ./src",
+    "test:lib": "vitest --passWithNoTests",
+    "test:lib:dev": "pnpm test:lib --watch",
+    "test:types": "tsc",
+    "test:build": "publint --strict",
+    "build": "vite build"
+  },
+  "type": "module",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      }
+    },
+    "./production": {
+      "import": {
+        "types": "./dist/esm/production.d.ts",
+        "default": "./dist/esm/production.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "engines": {
+    "node": ">=16"
+  },
+  "files": ["dist", "src"],
+  "dependencies": {
+    "@tanstack/devtools-utils": "^0.3.0",
+    "@tanstack/table-core": "workspace:*",
+    "@tanstack/table-devtools": "workspace:*"
+  },
+  "devDependencies": {
+    "@eslint-react/eslint-plugin": "^2.13.0",
+    "@types/react": "^19.2.10",
+    "@vitejs/plugin-react": "^5.1.2",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "react": "^19.2.4"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

packages/react-table-devtools/src/ReactTableDevtools.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { createReactPanel } from '@tanstack/devtools-utils/react'
+import { TableDevtoolsCore, setTableDevtoolsTarget } from '@tanstack/table-devtools'
+
+import type { RowData, Table, TableFeatures } from '@tanstack/table-core'
+import type { DevtoolsPanelProps } from '@tanstack/devtools-utils/react'
+
+export interface TableDevtoolsReactInit<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+> extends DevtoolsPanelProps {
+  table?: Table<TFeatures, TData>
+}
+
+const [TableDevtoolsPanelBase, TableDevtoolsPanelNoOp] =
+  createReactPanel(TableDevtoolsCore)
+
+function TableDevtoolsPanel(props: TableDevtoolsReactInit) {
+  setTableDevtoolsTarget(props.table)
+  return <TableDevtoolsPanelBase theme={props.theme} />
+}
+
+export { TableDevtoolsPanel, TableDevtoolsPanelNoOp }

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

@@ -0,0 +1,17 @@
+'use client'
+
+import * as Devtools from './ReactTableDevtools'
+import * as plugin from './plugin'
+
+export const TableDevtoolsPanel =
+  process.env.NODE_ENV !== 'development'
+    ? Devtools.TableDevtoolsPanelNoOp
+    : Devtools.TableDevtoolsPanel
+
+export const tableDevtoolsPlugin =
+  process.env.NODE_ENV !== 'development'
+    ? plugin.tableDevtoolsNoOpPlugin
+    : plugin.tableDevtoolsPlugin
+
+export type { TableDevtoolsReactInit } from './ReactTableDevtools'
+export type { TableDevtoolsPluginOptions } from './plugin'

packages/react-table-devtools/src/plugin.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { TableDevtoolsPanel } from './ReactTableDevtools'
+import type { RowData, Table, TableFeatures } from '@tanstack/table-core'
+
+export interface TableDevtoolsPluginOptions<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+> {
+  table: Table<TFeatures, TData>
+}
+
+function tableDevtoolsPlugin<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+>(options: TableDevtoolsPluginOptions<TFeatures, TData>) {
+  return {
+    name: 'TanStack Table',
+    render: (_el: HTMLElement, theme: 'light' | 'dark') => (
+      <TableDevtoolsPanel table={options.table} theme={theme} />
+    ),
+  }
+}
+
+function tableDevtoolsNoOpPlugin<
+  TFeatures extends TableFeatures = TableFeatures,
+  TData extends RowData = RowData,
+>(_options: TableDevtoolsPluginOptions<TFeatures, TData>) {
+  return {
+    name: 'TanStack Table',
+    render: (_el: HTMLElement, _theme: 'light' | 'dark') => <></>,
+  }
+}
+
+export { tableDevtoolsPlugin, tableDevtoolsNoOpPlugin }

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

@@ -0,0 +1,6 @@
+'use client'
+
+export { TableDevtoolsPanel } from './ReactTableDevtools'
+export type { TableDevtoolsReactInit } from './ReactTableDevtools'
+export { tableDevtoolsPlugin } from './plugin'
+export type { TableDevtoolsPluginOptions } from './plugin'