Wrapping a reactabular row with an HOC/Context

[dannyhuly]

Hi, Is possible to wrap a row with a HOC or Context ? I would like to implement a table row edit (not cell by cell edit) but i'm unable to use informed or Formik to wrap a reactabular row with a form control logic.

Is there a way to manipulate a row or is the API only allows cell manipulation ?

Any ideas ? Thanks.

[bebraw]

Did you notice the components API? Technically you can override anything that's in the structure (the component is headless).

Could you set up a small example of what you have together so far?

[bebraw]

Here are the related docs: https://reactabular.js.org/#/table/overriding-default-renderers .

[dannyhuly]

Its looks like using the Table.Provider renders (specifically the body.row) can help with wrapping the TableRow with a HOC.

const RowWrapper = props => (<tr>...</tr>);

<Table.Provider
  columns={...}
  renderers={{
    body: {
      row: RowWrapper
    }
  }}
>
   ...
<Table.Provider />

The thing is that the RowWrapper only receives children. If props like property and rowData would pass throughה 'TableRow' then a RowWrapper would have the scope that I need. The bad thing about passing down extra props will be the additional renders on row rather then only render on cells (From what I understand).

Close, but no cigar (yet).

[bebraw]

@dannyhuly I'm working on a small re-design (separate branch) but I haven't gotten around to finishing it yet as I've been too busy with paid work (I do this one for free so it progresses slowly). Likely finishing that might help in this particular case as it makes the library more flexible.