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

solid/compose-with-tanstack-devtools

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Devtools can’t display the state of your Solid table unless you correctly wire the table instance into the Devtools host, making it hard to inspect filters, sorting, selection, and other behaviors during development.

Core Features & Use Cases

  • Mount Devtools once: Connect the Solid Table adapter to the TanStack Devtools multi-panel UI at the app root.
  • Register each table instance: Call the hook after every createTable so each table becomes a selectable inspection target in Devtools.
  • Track reactive lifecycles safely: Automatically registers and unregisters targets based on Solid reactive scope, including cleanup via reactive owner teardown.
  • Use cases: Debugting datagrid interactions in Solid apps, validating table feature behavior (sorting/filtering/grouping/selection), and comparing multiple tables on the same page.

Quick Start

Add the Devtools host plugin at your Solid app root with <TanStackDevtools plugins={[tableDevtoolsPlugin()]} />, then call useTanStackTableDevtools(table, "Your Table Name") immediately after each createTable.

Frequently Asked Questions about solid/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 a Solid app using Devtools?▼

Yes, you can debug multiple Solid datagrid instances on the same page by calling useTanStackTableDevtools(table, name?) after each createTable call, registering every table as a selectable inspection target within the Devtools multi-panel UI.

How do I register a Solid table with TanStack Devtools?▼

You register a Solid table by calling useTanStackTableDevtools(table, "Your Table Name") immediately after every createTable call, ensuring the table instance becomes a devtools target for validating sorting, filtering, and selection behaviors.

Does registering a Solid table with Devtools handle reactive lifecycle cleanup?▼

Yes, registering a Solid table with Devtools tracks the reactive lifecycle safely by automatically registering and unregistering targets based on the Solid reactive scope, including cleanup via reactive owner teardown.

Why are my Solid table filters and sorting not showing in TanStack Devtools?▼

Solid table filters and sorting may not show in TanStack Devtools if the table instance is not correctly wired into the Devtools host, requiring you to mount the adapter with tableDevtoolsPlugin() and use the devtools hook after createTable.

Can I debug multiple Solid datagrid instances on the same page with TanStack Devtools?▼

Yes, you can debug multiple Solid datagrid instances on the same page by calling useTanStackTableDevtools(table, name?) after each createTable call, registering every table as a selectable inspection target within the Devtools multi-panel UI.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

svelte/getting-started

Create typed TanStack Table v9 setups for Svelte 5 with reactive instances.

Official
Intermediate
TanStackTanStack
28.3k

state-management

Coordinate TanStack Table v9 state slices across initialState, controlled state, and atoms.

Official
Advanced
TanStackTanStack
28.3k

preact/compose-with-tanstack-devtools

Register TanStack Table instances with TanStack Devtools in Preact datagrids.

Official
Intermediate
cosmixcosmix
53

react

Build React SPAs with React Router v7, Jotai, Vite, and Bun.

Community
Intermediate