React-table: Each row with different subComponent

[antriksh-gupta]

Have used Expander in one column of React-table. On expanding a different row of table i want to display different subComponents. My subComponent has another react-table. So the issue is when two rows are expanded , the subComponent react table gets the data source acc to the 2nd row and thus it updates the same in the 1st row subComponent as well. I want to have different data sources according to the row.

Also tell how to give Column accessor value with the Expander button in the same cell.

I have given the data dynamically to the subComponent react table that is doin fine.

[tannerlinsley]

This feature/issue has been tagged as one that will likely be fixed or improved in the next major release of React-Table. This release is expected to be completed in the next 6 - 8 months. Please see #1143 for more detail. If you believe this feature can be easily fixed, we invite you to fork the project, attempt the fix, and use it until the latest version is available. If the fix is simple enough, we will also consider it as a PR to the current version.

[Blezzoh]

I ran into the same problem and here is how i fixed it. The SubComponent receive a function that returns a JSX. The argument to this function, (row on 'https://react-table.js.org/#/story/sub-components'), has these attributes: original, row, index, viewIndex, pageSize, ... You can use one of these attributes to manipulate the data dynamically. I am using row.index in order to detemine the data that i want to display. I hope this helps

[Mulli]

I am very close to giving up react-table.
Even the following sub component is dead. No errors reported. ("react-table": "^6.9.0",)
I used to have a separate sub table, per row.

`

      data={data} // ~ 20 lines

      columns={columns} // few columns

      showPagination={data.length > pageSize}

      defaultPageSize={data.length < pageSize ? data.length : pageSize}

      className="-striped -highlight"

      SubComponent={row => console.log(row.index) }

    />`

Am I missing something?

[tannerlinsley]

Theres known issues with the current release. Downgrade to 6.8.x for now
please.

On Sun, Feb 10, 2019 at 1:31 AM Mulli Bahr [e-mail] wrote:

I am very close to giving up react-table.
Even the following sub component is dead. No errors reported.
("react-table": "^6.9.0",)
I used to have a separate sub table, per row.

showPagination={data.length > pageSize} defaultPageSize={data.length <
pageSize ? data.length : pageSize} className="-striped -highlight"
SubComponent={row => console.log(row.index) } />

Am I missing something?

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/tannerlinsley/react-table/issues/1128#issuecomment-462113780,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFUmCXntKzNy7Hk0-lw1rSiAZL17C7ySks5vL9jFgaJpZM4WpTrS
.

[Mulli]

Thanks for the quick reply. [email protected] works for me.

[rachwongrw]

This really helped me! I was able to access the row level data by accessing row.original instead. Other options were available: original, row, index, viewIndex, pageSize, page, level, nestingPath, aggregated, groupedByPivot, subRows

I ran into the same problem and here is how i fixed it. The SubComponent receive a function that returns a JSX. The argument to this function, (row on 'https://react-table.js.org/#/story/sub-components'), has these attributes: original, row, index, viewIndex, pageSize, ... You can use one of these attributes to manipulate the data dynamically. I am using row.index in order to detemine the data that i want to display. I hope this helps

[Mulli]

Can you get the "parent" table row.index into renderEditable of the new table in the sub component?

[gowthamkumarguruju]

@antriksh-gupta similar issue did you get any solution?

@Blezzoh how did you fix ? if you have subcomponent inside another subcomponent?

[srikanthpathlavath]

why react table subcomponent expand is not working? how to resolve this error? please help me.

why react table subcomponent expand is not working if columns array is defined outside of useEffect hook, if it is defined inside of useEffect hook then it is working fine.