Building a Tanstack Form & TanStack Table example
Let's talk about it here 👇
10 Replies
other-emerald•16mo ago
https://discord.com/channels/719702312431386674/1100437019857014895/1275220538108805161 @luap relevant message
rare-sapphire•16mo 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?
jolly-crimsonOP•16mo 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 arraymolecular-blue•5mo 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
jolly-crimsonOP•5mo 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
molecular-blue•5mo ago
Do you think this is a needed example we should showcase on the docs ?
jolly-crimsonOP•5mo ago
An example on how to integrate Form and Table? 100% valuable 😄
molecular-blue•5mo ago
Ill try something on the weekend if I get some free time, will notify here
extended-salmon•5d ago
Hey @Fitim Bytyqi, I know this chat really have gone the long way, but do you have the example on how to integrate Form and Table?
molecular-blue•4d ago
Sorry, I've been caught up with work and didn't have free time to work on this one.
I spin up a basic example that you could improve upon, the idea is to use the editable-table example alongside form.setFieldValue (even though there is some typescript error with this one, so I had to hack my way using AI on this one).
https://stackblitz.com/edit/vitejs-vite-p7af9tt6?file=src%2FApp.tsx