How to display complex data structures in ag-grid Angular

Question

I want to display my data in ag-grid but I'm not sure how to create my grid. Can I group my actors? Or can I just group the films or awards? Any help would be greatly appreciated!

 "rows": [
      {
        "actorId": "22",
        "firstName": "Gwyneth",
        "lastName": "Paltrow",
        "films": [
          {
            "name": "Iron Man"
          },
          {
            "name": "Avengers: Infinity War"
          }
        ],
        "awards": [
          {
            "name": "Oscar", 
            "year": "1999"
          },
          {
            "name": "Golden Globe Award",
            "year": "1999"
          }
        ]
      },...

Answer 1

Sounds like you want to use master-detail (Enterprise feature).

If so, set your columnDefs like so:

  columnDefs = [
    { field: 'actorId', cellRenderer: 'agGroupCellRenderer' },
    { field: 'firstName' },
    { field: 'lastName' },
  ];

Create your detailCellRendererParams:

  detailCellRendererParams: any = {
    detailGridOptions: {
      columnDefs: [{ field: 'name' }, { field: 'year' }],
      defaultColDef: {
        flex: 1,
      },
    },
    getDetailRowData: function (params) {
      // change this to params.successCallback(params.data.films); instead to see the films in the detail
      params.successCallback(params.data.awards);
    },
  };

And pass this to your grid in the html while also enabling master detail:

<ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    [modules]="modules"
    (gridReady)="onGridReady($event)"
    [detailCellRendererParams]="detailCellRendererParams"
    [masterDetail]="true"
    >

</ag-grid-angular>

Demo