Primeng: Sorting on PrimeNG DataTable - Row Grouping is not working properly as UI-Grid works.PrimeNg table doesn't support external/internal sorting on grouping rows.

Created on 18 Aug 2017  路  7Comments  路  Source: primefaces/primeng

Sorting on PrimeNG DataTable - Row Grouping is not working properly as UI-Grid works like external/internal sorting on grouping rows.

On sorting , inappropriate things are happening on PrimeNG DataTable such as
=> Sometimes duplicate rows are generated.
=> group's rows are getting separated from group.
=> It doesn't support internal sorting on grouping rows.

I couldn't understand that how sorting works on primeNG table. I think primeNg table 's row grouping
sorting should works like UI-grid 's row grouping sorting .

References for In UI-grid,functionality of row grouping sorting :
http://ui-grid.info/docs/#/tutorial/209_grouping

In UI-grid,functionality of row grouping sorting are following below :
=> When we apply sorting on Group column ( first column) ,all group rows are sorted externally
(Note : Only external sorting happens)
=>When we apply sorting on other group column(other than first column),only internal sorting happens
on grouping rows .
(Note : Only interanl sorting happens on grouping rows).

Please provide any solution for internal sorting of row grouping.

discussion

Most helpful comment

@cagataycivici Please see the code for how the table was created. It should be very clear what the issue is from the screenshot. I am new to github and this is my first comment ever so i apologize in advance if i have broken any rules :)

<p-dataTable [value]="positions" rowGroupMode="subheader" groupField="currency" expandableRowGroups="true" [sortableRowGroup]="false" [rows]="10" [paginator]="true" [responsive]="true"> <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['currency']}}</ng-template> <p-column *ngFor="let col of cols" [style]="col.style" [field]="col.field" [header]="col.header" [sortable]="col.sortable" > <ng-template let-tmpl let-position="rowData" pTemplate="body"> <span>{{position[col.field]}}</span> </ng-template> </p-column> </p-dataTable>

image

All 7 comments

Facing same issue. Internal sorting done programmatically within the grouping also is disregarded when rendered on screen.
I would have expected the follwing sort function to do the trick, but Data table still looks up keys to render the internal rows within a group?

 _sortByName() {
     this.dataList.sort(function (a, b) {
        let aGroup = a['groupField'].toLowerCase();
        let bGroup = b['groupField'].toLowerCase();
        if (aGroup > bGroup) return 1;
        if (aGroup < bGroup) return -1;
        let aSort = a['name'].toLowerCase();
        let bSort = b['name'].toLowerCase();
        if (aSort > bSort) return 1;
        if (aSort < bSort) return -1;
        return 0
    });
  }_

same issue for me.
sorting feature should sort groups when sorting on the grouping column, and should sort the rows in the groups wen sorting on any other column. I think that sorting is applied without caring of the grouping column, that's probably the reason why groups' content is dispatched.

I'll let this down for now, hoping that some solution will come soon... Thanks for your great job, PrimeNg is really great !

This is actually a major gap in grouped tables. Any data table out there supports this behaviour. Sorting on the field should break up the groups either.
Sort on group, then within groups.

I am happy to contribute if a starting point is laid out here by the PrimeNg team. But i think this issue needs to get more priority than it is getting right now.

Unable to replicate, please provide a test case based on plunkr below and we'll review again.

http://plnkr.co/edit/6q5v84DWolH6DeAdi70w?p=preview

@cagataycivici Please see the code for how the table was created. It should be very clear what the issue is from the screenshot. I am new to github and this is my first comment ever so i apologize in advance if i have broken any rules :)

<p-dataTable [value]="positions" rowGroupMode="subheader" groupField="currency" expandableRowGroups="true" [sortableRowGroup]="false" [rows]="10" [paginator]="true" [responsive]="true"> <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['currency']}}</ng-template> <p-column *ngFor="let col of cols" [style]="col.style" [field]="col.field" [header]="col.header" [sortable]="col.sortable" > <ng-template let-tmpl let-position="rowData" pTemplate="body"> <span>{{position[col.field]}}</span> </ng-template> </p-column> </p-dataTable>

image

Having Same issue as @jilanim . Any help would be appreciated

p-dataTable is deprecated and will be removed in favor of the new p-table (aka TurboTable) of 5.1.0 so closing the issue. Please try the new p-table once 5.1.0 is released.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

watalberto picture watalberto  路  3Comments

gatapia picture gatapia  路  3Comments

Faigjaz picture Faigjaz  路  3Comments

lilling picture lilling  路  3Comments

garethlewis picture garethlewis  路  3Comments