CODEWITHSUNDEEP
javascriptxmlsapui5ui5-tooling
Sebastian Kronschläger
Sebastian Kronschläger

Reputation: 93

How to group Table in UI5

I need something like this in SAPUI5: enter image description here (https://experience.sap.com/fiori-design-web/grid-table/)

I tried this, however it doesn't work, because I get the data from OData and this sap.ui.table.Table doesn't support this (only JSON).

So i tried to convert the OData response to JSON. Unfortanetly this approach didn't work either.

This is my code:

enter image description here

enter image description here

I get the data and my table display it, but it doesn't group same values. The column "Product id" should be group with the same entries.

enter image description here

I know there is also a "sap.m.Table", but i need an option to collapse it, which only works with the sap.ui.table.

Thank you in advance!

Kind regards Sebastian

Upvotes: 1

Views: 4175

Answers (2)

Alex
Alex

Reputation: 101

You can use https://ui5.sap.com/#/api/sap.ui.table.AnalyticalTable.

The standard functionality of this table is grouping by dimension fields and aggregating by calculated ones, but it needs to be improved on the backend.

Upvotes: 1

Andreas Imsand
Andreas Imsand

Reputation: 119

You can use the "Item Binding" to sort and Group your Data in the Table. Here is a Link to an example:

https://sapui5.hana.ondemand.com/sdk/#/topic/ec79a5d5918f4f7f9cbc2150e66778cc.html

In Your case, i woud just bind the Data in the XML view:

<Table id="idTable" items="{ path: '<your_path>', sorter: { path: '<Property_to_Sort>', descending: <true/false>, group: '.getGroup' }, groupHeaderFactory: '.getGroupHeader'}">

And then in the Controller

getGroup: function (oContext) {
        return oContext.getProperty('<Property_to_Sort>');
    },
    
    getGroupHeader: function (oGroup) {
        debugger;
        return new sap.m.GroupHeaderListItem({
            title : oGroup.key
        });
    },

I Hope this helps

Upvotes: 2

Related Questions