Grouping feature in Data Table/Grid

[ameya]

####proposal: Grouping feature in the table

What is the expected behaviour?

We should be able to group contents of a column by row.
Following example shows grid group by the company.
http://plnkr.co/edit/myDUiu7cdrGopQgn7t2p?p=preview

What is the current behaviour?

Not present.

What is the use-case or motivation for changing an existing behaviour?

The user wants a drill down feature on the table, where they see aggregated/group value and they can choose to drill down or not.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

5.2.4

[andrewseguin]

It sounds like you may benefit more from the <mat-tree> instead of the table. It'll be out soon but you can try it out using the latest cdk/material: https://github.com/angular/material2/blob/master/src/lib/tree/tree.md

[ameya]

So does this tree goes with table? Because what I am looking for is not tree but a grid with groping feature. There may be many like me looking for this feature in data table. Even extjs has table grouping

[andrewseguin]

Maybe I don't understand your request. You seem to be describing the functionality of a tree, which provides grouping and drilldown. Can you describe why the tree isn't a good fit?

[ameya]

Can you look at this link http://plnkr.co/edit/myDUiu7cdrGopQgn7t2p?p=preview this is a grouped paginated grid/table?

[andrewseguin]

I did take a look but it looks very much like what we have going in the tree. I'm curious what features you find are missing that are not address by the tree.

[ameya]

A tree is a one dimensional or just has parent and child arrangement. But tree is 2 dimensional has multiple column and rows. For example in the above example. In the 2 dimessional display I would like to group the data by city. Say for example a table displaying employee details. So he has his sal, gender, org unit, designation. Here i would like to see all employee grouped by org unit in the grid. I may show addional details in summary below the group like counts of each designation in that organization unit. This is a very common demand in an enterprise application.

[ameya]

So if the requirements I am asking has tree structure can I use tree in grid to get the desired results I am asking in the link?

[chriscurnow]

I have to agree with @ameya. A data table has columns. A tree does not. So to use @ameya's example we might have the columns:

• Name
• Gender
• Salary
• Org Unit

When the table is totally collapsed we would have just a list of Org Units – exactly as per a tree except that it will still have column headings across the top.
However, when we expand one of the Org Units, we will have a list of employees with the columns as above.

I could see we could potentially achieve something like this if we had a table inside each tree node, but as I envisage it just now, that seems like a lot of work. Perhaps not. I will try it out.

I can see you don't want to add unnecessary features to the table component. You want it to be unopinionated. However, we still need a way to collapse rows.

[chriscurnow]

Perhaps this points the way. https://stackoverflow.com/questions/46123854/expandable-table-rows-in-angular-4-with-angular-material

[StephenWTurner]

I wanted this feature too so I worked on some code here: stackblitz. This has an array of columns to group by and recursively inserts group rows into the data that are displayed differently using the matRowDef's where clause.

The tree view doesn't seem well suited for a tabular display, it seems it would be difficult to display the column headers once and still have columns efficiently fit the width of the data.

I envisage that the grouping could be inserted in the material2/src/lib/table/table-data-source.ts so the groups are added after the data is paginated but before it is rendered in _updateChangeSubscription(). Placed here the page would still show the same number of rows regardless of how many group rows were added and the total row count would not change. The grouping would be independent of filtering, pagination and sorting, although having the sort match the grouping may be a preferable experience.

@andrewseguin It's beyond my current skills to integrate this with the library and create a pull request. Hopefully, this issue can be re-opened and someone can help.

[DmitryEfimenko]

This issue should not have been closed. Trees don't solve the requirements of data being grouped in the table.
Please reopen

[chriscurnow]

I wanted this feature too so I worked on some code here: stackblitz. This has an array of columns to group by and recursively inserts group rows into the data that are displayed differently using the matRowDef's where clause.

This is pretty much what we want.

[ameya]

We survived with prime ng table. But it is quite heavy

…

On Fri, 15 Mar 2019, 7:13 am Chris Curnow ***@***.*** wrote: I wanted this feature too so I worked on some code here: stackblitz <https://stackblitz.com/edit/angular-mattable-with-collapsible-groupheader>. This has an array of columns to group by and recursively inserts group rows into the data that are displayed differently using the matRowDef's where clause. The tree view doesn't seem well suited for a tabular display, it seems it would be difficult to display the column headers once and still have columns efficiently fit the width of the data. I envisage that the grouping could be inserted in the material2/src/lib/table/table-data-source.ts so the groups are added after the data is paginated but before it is rendered in _updateChangeSubscription(). Placed here the page would still show the same number of rows regardless of how many group rows were added and the total row count would not change. The grouping would be independent of filtering, pagination and sorting, although having the sort match the grouping may be a preferable experience. @andrewseguin <https://github.com/andrewseguin> It's beyond my current skills to integrate this with the library and create a pull request. Hopefully, this issue can be re-opened and someone can help. This is pretty much what we want. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10660 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAF5LVz7PyjexcZWtsroHTy1rT9s44LWks5vWvrTgaJpZM4TDRVN> .

[lujian98]

Thank you @StephenWTurner
Follow your code and made a few changes to allow change header row grouping.
Demo is here: https://stackblitz.com/edit/angular-material-table-row-grouping