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?