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

solid/compose-with-tanstack-form

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
One-click install
npx skills add https://github.com/TanStack/table --skill solid-compose-with-tanstack-form
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

preact/compose-with-tanstack-form

Integrate editable cell UI with @tanstack/preact-form and @tanstack/preact-table.

Official
Intermediate
Hung-3008Hung-3008
1

flowio

Parse FCS files into NumPy arrays with channel metadata and CSV export.

Community
Advanced
TanStackTanStack
28.3k

react/compose-with-tanstack-form

Compose TanStack Table v9 editable cell grids with TanStack Form fields.

Official
Advanced
joncranglejoncrangle
8

tanstack-solid

Enforce type-safe routing and reactive data flows in SolidJS applications.

Community
Advanced