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

preact/compose-with-tanstack-form

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

28.3k|3.6k|Updated Oct 20, 2016
Search Tags:#preact#tanstack table#tanstack form#row identity#inline editing#cell renderers#getrowid
One-click install
npx skills add https://github.com/TanStack/table --skill preact-compose-with-tanstack-form
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: preact/compose-with-tanstack-form
Source: https://github.com/TanStack/table/tree/main/packages/preact-table/skills/preact/compose-with-tanstack-form
Command: npx skills add https://github.com/TanStack/table --skill preact-compose-with-tanstack-form

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

TanStack Table needs a reliable way to render editable cells while keeping in-flight input state stable as users sort, filter, and re-order rows.

Core Features & Use Cases

  • Editable cell components: render per-cell form fields (e.g., text, number, select) inside Table cell renderers.
  • Stable row-bound state: attach form state to a row identity using getRowId, so row state doesn’t jump during resorting or refiltering.
  • Reusable form wiring: use createFormHook and FieldGroup-style field components so each cell binds to the correct row field consistently.

Quick Start

Ask for an integration guide that wires @tanstack/preact-form into @tanstack/preact-table using createFormHook and a getRowId-based row identity for stable inline editing.

Frequently Asked Questions about preact/compose-with-tanstack-form

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I keep inline editing form state stable in TanStack Table when sorting or filtering rows?▼

To keep inline editing form state stable during sorting or filtering, bind form state to a stable row identity using the getRowId configuration in TanStack Table so values remain attached to the correct logical row.

What is the best way to add editable cells to a Preact data grid using TanStack Form?▼

The best way to add editable cells is delegating value and validation state to TanStack Form while rendering fields through the Table cell API, using createFormHook to wire reusable typed field components.

Do I need createFormHook to build reusable editable cell components in Preact Table?▼

Yes, you need createFormHook or createFormHookContexts to build reusable typed field components that bind each Table cell to the correct row field consistently within the Preact form integration.

Why does my inline cell editing input jump to the wrong row after resorting in TanStack Table?▼

Inline cell editing inputs jump because row state is not bound to a stable identity; configuring getRowId in the table ensures per-row form state stays attached to the same logical row across re-ordering.

Can I use TanStack Form with TanStack Table for inline editing in Preact?▼

Yes, you can integrate TanStack Form with TanStack Table for inline editing by rendering form fields inside Table cell renderers and managing validation state through the form while tracking rows with getRowId.

Related Skills

Explore More Software Engineering Skills→
TanStackTanStack
28.3k

solid/compose-with-tanstack-form

Compose TanStack Table with TanStack Form for editable SolidJS datagrids.

Official
Intermediate
openyidaopenyida
201

yida-table-form

Submit table-form rows to Yida forms with concurrent saveFormData calls.

Official
Advanced
TanStackTanStack
28.3k

svelte/compose-with-tanstack-form

Create editable Svelte 5+ datagrids by combining TanStack Table and TanStack Form with centralized row and field state.

Official
Intermediate
jiaiyanjiaiyan
21

el-table-v2

Render large datasets in a virtualized table component with fixed columns and custom cell renderers.

Community
Advanced