1

I have to make UI as show below, using ag-grid and angular. The 1st column will be pinned. The yellow colored time is the current time and the data which I am getting from service is someting like this:

{
  "table_header": [
    {
      "isCurrentTime": false,
      "time": "07:00"
    },
    {
      "isCurrentTime": true,
      "time": "07:10"
    },
    {
      "isCurrentTime": false,
      "time": "07:20"
    }
  ],
  "table_rows": [
    {
      "s_name": "Joy",
      "data": [
        {
          "color": "#ff0000",
          "time": "07:00"
        },
        {
          "color": "",
          "time": "07:10"
        },
        {
          "color": "",
          "time": "07:20"
        }
      ]
    },
    {
      "s_name": "Anna",
      "data": [
        {
          "color": "",
          "time": "07:00"
        },
        {
          "color": "#00FF00",
          "time": "07:10"
        },
        {
          "color": "",
          "time": "07:20"
        }
      ]
    },
    {
      "s_name": "Sam",
      "data": [
        {
          "color": "",
          "time": "07:00"
        },
        {
          "color": "#00FF00",
          "time": "07:10"
        },
        {
          "color": "#ff0000",
          "time": "07:20"
        }
      ]
    }
  ]

}

The problem is I am unable to form the rowData for the ag-grid. The code I tried so far is as follows, can anyone please guide me how do I format the JSON response so as to get the desired output.

ngOnInit() {
    // service call
    if (data.result === UIConstants.SUCCESS && data.status_code === UIConstants.STATUS_CODE) {
      this.columnDefs.push({
        headerName: 'Name',
        field: 's_name',
        pinned: 'left', resizable: true,
        width: 200
      });
      data.table_header.forEach(d => {
        this.columnDefs.push({
          headerName: d.time,
          field: 'color',
          width: 70, cellStyle: { border: '1px solid' }
        });
      });
  }
}
}

<ag-grid-angular class="ag-theme-alpine stock-table" [rowData]="rowData" [columnDefs]="columnDefs"
  [defaultColDef]="gridOptions.defaultColDef" #agGrid>
</ag-grid-angular>

enter image description here

Anna
  • 1,669
  • 7
  • 38
  • 63
  • first of all `rowData` should be assigned after `onGridReady` event. so check the doc to get an understanding of how the library (ag-grid) life-cycle works. – un.spike Oct 01 '21 at 23:34

0 Answers0