You can group by one piece of data and show another in the header, in a ui5 table??

[edbravo]

Hello Experts,

I am trying to display information in a table, it must be grouped by Date (which would be the "MonthYear" field) and in the header of that table, the Subtotal would be displayed, from the Value column (The data is "SubTotal")

but I can't get it like this, since it appears like this

I am trying to sort the table by the MonthYear Field, but instead of showing the MonthYear, I need to show the value of another field, in this case SubTotal, since it is requested to add all the values by month, of the Value field and show it in the board.

Something like that

(the image is only illustrative)

I was also told that it could be with another type of table, but I did not find any table or example of it, to be able to do it.

Any idea how it could be done?

This is the code of my table in xml

<m:Table items="{ path: '/d/results', sorter: { path: 'MesAno', group: '.getCounty'}, groupHeaderFactory: '.getGroupHeader' }" id="tabla_Actividades" growing="true" growingScrollToLoad="true">

and here how I get the filter in the controller

 getCounty: function(oContext) {

return oContext.getProperty('SubTotal'); }, getGroupHeader: function(oGroup) { return new GroupHeaderListItem({ title : oGroup.key } ); }, I'm honestly pretty lost with this.input with the sap.ui.table is it possible to do that?Or do you have an example of another table that I can use?
I would appreciate any help or message you can give me.
Greetings.
EBZ

[Sathees_P]

Hello EBZ,

XML view contains a table control with list binding, group property add controller method to give sort key + text to shown in group header

<Table noDataText="No data" id="table0" items="{path:'/Products',
                    parameters:{expand:'Category',
                                select:'ProductName,UnitsInStock,QuantityPerUnit,Category/CategoryName,Category/Description'},
                                sorter:[{path:'Category/CategoryName',descending:false, group:'.getGroupField'},
{path:'UnitsInStock',descending:true}],                                 groupHeaderFactory: '.getGroupHeader'}">

Controller code for same

getGroupField: function (oContext) {
    return {
        key: oContext.getProperty("Category/CategoryName"),
        hdrText: oContext.getProperty("Category/CategoryName") + ' - ' + oContext.getProperty("Category/Description")
    };
},

getGroupHeader: function (oGroup) {
    return new GroupHeaderListItem({
        title: oGroup.hdrText
    });
}

 output

Your use-case to show total at end, with above solution(Source found in GitHub link ) + factory function you can achieve your expectation.

[leonikussmaul]

Hi Edson,

I would suggest perhaps looking at the Tree Table for your example, which renders the expandable nodes based on your data structure. In your case, the properties date and subtotal could be hierarchy #1, followed by the items inside with hierarchy #2 that displays all other values on this level.

Please see the below example;

Tree Table Documentation

You can read more about the Tree Table to see if it fits your use case also from a UX perspective here;

Tree Table Fiori

You will however need to adjust your OData Service for these changes or manipulate it via JSONModel which is then bound to your table in the view.

[edbravo]

Hi Leoni.

Thanks for your answer

we were able to solve it, using a couple of extra functions to obtain the summation and so on, but other than that, that's it.

Your idea was also valid, I will implement it later, since we will have a similar requirement soon, so I will be reviewing it.

Thank you for your cooperation and sorry for my late response.

Have a nice day.

Greetings.