Implementing Row-level Form Submission with React Hook Form and Tanstack Table

[stychu]

Hello, I'm working on a project where I need to handle form submissions at the row level of a table, utilizing React Hook Form and Tanstack Table. My table has columns for "Phone Number," "Name," "Date," "Region," and "Actions." The "Actions" column contains sticky buttons for "Edit," "Save," and "Cancel."

In view mode, all columns display their values, with the "Actions" column featuring only an "Edit" button. Upon entering the edit mode by clicking "Edit," the "Actions" column switches to show "Save" and "Cancel" buttons. Meanwhile, other columns convert their content to input components or other custom components suitable for editing.

I've managed to implement sticky buttons and dynamically switch between display and edit modes. However, I'm uncertain about integrating the React Hook Form (RHF) state effectively. My custom components are designed to work with RHF when a controller is passed to them. Initially, I thought about setting up the RHF state before rendering and passing the entire useForm object to the Tanstack Table meta. Nonetheless, this approach seems potentially complex, especially when it comes to managing connections to sticky buttons and handling errors.

Does anyone have recommendations or best practices on how to achieve this functionality in a straightforward and understandable manner, particularly with emphasis on error handling and state management for individual rows using React Hook Form?

[rajbirjohar]

I figured I'd leave my solution here. I was able to successfully integrate RHF and tanstack-table using useFieldArray and some clever typescript. Essentially what you want to do is create the array of fields then pass those fields directly into the table instance. Only caveat is that the columns are nested within the table component since it needs access to the form hook but maybe this can be achieved using form context instead.

First declare your types:

interface TableProps {
  name: string;
}

type FormProps = {
  table: TableProps[];
};

Then add some data. Note that the first object is just empty to provide a default form to add new items:

const dummyData: DraftTableProps[] = [
  {
    name: '',
  },
 {
    name: 'John Doe',
  },
];

Then create the table component:

const Table = () => {

   // Notice how I am rendering an input within the cell and registering it via the row index.
   // Feel free to put controllers here or whatever.
   const columns: ColumnDef<DraftTableProps>[] = [
    {
      accessorKey: 'name',
      header: "Name",
      cell: ({ row }) => {
        return (
          <Input 
            {...register(`table.${row.index}.name`, {
              required: 'Required'
            })}
          placeholder="Draft Name" 
        /> )
      },
    },
    // An example of a nested field
    {
      accessorKey: 'location',
      header: "Location",
      cell: ({ row }) => {
        return (
          <Popover>
            <PopoverTrigger asChild>
              <Button variant="outline" small>
                Location
              </Button>
            </PopoverTrigger>
            <PopoverContent>
              <Input {...register(`table.${row.index}.location.building`)} placeholder="Building" />
              <Input {...register(`table.${row.index}.location.floor`)} placeholder="Floor" />
              <Input {...register(`table.${row.index}.location.room`)} placeholder="Room" />
            </PopoverContent>
          </Popover>
        );
      },
    // Here is where you can add a button to submit an individual row.
     {
      id: 'actions',
      cell: ({ row }) => {
        return (
          <>
            <Button
              variant="outline"
              type="submit"
              small
              onClick={handleSubmit((data) => onSubmitSingle(data.table[row.index]))}
            >
              Submit Individual
            </Button>
            <Button variant="outline" small onClick={() => remove(row.index)}>
              Remove
            </Button>
          </>
        );
      }
    },
  ];

  // Instantiate the form hook.
  const { register, handleSubmit, control, clearErrors } = useForm<DraftFormProps>({
    defaultValues: {
      table: dummyData
    }
  });
  const { fields, remove } = useFieldArray({
    name: 'table',
    control
  });

  // Instantiate the table instance and pass in the field array directly into the table.
  const table = useReactTable({
    data: fields,
    columns,
    getCoreRowModel: getCoreRowModel(),
    rowCount: dummyData.length || 0,
    pageCount: 1,
    getRowId: (row) => row.name,
  });

  // Submit handlers
  const onSubmitSingle = (data: DraftTableProps) => {
    console.log(data);
  };
  
  const onSubmit: SubmitHandler<DraftFormProps> = (data) => {
    console.log(data);
  };

  // Render the form and the table within.
  return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Table></Table>
     </form>
  )
}

Hope this helps anyone else looking for this.

Edit: I may have skipped some steps but you made need to instantiate multiple useForm hooks depending on how you set up your rows.

[kkeef11]

The issue is that I'm unable to call useForm within a callback. Since my rows are coming in from an api, once I have them, I'm wanting to instantiate a useForm for each row, given that each row is a form in and of itself, but I can't do that within a useEffect or custom hook, or condition, it's all against react hooks rules.

[rajbirjohar]

@kkeef11 What I ended up doing was implementing a "Submit selected" workflow instead. I don't believe it's possible to instantiate a hook within the row IF you follow the traditional way of creating a table component. You may be able to get around this if you create your own Row component that is rendered in your Table component which instantiates the form per row. Then you can use FormProvider provided by RHF to access the values and submit it individually.

[KevinVandy]

I assume that the normal way people use TanStack Table is to actually make standalone cell, row, header, body, etc. components, unlike the simplified examples in the docs where everything is usually all in one single table component. Then when you define useForm in the row components, it doesn't matter if there are a variable number of rows. That won't break the rules of hooks at all. It only breaks the rules of hooks if you are literally trying to call useForm in a map/loop of the main table/tbody component.

[rajbirjohar]

@KevinVandy Agreed. But multiple ways for multiple purposes. I've had a use case to use the entire table as a single form as well.

[andrewSalemi]

In case anyone need a solution for this problem, I ended up writing this custom row component which instantiate a form for the specific row

function EditableDataTableFormRow<TData, TSchema extends FieldValues>({
	row,
	schema,
	defaultValues,
}: {
	row: Row<TData>;
	schema: ZodSchema<TSchema>;
	defaultValues: DefaultValues<TSchema>;
}) {
	const form = useForm<TSchema>({
		mode: 'onSubmit',
		resolver: zodResolver(schema),
		defaultValues,
	});

	useEffect(() => {
		form.reset(row.original as unknown as TSchema);
	}, [form, row.original]);

	return (
		<Form {...form}>
			<TableRow data-state={row.getIsSelected() && 'selected'}>
				{row.getVisibleCells().map((cell) => (
					<TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
				))}
			</TableRow>
		</Form>
	);
}

And it's used like this in the table

<TableBody>
  {table.getRowModel().rows?.length ? (
  table
        .getRowModel()
	.rows.map((row) => (
		<EditableDataTableFormRow
			key={row.id}
			row={row}
			schema={schema}
			defaultValues={defaultValues}
		/>
   ))
       ) : (
	<TableRow>
		<TableCell colSpan={columns.length} className="h-24 text-center">
			CUSTOM EMPTY STATE
		</TableCell>
	</TableRow>
)}