Nested Array Object list in table ActiveReportJs React

148 Views Asked by At

This is my example object and i want to create a table with these columns HomeTown | Members | Power | SubPowers {homeTown}| {name} | {name} | {name} How can I display these nested arrays in table like this (I could not find any information in documentation)

For each column I want to use DrillDown so it will show the next column data (this part I know how to do by grouping)

DrillDown report Example

This example is made with all data in same level not nested as my Json. I need to make one like this with multiple colums but each column takes data from nested array.

I am using ActiveReportsJs v4 for React

[{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        {
          "name": "Radiation resistance",
          "description": "Can resist harmful radiation",
          "subPowers": [
            {
              "name": "Immune to gamma radiation"
            },
            {
              "name": "Resistant to x-rays"
            },
            {
              "name": "Absorbs cosmic rays for energy"
            }
          ]
        },
        {
          "name": "Turning tiny",
          "description": "Can shrink to a tiny size",
          "subPowers": [
            {
              "name": "Increased agility"
            },
            {
              "name": "Hard to detect"
            },
            {
              "name": "Can enter small spaces"
            }
          ]
        },
        {
          "name": "Radiation blast",
          "description": "Can emit blasts of radiation",
          "subPowers": [
            {
              "name": "Can cause cancer in opponents"
            },
            {
              "name": "Disrupts electronics"
            },
            {
              "name": "Can create EMPs"
            }
          ]
        }
      ],
      "equipment": [
        {
          "name": "Molecular Gauntlets",
          "description": "Allows control of molecular structure"
        },
        {
          "name": "Molecular Belt",
          "description": "Enhances molecular manipulation abilities"
        }
      ]
    },
    {
      "name": "Madame Uppercut",
      "age": 39,
      "secretIdentity": "Jane Wilson",
      "powers": [
        {
          "name": "Million tonne punch",
          "description": "Can punch with incredible force",
          "subPowers": [
            {
              "name": "Can shatter steel"
            },
            {
              "name": "Sends shockwaves through the ground"
            },
            {
              "name": "Can create sonic booms"
            }
          ]
        },
        {
          "name": "Damage resistance",
          "description": "Can withstand incredible amounts of damage",
          "subPowers": [
            {
              "name": "Regenerates quickly"
            },
            {
              "name": "Can absorb energy attacks"
            },
            {
              "name": "Hard to hurt"
            }
          ]
        },
        {
          "name": "Superhuman reflexes",
          "description": "Can react incredibly quickly",
          "subPowers": [
            {
              "name": "Can dodge bullets"
            },
            {
              "name": "Can catch objects thrown at high speeds"
            },
            {
              "name": "Can anticipate opponents' moves"
            }
          ]
        }
      ],
      "equipment": [
        {
          "name": "Uppercut Gloves",
          "description": "Enhances punching power"
        },
        {
          "name": "Uppercut Boots",
          "description": "Enhances kicking power"
        }
      ]
    }
  ]
}]

I have read all ActiveReportsJs documentation but did not find any option with such a nested JSON.

In the below nested dataset example it shows with only 2 levels of nested array but i need with more than 3.

NestedDatasetsExample

0

There are 0 best solutions below