He estado tratando de crear una cuadrícula de datos/tabla dinámica personalizada en React, pero ahora no puedo entender cómo anidar los datos correctamente o llamar recursivamente a los siguientes datos para hacerlo. Las siguientes imágenes muestran cómo funcionaría la mesa:

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

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

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

Como se puede ver en las imágenes de los enlaces, toda la tabla funciona de forma jerárquica, ya que la forma en que se almacenan los datos en la base de datos es tabular.

P.ej. | Grupo local | Galaxia | Sistema Solar | Planeta | Ubicación | Población |

1. grupoA g1 ss1 p1 américa 10
2. grupoA g2 ss2 p2 india 15
3. grupo B g3 ss3 p3 sgp 4
4. grupo B g3 ss3 p4 dubai 11
5. grupo B g3 ss4 p5 reino unido 13
6. grupoB g4 ss5 p6 países bajos 16

Básicamente, puede haber múltiples grupos locales y cada grupo local puede contener múltiples galaxias que además pueden contener múltiples sistemas solares. Cada sistema solar puede contener múltiples planetas que pueden contener múltiples ubicaciones. Cada lugar tiene una población.

Necesito una tabla para poder agruparlos en base a columnas como se muestra en las imágenes. Actualmente, lo que he intentado es crear datos anidados, pero el nivel de anidamiento de 5 columnas es demasiado complejo.