solid/compose-with-tanstack-devtools

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.