4

I have been looking at several examples of row grouping in angular. However, I have yet to find any that have inner groups that are sortable.

For example look at this page:

http://swimlane.github.io/ngx-datatable/#row-grouping

I would like to be able to sort by name within the group.

ag-grid can do this, but the license is very expensive.

https://www.ag-grid.com/javascript-grid-grouping/

This seems like a good grouping example, however there is no sorting: https://ej2.syncfusion.com/angular/documentation/grid/grouping/

This is a basic one without any libraries: https://stackblitz.com/edit/angular-material-table-row-grouping

This is what I started with:

https://stackblitz.com/edit/angular-mattable-with-groupheader?file=app/table-basic-example.html

I added a basic mat-sort module to it, however the problem is that it sorts the group name as well, and group integrity is lost.

Any ideas?

Improve this question

1 Answer 1

Reset to default
5

Hope this helps you.

  • Row grouping
  • Row expand
  • Header Column sort

https://stackblitz.com/edit/angular-material-table-row-grouping-expand-sort

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

2 Comments

Yes that is exactly what I was looking for. Thank you.
Very helpful stackblitz. Minor bug to report. After expanding a row, if you expand another row the original expanded row loses its subRows but still remains group.expanded = true. One way to fix is to set all other groups to not expanded during groupHeaderClick() this._allGroup.forEach((item, index) => { item.expanded = false; });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.