react/compose-with-tanstack-devtools

Register TanStack Table instances for inspection in the TanStack Devtools panel.

28.3k|3.6k|Updated Oct 20, 2016
One-click install
npx skills add https://github.com/TanStack/table --skill react-compose-with-tanstack-devtools
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react/compose-with-tanstack-devtools
Source: https://github.com/TanStack/table/tree/main/packages/react-table-devtools/skills/react/compose-with-tanstack-devtools
Command: npx skills add https://github.com/TanStack/table --skill react-compose-with-tanstack-devtools

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you connect TanStack Table instances to the TanStack Devtools UI so you can inspect table state and behavior during development.

Core Features & Use Cases

  • Devtools target registration: Registers each table created with useTable so the Devtools panel can display it.
  • Root-level Devtools mounting: Mounts the Devtools host once using TanStackDevtools and tableDevtoolsPlugin() so the UI actually appears.
  • Multi-table workflows: Supports multiple tables with stable, human-readable names via the optional name argument.

Quick Start

Install the host and adapter packages, mount <TanStackDevtools plugins={[tableDevtoolsPlugin()]} /> once at your app root, and call useTanStackTableDevtools(table, "Users Table") right after each useTable() that creates a table instance.

Frequently Asked Questions about react/compose-with-tanstack-devtools

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I inspect TanStack Table state in React Devtools?

To inspect TanStack Table state, mount the TanStackDevtools host with tableDevtoolsPlugin at your app root and register each table instances using useTanStackTableDevtools right after useTable. This wires your table instances into the Devtools panel for interactive state inspection.

What is the best way to debug multiple TanStack Table instances in React?

Debugging multiple TanStack Table instances requires calling useTanStackTableDevtools after each useTable hook. You can pass a human-readable name as the second argument, like "Users Table", to easily distinguish between multiple tables in the Devtools panel.

Why are my TanStack Table instances not showing up in the Devtools panel?

TanStack Table instances fail to appear in the Devtools panel if the TanStackDevtools host is not mounted at the app root with tableDevtoolsPlugin, or if useTanStackTableDevtools is not called with correct entrypoints and lifecycle-safe usage immediately after useTable.

Do I need to mount TanStack Devtools only once for table state inspection?

Yes, you must mount the TanStack Devtools host once at your application root using TanStackDevtools and tableDevtoolsPlugin. Mounting it multiple times is unnecessary; you simply register individual tables elsewhere using useTanStackTableDevtools.

Does React Devtools integration support custom names for multi-table workflows?

Yes, TanStack Devtools integration supports multi-table workflows by allowing you to assign stable, human-readable names. You provide a name string as the optional argument to useTanStackTableDevtools when registering each table created via useTable.