How to display data in angular ag grid

Question

https://stackblitz.com/edit/ag-grid-angular-hello-world-pvtbsw?file=src/app/app.component.ts

How to display this data in ag grid?

the output should be like this.

Answer 1

app.component.html

<ag-grid-angular 
    style="width: auto; height: 300px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="desktopDefaultCols"
    [modules]="modules">

</ag-grid-angular>

app.component.ts

import { Component } from '@angular/core';

import {AllCommunityModules} from "@ag-grid-community/all-modules";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
   desktopDefaultCols = [
    {
        headerName: "January19", 
         children: [
           {headerName: "PRN 1",
           field: 'prn1'},
           {headerName: "PRN",
           field: 'prn'}
         ]
    },
    {
        headerName: "March19",
        children: [
          {headerName: "Total"}
         ]
    },
    {
        headerName: "May19", 
        children: [
          {headerName: "Total"}
         ]
    },
    {
        headerName: "June19", 
        children: [
          {headerName: "Total"}
         ]
    }

];


    columnDefs = [
        {field: 'make' },
        {field: 'model' },
        {field: 'price'}
    ];

    rowData = [
        { prn1: '10', prn: '0'},
         { prn1: '3', prn: '10'},
          { prn1: '0', prn: '1'},
        { prn1: '0', prn: '0'},
        { prn1: '0', prn: '0'},
    ];

    modules = AllCommunityModules;

}

Demo : https://stackblitz.com/edit/angular-tsy8c1