Row Grouping in Angular Datatable v0.4.0

Question

I am trying to use row grouping in current version of angular datable (http://l-lin.github.io/angular-datatables/) but not getting any clue how to implement it. I have a json data that has a format:

vm.data=[
   {
     'groupName': 'Match 1',
     'content':[{'id': 1, 'name': abc'}]
   }
]

This is what the html look like:

I am not sure how this will go from there. I found out in other issues, there is a suggestion to use event:dataTableLoaded on $scope but it seems like the eventit is not available in the current version. Any suggestion?

Answer 1

I haven't used that version of datatables but this work for me in

   $scope.dtOptions = DTOptionsBuilder
   .fromFnPromise(reportService.getReportData($scope.reportInfo,
   $scope.model))
       .withPaginationType('full_numbers')
       .withOption('fnDrawCallback',
           function(oSettings) {
              var api = this.api();
              var rows = api.rows({ page: 'current' }).nodes();
              var last = null;
              api.column(0, { page: 'current' })
              .data()
              .each(function(group, i) {
              if (last !== group) {
                 $(rows)
                 .eq(i)
                 .before(
                 '<tr class="group"><td colspan="5">' + group + '</td></tr>');
                                    last = group;
                                }
                            });
                    })