How to do dynamically row grouping on PrimeNG Datatable?

Question

I am using primeNG datatable in angular 4 application. I want to perform row grouping based on selected field. For example if user click on dealer region then data should group by dealer region, if user click on dealer state then data should group according to dealer state.

Reference : https://www.primefaces.org/primeng/#/datatable/rowgroup

My view (HTML) file

<div id ="default"><span (click)="default()">Default</span></div>
<div id ="region"><span (click)="groupByDealerRegion()">Dealer Region</span></div>
<div id ="state"><span (click)="groupByDealerState()">Dealer State</span></div> 


<p-dataTable #dt1 [value]="(auditList | orderBy: {property: 'dealerCode', direction: 1})"  rowGroupMode="subheader" sortField = '{{groupField}}' groupField='{{groupField}}' 
        expandableRowGroups="true"  id="datatable" name="datatable" exportFilename="Audits-list" [sortableRowGroup]="false"  >
        <p-header>
        <div class="ui-helper-clearfix">
            <button type="button" pButton icon="fa-file-o" iconPos="left" label="CSV" (click)="dt.exportCSV()" style="float:left"></button>
        </div>
    </p-header>
     <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData[groupField]}}</ng-template>   

    <p-column field="dealerCode" header="Dealer Code"  ></p-column>
    <p-column field="dealerName" header="Dealer Name"></p-column>
    <p-column field="auditType" header="Audit Type"></p-column>
    <p-column field="auditOnSite" header="Audit On-SIte"></p-column>

</p-dataTable>

Component class

export class AuditListViewComponent implements OnInit {


  groupField: string = 'auditType';

  @ViewChild(DataTable) dt: DataTable;  

  constructor(private sessionService : SessionService,private auditService : AuditService ){

  }

    auditList: AuditDetail[] = [];

    ngOnInit(): void {
       this.getAuditList();

    }

   getAuditList(){
     this.auditService.getAuditList().then( auditList => {
        this.auditList = auditList;        

     });
   } 



   groupByDealerRegion(){                 

     this.sortedField = "dealerRegion"; 
     this.groupField = "dealerRegion" ;

   }

   groupByDealerState(){

     this.sortedField = "dealerState"; 
     this.groupField = "dealerState" ;
   }

   default(){
     console.log("default() --->>>");

    console.log(this.dt);
    this.groupField = 'auditType'; 

   }


}

I want to bind component's groupField variable with groupField attribute of data table. I successfully implement static row grouping. But requirement is to group data when user click on grouping option.

I also tried to use datatable reference in component and change datatable attribute from component neither is working.

this.dt.groupField = 'dealerState';

Looking for solution. Thanks in advance.

Sarath Nelapati Sarath Nelapati · Accepted Answer · 2017-08-18T15:21:07

This may not be the best solution out there, but it works. To make the dynamic row grouping work, we have to refresh the entire datatable, after changing the groupField.

To refresh the table, use a boolean variable to control the visibility of the datatable and use setTimeout.

<p-dataTable *ngIf="display"></p-dataTable>

In .ts file, whenever you change the row grouping field,

this.display = false;    
setTimeout(() => this.display = true, 0);

How to do dynamically row grouping on PrimeNG Datatable?

2 Answers