[grid] Grouping and aggregate/summary row support

[jouni]

Thanks for the suggestion. This was already in our backlog of features we want to add at some point. No concrete timeline yet, though.

[jouni]

Unfortunately no timeline for this yet, still :(

In the meantime, it would be nice if anyone can provide us with real world use cases for grouping and summary rows.

[khoanguyen123]

I have a real use case for consideration:

I have a table where each row represents roaming usage in a given country. For example:

Country | Date | Usage MB USA 09/01/17 10 UK 09/05/17 20 USA 09/07/17 30

I'd like to allow a user to "group by" Country, so the table would display one entry per country with the total usage in that country:

Country | Date | Usage MB + USA --- 40 + UK --- 20

Clicking on the '+' sign will expand all the entries under the country.

Of course, we like a generic solution so it can be flexible. For example, instead of total usage, we can display the average instead

I forget to mention that we are using vaadin-grid web component at webcomponents.org

[markposterone]

More examples: Group project tasks by person assigned, team, project, company... show hours spent for each task and sum that for team, project, total for each company... Group restaurants by type of cuisine and show average rating, average price of vine, beer, whatever, number of employees, ... Group sports shoes, other products by manufacturer, brand... show average price, total number of orders by manufacturer, brand, total... Group security permissions by module, form... Group system parameters by type, ... There are countess examples of real world usages in typical ERP application. If you have this feature than it should be normal to have possibility (for end user) to dynamically group by any field (column), If you type "web grid row grouping" in Google, you can see that this is very common feature that almost every web framework/lib supports.

[jouni]

Thanks, @markposterone!

Yes, we are aware this is a common use case for data grids and has it has been on the list of wanted features from the beginning. We just haven’t gotten the time to implement it yet 😅

Most new development has gone to all the other elements we have (full list at vaadin.com/elements), and we wanted to make the tree/hierarchy support first (which was released in v4.1), which directly contributes to supporting grouping as well. Basically, we now just need to allow a single row to span the full grid viewport width (similar to row details).

The more real use case descriptions from our actual users we get, the better the chances that we will provide a good solution to your needs – that’s why I’m asking for those 😊

@markposterone, you mentioned you have been using GXT before – could you provide an example how you define row grouping there? I could probably dig that up from Sencha docs as well, but I’m lazy, and would also like to know if you can point out any pros/cons about their APIs.

[jouni]

Would you expect to be able to have nested groups? Something like:

[markposterone]

Yes @jouni exactly like that, that would be perfect !

In Sencha GXT it's very easy to do this, take a look source of this simple example: http://examples.sencha.com/gxt/4.0.2/#ExamplePlace:groupinggrid

Basically you have GroupingView and just say that you want to group by some column. Other features like nested grouping, summary rows (aggregations) are easy to use as well.

The end user can dynamically change grouping column by clicking small menu on the column and by choosing option "Group by this Field".

From the design point of view I like how it is done here in their ExtJs product (looks like some kind of Material Design): https://examples.sencha.com/ExtReact/6.5.1/kitchensink/#/grids/core_features/grouped_grid

I really hope you will find the time to implement this in the near future.

[jonasrotilli]

This feature would be very useful! Waiting for news.

[tomivirkki]

Drafted an example that uses the row details feature (a cell that covers the entire width of the grid) together with hierarchical data provider for the data grouping effect.

https://glitch.com/edit/#!/volcano-newt (Using an aria attribute in a CSS selector is probably an anti-pattern but once https://github.com/vaadin/vaadin-grid/issues/1297 is shipped, this part could also be improved.)

Would it be enough to have an example similar to this in our demos or is there some use-case that could not be covered without grouping being an additional built-in feature?

[jouni]

@tomivirkki, wow, nicely done :+1:

That’s probably an acceptable workaround for grouping for some users already. Though there is some problem with keyboard navigation (can’t navigate up and down as expected), and scrolling does not work in Safari for some reason (works in Chrome).

[MarkusPorti]

Is there something new to this topic? I would like to group some entries by the Year of a Date. I just need a header row with the year inside the grid above all the entries with the same year.

[TorstenBMR]

any news on this topic? Did anyone solve this with a 3rd-party component?

We're searching something like this, mainly for in-Memory-Grids if that makes things easier.

[web-padawan]

There are no plans regarding this feature so far.

[hes754]

I think this would be still a cool and often needed feature. Are there still no planes to introduce this? Many of the component frameworks supports this feature. Would be nice to see this in Vaadin soon also.