Render tree data that contains children nodes

[azuddin]

Hi all, is it possible to render this data set in react table? I cannot find any good example on how to render data recursively and having like tree structure. Really appreciate for the helps

{  
  id: 1,
  name: "Ian",
  children: [
      { id: 2, name: "Max" },                        > Ian
      {                                                  > Max
         id: 3,                                          > Mike
         name: "Mike",                      --->             > Test
         children: [                                         > Test 8
           { id: 7, name: "Test" },                          > Test 10
           { id: 8, name: "Test 8" },                    > John
           { id: 10, name: "Test 10" }
         ]
      },
      { id: 4, name: "John" }
  ]
}

[Codar97]

You can do this using the subRows key instead of children. Then you will need to change some things to define a specific column as the pivot for that row. I threw together a quick example here https://codesandbox.io/s/react-table-v7-sandbox-pwhil?fontsize=14

I removed useGroupBy as that was causing some conflicts with pivoting which could be sorted but just for this example its not needed. I only made changes to the renderRow function in Table.js and changed the data a bit to add subRows in Basic.js.

So basically what I did was for the data I added subRows to some data like you have with the children key. But then for the data set that has subRows I defined a pivot value which is the column that it should pivot around. Im sure it can be done in a cleaner way but this is just a quick simple example using subRows.

[tannerlinsley]

That's a great example to demonstrate the flexibility of the library. In the near future, we'll have an official examples folder in the repo for codesandboxes just like that.

[nikhil-varma]

@Codar97 Thanks for the example! A follow up question, I see that this is in v7 but I am looking for a similar example in v6.. The requirement I have is something similar but the expanded view should be a data set view which follows the parents column width and expansion states and is demarcated as this example shows. I have tried looking into the documents and found pivotBy and SubComponent but unfortunately they don't seem to fit my use case.. Would appreciate any direction for this. Thanks!

[nikhil-varma]

Found a solution: https://codesandbox.io/s/react-table-pivoting-and-aggregation-1pgbv

Was wondering if there is a cleaner solution rather than checking for rows.level and then adding the Expander component.. Thanks again!

[pedro757]

Are there updated versions of these solutions? @nikhil-varma @Codar97 A couple of years have passed