I have been trying to build a custom data grid/pivot table in React but unable to understand now to nest the data properly or recursively call the next data to do so. Following images show how the table would work:

https://i.stack.imgur.com/aAsHK.jpg

https://i.stack.imgur.com/803yR.jpg

https://i.stack.imgur.com/XOGga.jpg

As it can be seen from the images in the links, the entire table works on a hierarchical basis the the way data is stored in the db is tabular itself.

Eg. | Local Group | Galaxy | Solar System | Planet | Location | Population |

1. groupA g1 ss1 p1 america 10
2. groupA g2 ss2 p2 india 15
3. groupB g3 ss3 p3 sgp 4
4. groupB g3 ss3 p4 dubai 11
5. groupB g3 ss4 p5 uk 13
6. groupB g4 ss5 p6 netherlands 16

Basically, there can be multiple local groups and each local group can contain multiple galaxies which can further contain multiple solar systems. Each solar system can then contain multiple planets which can contain multiple locations. Each location has a population.

I need a table to be able to group these up on the basis of columns as shows in the images. Currently what I've tried is building a nested data but the level of nesting for 5 columns in way too much complexity.