svelte/compose-with-tanstack-form

What problem does it solve?

Editable tables often scatter state across cells, causing bugs, validation headaches, and confusing re-render behavior when users sort, filter, paginate, or virtualize rows.

Core Features & Use Cases

• Form-owned editable state: The form owns per-row, per-field values and validation, while the table owns layout and row-model features.
• Reusable field cell components: Create Svelte field components (like text, number, select) once and reuse them across columns via renderComponent and form.Field.
• Robust table-to-form wiring: Drive @tanstack/svelte-table data directly from form.state.values.data, enabling add/remove/update flows and pairing with selection and virtualization.

Use this when you need an editable datagrid in Svelte 5+ where each cell edits structured form data, and you want consistent behavior across validation, pagination, and UI composition.

Quick Start

Ask an AI to show how to wire a createAppForm from @tanstack/svelte-form into @tanstack/svelte-table so each column cell renders a reusable form.Field-backed component using data[${rowIndex}].<fieldName>.