Best Way to Integrate with TanStack Table

[JavierBrooktec]

This is my current integration, but I am experiencing synchronization issues between the table data and the form data. This leads to incorrect results when sorting or filtering. I wonder if this is the correct approach.

import { useStore, formOptions } from "@tanstack/react-form";
import {
 createColumnHelper,
 getCoreRowModel,
 useReactTable,
} from "@tanstack/react-table";

import { withForm } from "@/components/form/form-context";
import Table from "@/components/table";
import { fileTableFormOpts } from "@/components/table/form-options";

const columnHelper = createColumnHelper<{ name: string }>();

const fileTableFormOpts = formOptions({
 defaultValues: {
   rows: [],
 },
});

const TableComponent = withForm({
 ...fileTableFormOpts,
 render: function Render({ form }) {
   const rows = useStore(form.store, (state) => state.values.rows);

   const columns = useMemo(() => {
     const baseColumns = [
       columnHelper.accessor("name", {
         id: "name",
         header: "name",
         cell: ({ row }) => {
           console.log(row.original.name); // If I use APIs like form.moveFieldValues, the values are inconsistent

           return (
             <form.AppField key={row.index} name={`rows[${row.index}].name`}>
               {(subField) => {
                 return <subField.TextField />;
               }}
             </form.AppField>
           );
         },
       }),
     ];

     return baseColumns;
   }, [form]);

   const table = useReactTable({
     columns,
     data: rows,
     getCoreRowModel: getCoreRowModel(),
   });

   return <Table table={table} />;
 },
});

export default FileTableComponent;