How can I merge ui grid cells into one column in AngularJs?

Question

I want to display data in UI grid like this, to merge multiple cells into one column in AngularJs. Is this possible with UI-Grid or not? Answers will be appreciated.

Answer 1

Yes, I found a solution for this. we can just add a field in ui-grid and assign an HTML table to the cellTemplate of that field, because we can easily merge rows and columns in html tables according to conditions. Below is the columnDef of ui-grid that requires to merge cells. This solution will definitely work.

Data to assign to the Ui-Grid:

 [{
  "days":
  {
    "2020-10-05":
    {
      "projects": [
        { "hours": 2, "task": "cc", "name": "project_name" }
      ],
      "date": "2020-10-05"
    },
    "2020-10-06":
    {
      "projects": [
        { "hours": 2, "task": "c", "name": "project_name" }
      ],
      "date": "2020-10-06"
    },
    "2020-09-20":
    {
      "projects": [
        { "hours": 1, "task": "aa", "name": "project_name" }
      ],
      "date": "2020-09-20"
    },
  }, "employeeId": 10, "employeeName": "ABC"
}]

columnDefs:

        [
          {
            name: "Employee Name",
            field: "employeeName",
            width: "20%"
          },
          {
            field: "other",
            headerCellTemplate: '<div><table width="100%"><tr><th width="15%" class="alignC pb40">Date</th><th width="20%" class="alignC pb40">Project</th><th width="10%" class="alignC pb40">Hours</th><th class="alignC pb40">Task</th></tr></table></div>',
            cellTemplate: '<div ng-repeat= "day in row.entity.days"><table width="100%"><tr ng-repeat= "project in day.projects"><td rowspan="{{day.projects.length}}" ng-if="grid.appScope.vm.date != day.date" width="15%">{{day.date ? (grid.appScope.vm.date= day.date) : day.date}}</td><td width="20%">{{project.name}}</td><td width="10%">{{project.hours}}</td><td>{{project.task}}</td></tr></table></div><span ng-show = false>{{grid.appScope.vm.date="abc"}}</span>'
          }
] ] 

Taking vm.date= anything just to match condition that if the same date appears for an employee it will not make another row only the project row will be divide further.