Ag-grid - How to show data in ag-grid which is having nth levels of data for angular app

Question

Data:

   [
    {
        "manager": "m1",
        "name":"n1",
        "id":"123",
        "documents": {
            "Pending":{
            "all": 10,
            "week": 2,
            "week2": 4
            "week3": 2,
            "week4": 2
            }
        },
        "children": [
            {
            "manager": "m11",
            "name":"n11",
            "id":"223",
            "documents": {
            "Pending":{
                "all": 10,
                "week": 2,
                "week2": 4
                "week3": 2,
                "week4": 2
                }
            },
            "children": [
                {
                "manager": "m111",
                "name":"n111",
                "id":"323",
                "documents": {
                    "Pending":{
                    "all": 10,
                    "week": 2,
                    "week2": 4
                    "week3": 2,
                    "week4": 2
                    }
                },
                "children": [
                    {
                    "manager": "m1111",
                    "name":"n1111",
                    "id":"423",
                    "documents": {
                    "Pending":{
                        "all": 10,
                        "week": 2,
                        "week2": 4
                        "week3": 2,
                        "week4": 2
                        }
                    },
                    "children": []
                    }
                ]
                }
            ]
            },
            {
            "manager": "m22",
            "name":"n22",
            "id":"234",
            "documents": {
                "Pending":{
                "all": 10,
                "week": 2,
                "week2": 4
                "week3": 2,
                "week4": 2
                }
            },
            "children": [
                {
                "manager": "m222",
                "name":"n222",
                "id":"235",
                "documents": {
                "Pending":{
                    "all": 10,
                    "week": 2,
                    "week2": 4
                    "week3": 2,
                    "week4": 2
                    }
                },
                "children": []
                }
            ]
            },
        ]
    },
    {
        "manager": "mn1",
        "name":"nm1",
        "id":"1233",
        "documents": {
            "Pending":{
            "all": 10,
            "week": 2,
            "week2": 4
            "week3": 2,
            "week4": 2
            }
        },
        "children": [
            {
            "manager": "mn11",
            "name":"nm11",
            "id":"223",
            "documents": {
            "Pending":{
                "all": 10,
                "week": 2,
                "week2": 4
                "week3": 2,
                "week4": 2
                }
            },
            "children": [
                {
                "manager": "mm111",
                "name":"nm111",
                "id":"3234",
                "documents": {
                    "Pending":{
                    "all": 10,
                    "week": 2,
                    "week2": 4
                    "week3": 2,
                    "week4": 2
                    }
                },
                "children": [
                    {
                    "manager": "mn1111",
                    "name":"nm1111",
                    "id":"2423",
                    "documents": {
                        "Pending":{
                        "all": 10,
                        "week": 2,
                        "week2": 4
                        "week3": 2,
                        "week4": 2
                        }
                    },
                    "children": []
                    }
                ]
                }
            ]
            },
            {
            "manager": "mn22",
            "name":"nm22",
            "id":"2345",
            "documents": {
                "Pending":{
                "all": 10,
                "week": 2,
                "week2": 4
                "week3": 2,
                "week4": 2
                }
            },
            "children": [
                {
                "manager": "mn222",
                "name":"nm222",
                "id":"2355",
                "documents": {
                    "Pending":{
                    "all": 10,
                    "week": 2,
                    "week2": 4
                    "week3": 2,
                    "week4": 2
                    }
                },
                "children": []
                }
            ]
            },
        ]
    }
    ]

I am unable to put the above data into ag-grid for multi level (nth level) data with grouping on "manager" with total/all values to be grouped for all children items.

Tree data for ag-grid was not helpful and other groupings were also on 1 level but no support for multi level grouping for the column

Below is the expected result

Answer 1

Tree Data is the natural option here since you have a hierarchy of data which have children.

To use Tree Data, the grid simply expects an array of objects, where each object is a row.

Inside each row object, there should be a hierarchy specifying a level of the tree. This is further explained in our documentation.

So first you have to flatten your data, for example, the following data:

[
    {
        "manager": "m1",
        "id":"123",
        "children": [
            {
            "manager": "m11",
            "id":"223",
            "children":[],
            },
    }
]

Must be flattened into this form:

[
    { hierarchy: [0], "manager": "m1", "id":"123", children: [...] },
    { hierarchy:[0, 1] "manager": "m11", "id":"223", children: [] }
]

Notice how in the first snippet, the array has a length of 1, however in the flattened data, the array has a length 2 and also has a new property hierarchy (you can call this anything) to show that m11 is a child of m1.

Putting this altogether, I've written a simple recursive function that takes your data and flattens them into individual rows and then also adds a hierarchy property:

this.rowData = this.flattenChildrenRecursively(this.originalData);

  flattenChildrenRecursively(data, parent = null, childHierachy = null) {
    let newData = [];
    if (data) {
      data.forEach((initialRow, parentIndex) => {
        let parentHierachy = [];
        initialRow.hierachy = parentHierachy;

        if (parent) {
          initialRow.parent = parent;
          parentHierachy = [...childHierachy];
          initialRow.hierachy = parentHierachy;
        }
        parentHierachy.push(parentIndex);

        newData.push(initialRow);
        if (initialRow.children) {
          newData = [
            ...newData,
            ...this.flattenChildrenRecursively(
              initialRow.children,
              initialRow,
              parentHierachy
            ),
          ];
        }
      });
    }

    return newData;
  }

Once the data is flattened, then we implement the getDataPath callback to tell the grid the hierarchy for each row:

  this.getDataPath = function (data) {
      return data.hierachy;
    };

See this implemented in the following plunker example.