react-table v7 within react-hook-form

Question

i am working on a complex react form where it has few controlled inputs along with grid/table. currently i am using react-hook-form for validation.
here is my mockup. idea here is show grid as required until user adds some data. user can add/remove data by clicking "+" or "-" buttons.

when i submit here is what i see in submitted data

{
  "fname": "sasa",
  "lname": "asasasa"
}

here is the expected output

{
  "fname": "sasa",
  "lname": "asasasa",
  "localAddress":[
    {
      "street1":"street1",
      "street2":"street2",
      "city":"city"
    },
    {
      "street1":"street2",
      "street2":"street2",
      "city":"city"
    }
  ]
}

here is my codesanbox
Codesanbox

not sure how can i integrate react-table (or any table component) with react-hook-form (or any react form). building a form using "react-table" is a must for me.

appreciate any help.

score 6 · Accepted Answer · answered Jun 25 '20 at 18:50

As mentioned in the get-started docs in the "Work with UI library" section:

Option 3: we can set up a custom register using the useEffect Hook and update the value via setValue.

So here's what needs to be done in your case:

export default function App() {
  const { register, handleSubmit, setValue } = useForm();
  // ... 

  React.useEffect(() => {
    register({ name: "localaddress" });
  }, [register]);

  const addLocalAddress = function() {
    // ... 
    setValue("localaddress", d);
    setLocalAddress(d);
  };

  // ... 
}

And with this in place you need to get rid of Controller by replacing this:

<Controller
  name="tag"
  control={methods.control}
  as={
    <Table1
      name="tag"
      ref={methods.register}
      columns={columns}
      data={localAddress}
      {...methods}
    />
  }
/>;

with this:

<Table1 columns={columns} data={localAddress} />

That should be it. And of course the sandbox.

Vivek Doshi · Answer 2 · 2020-06-25T19:19:02.467

Here you go :

First : we need the input box, with name that can generate the texted output

name="localAddress[0][street1]"
name="localAddress[0][street2]"
name="localAddress[0][city]"

name="localAddress[1][street1]"
name="localAddress[1][street2]"
name="localAddress[1][city]"


// to generate the name you can do something like this
<Input
    type="text"
    name={`localAddress[${i}][${columns[j]["accessor"]}]`}
    placeholder={columns[j]["accessor"]}
    innerRef={methods.register}
/>

Second : we need access to methods

// pass it from props
<Table1
    name="tag"
    ref={methods.register}
    columns={columns}
    data={localAddress}
    methods = {methods} // <---- Pass HERE
/>

// access it via props
export const Table1 = React.forwardRef(({ columns, data, methods }, ref) => {

WORKING DEMO : (for output you can check the console)

react-table v7 within react-hook-form

2 Answers2

Linked