Building a Tanstack Form & TanStack Table example
Let's talk about it here 👇
8 Replies
continuing-cyan•13mo ago
https://discord.com/channels/719702312431386674/1100437019857014895/1275220538108805161 @luap relevant message
absent-sapphire•13mo ago
Hey, following up on
Hey Guys,
This is a minimal reproduction of using Tanstack Table AND Tanstack Form in two variants. I used 1. a minimal setup copying the exact array example from the tanstack site (just adjusted the key to be the id, not the index and 2. a tanstack table reproduction using shadcn (has the same issue, just prettier and using the tanstack table implementation).
The Issue:
When using a key prop on one of the rows (either directly on the form. Field or on a parent row component) OTHER THAN index, removing a row breaks the state.
The issue seems to be that the row gets first correctly removed and then in the next rerender directly added back again, but only with the form-referenced/linked props.
Do I miss something? Is there a config on useForm to mitigate this issue? This might be an issue for all Tanstack Table users using custom rowIds/keys
https://codesandbox.io/p/devbox/dazzling-benz-dttxkz
Has someone confirmed this yet?
wise-whiteOP•13mo ago
Heyy! Thanks for setting up the example 😄
The problem in your code is that you're doing
subField.removeValue but you should call it on field, the parent, that is the arrayrare-sapphire•2mo ago
@Leonardo Thanks for providing real value on your TS form videos, regarding this thread, I wanted to ask if there is any progress on linking the editable table with tanstack form
I made a basic repro on codesandbox, while it works great if the columns are created inside the component, I am not sure how would I make it work when the columns are created outside of it (shadcn datatable examples).
Using react-hook-form I could use useFormContext on the cell attribute but not sure how to make it work with TS form.
https://codesandbox.io/p/github/fitimbytyqi/tanstack-starter/main?import=true
wise-whiteOP•2mo ago
No news from my side, I'm sorry. If you have a working example let's just discuss it on #form, I think you could even raise a PR to have an initial example in the docs. It can be discussed and improved if needed
rare-sapphire•2mo ago
Do you think this is a needed example we should showcase on the docs ?
wise-whiteOP•2mo ago
An example on how to integrate Form and Table? 100% valuable 😄
rare-sapphire•2mo ago
Ill try something on the weekend if I get some free time, will notify here