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>