cancel
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 - Make table column auto fit content

0 Kudos

Hello all,

I'm looking for a way in SAPUI5 to make a table of which the columns will automatically resize depending on the content in that column. This should work on any screen size.

So if the total width of the columns exceeds the width of the screen, there should be a scrollbar that allows the user to scroll horizontally through the table columns.

I've searched the internet for a solution, but didn't find anything that comes close to what I want.

Preferably, I would like to use sap.ui.table.Table, but if it can only be achieved with sap.m.Table, that's fine as well.

Environment runs on SAPUI5 version 1.60.13.

Any input, suggestions or remarks are more than welcome!

Thanks in advance!

Kr,

Glenn.

Accepted Solutions (1)

Accepted Solutions (1)

StéphaneD
Advisor
Advisor

Hi Glenn,

I suggest:

  • If you use sap.ui.table.Table, to call autoResizeColumn() after displaying the table / changing a value in a cell. For now this is an experimental method though, so it may not work as expected in some cases.
  • If you use sap.m.Table, to set property fixedLayout to false via method setFixedLayout() or in your View definition

Your table can then be embedded in a sap.m.ScrollContainer, with property horizontal set to true (default) via method setHorizontal() or in your View definition, for the case table doesn't fit screen size.

0 Kudos

Hello Stephane,

Thank you very much for the reply!

I already tried the first suggestion and in general this is an excellent solution.
However, there is one thing that doesn't totally match what I need and that's the fact that the resize method also takes into account the column header. Meaning, that if the text in my column header takes 100px, but my content only takes 50px, it will still be resized to 100px. For my specific use case it would be better if the column header is ignored and only the content is taken into account.

Concerning the second suggestion:
I haven't tried this one, but I will ASAP and compare both outcomes.

Once again, thank you very much for the input.

Kr,

Glenn

Answers (1)

Answers (1)

michele_marini
Explorer
0 Kudos

Try this with sap.ui.table.Table

<t:Table id="tblDataset" rows="{/}" selectionMode="None"
   visibleRowount="8" alternateRowColors="true" />