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 · Accepted Answer · 2017-08-18 15:21:07Z

1

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);

answered Aug 18, 2017 at 15:21

Sarath Nelapati

262 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ashok Singh Over a year ago

Thanks, @Sarath Nelapati , It worked for me. I created one example on plunker for other readers. plnkr.co/edit/P2ppSgwcw86Nr7CbHNm4?p=preview

David Buck · Accepted Answer · 2020-09-07 11:49:25Z

0

You can clone the audit list

This is the deep copy of the list

this.auditList = _.cloneDeep(this.auditList);

This is the shallow copy of the list

this.auditList = [...this.auditList];

edited Sep 7, 2020 at 11:49

David Buck

3,87740 gold badges54 silver badges73 bronze badges

answered Sep 7, 2020 at 11:18

Maneesh Darisi

112 bronze badges

Collectives™ on Stack Overflow

How to do dynamically row grouping on PrimeNG Datatable?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related