Tanstack Table + TanStack Form Integration

[Jamus123]

Just curious if anyone knows if there's an intent on having these two libraries work well together. I use Tanstack Table quite a bit and have run into issues with integrating Formik and react-hook-form -- specifically with re-rendering on input. Would be great if anyone has any info on this. I've yet to dive into it myself.

[crutchcorn]

@KevinVandy you and I got to get together and work on this demo! I've been asked this a few times

[KevinVandy]

@Balastrong ?

[Balastrong]

Happy to help, keep me in the loop :)

[Balastrong]

@Jamus123 It would be interesting to hear what have you tried, what were your goals and what issues in particular you faced with the other tools, to craft a more accurate demo.

[anthonyhoegberg]

Any news or information on this? currently trying my best doing it myself but not much success to get tanstack form (array data) to work with tanstack table

[JavierBrooktec]

#1314

[anthonyhoegberg]

#1314
What about the synchronization issues? You still experiancing these issues?

[JavierBrooktec]

Well, when you use APIs like form.moveFieldValues, you're not mutating the whole state, so you should update the entire rows field if you want the rows from TStable to stay in sync. At least, that's what I had to do. I think it would be cool to create a sandbox with a simple implementation @anthonyhoegberg.

[Michahide]

hi, where could i find the demo?

[SeanCassiere]

For anyone in the future, I've found using the an intermediary/dummy Array of rows to work well. Since you'd just be subscribed to the count of the Array.

function Component() {
  const form = useForm({ defaultValues: { people: [{ name: 'Tanner' }, { name: 'Corbin' }] } });
  const count = useStore(form.store,(s) => s.values.people.length); // IMPORTANT!
  const dummyRows = useMemo(() => Array.from({ length: formRows }).map((_, i) => i)[count]); // IMPORTANT!

  const columns = useMemo(
    () =>
      [{ header: '#', cell: ({ row }) => `#${row.index + 1}` },
       { header: 'Name',
         cell: ({ row }) => {
            return (
              <form.Field
                name={`people[${row.index}].name`}
                children={(field) => {
                  return <input type="text" value={field.state.value} onChange={(evt) => field.handleChange(evt.target.value)} />;
                }}
              />
            );
          },
        },
        { header: 'Action',
          cell: ({ row }) => {
            return (
              <form.Field
                name={`people`}
                children={(field) => (
                  <button
                    type="button"
                    onClick={() => field.removeValue(row.index)}
                    disabled={field.state.value.length === 1}
                  >
                    Remove
                  </button>
                )}
              />
            );
          },
        },
      ] satisfies Array<ColumnDef<any, any>>,
    [form],
  );
  const table = useReactTable({ data: dummyRows, columns, getCoreRowModel: getCoreRowModel() });

  return <DataTable table={table} />
}

That being said, this is not battle-tested, this is just something I discovered in dev thought y'all might find useful.