vue/compose-with-tanstack-form

What problem does it solve?

Building editable datagrids often leads to tangled state management, rerender performance problems, and hard-to-type recursive row data when using Vue.

Core Features & Use Cases

• Form-owned row data: Keep the source of truth in @tanstack/vue-form and have @tanstack/vue-table render from that state.
• Cell bindings per row index: Bind each editable cell to the corresponding field path like data[${row.index}].fieldName using <form.Field>.
• Performance-safe subscriptions: Subscribe to data length for row add/remove re-renders instead of subscribing to the entire data array on every keystroke.
• Recursive row typing fix: Use Omit<Row, 'subRows'> for the form row type to avoid TS2589 caused by DeepKeys recursion.
• Use Case: Create an editable, paginated Vue table where each row can be added/removed and each cell updates form state with validation and submit handled by the form.

Quick Start

Ask an AI agent to generate a Vue example that composes @tanstack/vue-table with @tanstack/vue-form using form.state.values.data as the table data source and <form.Field name="data[${row.index}].fieldName"> bindings for each cell.