How to transpose/pivot table data in Polymer Client

I have entity view like this:

Item supplier price
Item_1 Supplier_X 5.00
Item_1 Supplier_Y 5.50
Item_1 Supplier_Z 6.00
Item_2 Supplier_X 3.50
Item_2 Supplier_Y 3.00
Item_2 Supplier_Z 4.00

I want to display it like below in Polymer client

Item Supplier_X Supplier_Y Supplier_Z
Item_1 5.00 5.50 6.00
Item_2 3.50 3.00 4.00

What is the best approach to achieve this?

I see my post above is not properly formatted and I don’t see a way to edit it so I’m attaching a screen_capture image here.

ScreenCapture1

Hi,

Currently there is no Web Component which can dynamically display data as described (aka pivot table) but it’s possible to use any JS library to achieve this. For instance you can try this one: GitHub - nicolaskruchten/pivottable: Open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop. . You need to add it to your bower dependencies, include js and css files and follow the guidelines.

If you don’t need dynamics on the front-end you can create middleware service which will prepare data and then use any table Web Component to display it.

Thank you for the quick response. I created a middleware service.

Hi Lenny
I am also in similar need. If you can share the approach of your middleware service that will be appreciated.

I created a middleware service using Studio and added the service name and method to rest-services.xml file as explained here!.

In the service method I load data from database using dataManager.loadValues(context).

Then I loop through the returned List adding values to HashMap<String,String> objects which I then added to an ArrayList object. At the end the method returns the ArrayList object.

Thanks fro sharing the methodology you followed. Will this transposed display editable back to the database?