solid/compose-with-tanstack-form

Name: solid/compose-with-tanstack-form
Availability: InStock
Author: TanStack

Compose TanStack Table with TanStack Form for editable SolidJS datagrids.

28.3k|3.6k|Updated Oct 20, 2016

Search Tags:#field validation #tanstack table #solidjs #reactive state #tanstack form #editable grid #cell rendering

Ready to run

npx skills add https://github.com/TanStack/table --skill solid-compose-with-tanstack-form

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: solid/compose-with-tanstack-form
Source: https://github.com/TanStack/table/tree/main/packages/solid-table/skills/solid/compose-with-tanstack-form
Command: npx skills add https://github.com/TanStack/table --skill solid-compose-with-tanstack-form

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of building editable Solid datagrids where the table renders inputs but the form owns the values, validation, and submission.

Core Features & Use Cases

Form-driven editable cells: Render column cell content using <form.AppField> so edits flow into form.state.values.
Reactive table data binding: Drive the table data from a getter over form.state.values.data to keep row models in sync with user edits.
Reusable field components: Register TextField, NumberField, and SelectField once via createFormHook and reuse them across rows and columns.
Use Case: Create a spreadsheet-like interface for editing an array of records (e.g., contacts or products) with per-field validation while keeping the table responsible only for layout.

Quick Start

Ask the assistant to implement an editable Solid Table that uses @tanstack/solid-form for cell state and validation by wiring table data to form.state.values.data and rendering each cell with form.AppField mapped to data[rowIndex].fieldName.

Frequently Asked Questions about solid/compose-with-tanstack-form

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

FAQPage Schema

How do I make Solid Table cells editable with TanStack Form state?▼

Bind editable table rows by sourcing table data from a reactive getter over form.state.values.data. This keeps TanStack Table row models continuously synced with form edits as users update individual cell inputs.

How do I add field validation to editable datagrids in SolidJS?▼

Register field components like TextField, NumberField, and SelectField once via createFormHook. This allows you to reuse the same validated input components across all rows and columns in your SolidJS datagrid.

Why does my SolidJS editable grid lose reactivity when using TanStack Form?▼

Editable grids lose reactivity when accessing form state incorrectly. Use field().state.value to ensure Solid reactivity and stable component lifecycles, and always drive table data from a getter over form.state.values.data.

Can I use TanStack Form to manage spreadsheet-style row editing in SolidJS?▼

You need createFormHook and createFormHookContexts to establish the form context. Wire your table data to form.state.values.data and map each cell renderer to the corresponding data[rowIndex].fieldName to maintain state.