react/compose-with-tanstack-form

What problem does it solve?

It solves the problem of building truly editable TanStack Table v9 grids by letting TanStack Form own the editing state, validation, and submissions while the table focuses on layout and data operations.

Core Features & Use Cases

• Editable cell composition: Render row-bound form fields inside each column’s cell, so edits update form-managed values.
• Validation and submit wiring: Attach Zod (or other validators) at the field and form levels, then handle submit from the form.
• Row add/remove with correct reactivity: Add or remove rows via form array operations and re-render safely using a subscription to state.values.data.length.
• Typing safeguards for recursive rows: Avoid TS2589 by using an Omit<Row,'subRows'> pattern for form-bound row types when recursive subRows exist.

Quick Start

Ask an AI to generate a TanStack Table v9 example that composes editable cells using @tanstack/react-form, including add/remove rows, Zod validation, and the Omit<..., 'subRows'> typing fix.