Multiple grouping in angular datatable

Question

I am trying to perform multiple grouping in my data tables, I can manage to group by one column thanks to this example.

https://datatables.net/examples/advanced_init/row_grouping.html

Does anybody know about any plugin that works with angular and angularDatables (https://l-lin.github.io/angular-datatables/#/welcome) to group the data by more than one column?

Thanks in advance.

Answer 1

In case of anybody was having the same problem, the only thing I did to the code provided in https://datatables.net/examples/advanced_init/row_grouping.html, was to use the same code for every column I wanted to group.

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;
 }
 });
api.column(1 { 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;
 }
 });

Answer 2

Based on @Martha's answer, it works also for angular 5 in this way:

 var groupColumn = 1;
 this.dtOptions = {
 // pagingType: 'full_numbers',
 pageLength: 10,
 responsive: true,
 language: { search: "" },
 order:[1,'desc'],
 columnDefs: [
 { type: 'date-uk', targets: 1} // specifying date format
 ],
 drawCallback: function ( settings ) {
 var api = this.api();
 var rows = api.rows( {page:'current'} ).nodes();
 var last=null; 
 api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
 if ( last !== group ) {
 $(rows).eq( i ).before(
 '<tr style="background-color:#dedede" class="group"><th colspan="5">'+group+'</th></tr>'
 ); 
 last = group;
 }
 });
 }
 };