solid/compose-with-tanstack-form

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.