Create nested table using react-table v7

Question

thanks for your help in advance.

The problem that I am trying to solve is to create a table with react-table v7 and within that table using the expand and display another table with data related to the first selection as it is attached in the image.

This is the codesandbox example of the image, I want to do the same but using the most updated version of react-table, I tried with subcomponents but these only show me the data, not the headers that they have, therefore I cannot do the ordering, searches within the sub table

I have tried to render just another instance of react table inside the subcomponent but it looks like this it always stays in the first column:

Does anyone have an example that looks like the one in the reference image that can help me?

Elzaelzevir

Answer 1

Because react-table v7 is headless, you can really go about this in a variety of ways. At a minimum, you need a way to control which row is open, and for that row to render its contents as a subrow. I forked the react-table v7 Basic Table example as an example. Here are the basic changes I made, which you can apply to your own use case:

• To control which row was open, a state variable called "open" which corresponds to the id of the row whose contents are being displayed (or false if none) was created. There are infinitely many ways to do this kind of logic, and it doesn't necessarily need to be controlled by the parent Table component, either. If your Rows are each themselves components, they can keep track of their own "open" state, for example.
• The sub-component was then added as a child of the parent Table, which passes it to as a prop called "children". It is then rendered in its own row, conditionally based on the above "open" state variable. Here, it was rendered purely as {children} but more complex use-cases can use React.cloneElement or similar, if you're passing data down from a parent down to the sub-component of the Table.

Shwalb