I have a datasource that has data which is grouped. For e.g. parent: - name- string - segments- arrayList of segment objects(each segment object has title and description
I'm trying to use a mat-table to display data in rows and columns as follows :
I want to use mat-sort and sort within the segment groups when I click on segment header (ie after sorting segments, sorted data should look like this):
When I click on Name (header) the table should be sorted as follows:
How can I do the same? Is there a good way to group my rows in the above format. (Right now I'm using divs within mat cell to display the content which doesn't seem right). I have tried using an approach for displaying similar to this link However when I add mat-sort to this group headers get sorted on top and the rows come below.
This link has example to display data the required way