UI5 – displaying many columns in sap.m.table

Home / Blog / UI5 – displaying many columns in sap.m.table

Here was the next challenge I ran into with UI5.  I decided to make the sap.m.table work for my model.  The problem was that my table was “wide”.  So it contained a lot of columns, and all the columns cannot fit into a single screen.  So that meant one of two things, either, all my columns were very narrow, or it went off the screen with no way of seeing the other columns.  I finally spent some time googling to find a solution.  The post that finally got me on the right track was here.

Happily, the solution was pretty easy.  It involved adding an element to put the table into:

var oScrollContainer = new sap.m.ScrollContainer({
height: “90%”,
vertical: true,
focusable: true,
content: [oNotTab]
});
oTableHdr.placeAt(selPage);
oScrollContainer.placeAt(selPage);

A couple of words of advise.  If you attempt to use multiple select, using the header table will cause issues, since it presents a check all box, that checks nothing.  Also, make the header blank for the table contents causes some strange column widths that did not match the width of the column in the header.  So, this means you would need to manually set the width for both column in both places to ensure it is identical.  I have currently opted to avoid this, and only have the toolbar outside of the scrollcontainer.  If you have a different experience, I’d love to hear about it.

thanks for reading,

As always, thanks for reading and don't forget to check out our SAP Service Management Products at my other company JaveLLin Solutions,
Mike

Leave a Reply

Your email address will not be published. Required fields are marked *