skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

preact/compose-with-tanstack-devtools

Register TanStack Table instances with TanStack Devtools in Preact datagrids.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the problem of having TanStack Table state and behavior that you can’t easily inspect and debug during development when using Preact.

Core Features & Use Cases

  • Wire TanStack Table instances to Devtools: Mount the Devtools host once and register each useTable result so the panel can show the right table state.
  • Support multi-table dashboards: Add multiple tables with clear names so you can switch targets in the Devtools UI.
  • Control devtools per table and per environment: Disable registration cleanly and ensure devtools UI behavior matches development vs production entrypoints.

Quick Start

In your app, mount <TanStackDevtools plugins={[tableDevtoolsPlugin()]} /> once and call useTanStackTableDevtools(table, 'Users Table') immediately after each useTable() in your Preact components.

Frequently Asked Questions about preact/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 Preact during development?▼

To inspect TanStack Table state in Preact, mount the Devtools host with <code>tableDevtoolsPlugin()</code> and call <code>useTanStackTableDevtools</code> immediately after <code>useTable</code> to register your table instances for the Devtools panel.

Can I register multiple Preact tables in TanStack Devtools?▼

Yes, you can register multiple Preact tables in TanStack Devtools by calling <code>useTanStackTableDevtools</code> after each <code>useTable</code> instance with a unique name, allowing you to switch between table targets in the Devtools UI for multi-table dashboards.

Why is my TanStack Devtools panel empty when using Preact?▼

An empty TanStack Devtools panel usually means you are using the wrong production versus development entrypoints. Ensure you mount the Devtools host with <code>tableDevtoolsPlugin()</code> and invoke <code>useTanStackTableDevtools</code> after <code>useTable</code> using the development entrypoint.

What is the best way to debug a Preact datagrid built with TanStack Table?▼

The best way to debug a Preact datagrid is registering your <code>useTable</code> instances with TanStack Devtools. Mount the host once and call <code>useTanStackTableDevtools</code> to visualize table state and behavior directly in the panel.

Do I need to mount TanStack Devtools separately for each Preact table component?▼

No, you mount the TanStack Devtools host with <code>tableDevtoolsPlugin()</code> only once in your app. You then call <code>useTanStackTableDevtools</code> after each <code>useTable</code> hook in individual Preact components to register them.

Can I disable TanStack Devtools registration for specific Preact tables?▼

Yes, you can disable TanStack Devtools registration cleanly per table and per environment. This allows you to control which Preact tables appear in the Devtools panel and ensure correct UI behavior across development versus production.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

vue/compose-with-tanstack-devtools

Register Vue TanStack Table instances with TanStack Devtools for live state inspection.

Official
Intermediate
jason660519jason660519

Create TanStack Table

Create and extend TanStack Table v8 data tables in Project-Manager.

Community
Advanced
TanStackTanStack
28.3k

solid/compose-with-tanstack-devtools

Registers Solid Table instances with TanStack Devtools for interactive state inspection.

Official
Basic
TanStackTanStack
28.3k

react/compose-with-tanstack-devtools

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

Official
Intermediate