5

I can't find this anywhere. In a sap.ui.table.Table control is it possible to tell it to resize all column widths so that their contents are fully visible? I don't see any property/method either on the table or column instances.

Is it not supported?

Many thanks.

2
  • 1
    Sorry, but I´m afraid there´s is no built in function so far. You have to check for the best suitable width and define it initially. May 14, 2014 at 10:25
  • Thanks. Problem is that this table is being built dynamically. Can't tell easily what the suitable width is :)
    – Tiago A.
    May 14, 2014 at 11:06

7 Answers 7

4

You can use autoResizeColumn(colIndex) method

5
  • Thanks. It looks that method is the right answer. Also think It wasn't available when I asked the question.
    – Tiago A.
    Sep 8, 2016 at 6:53
  • is there any example of autoResizeColumn(colIndex) method I can find?
    – user557657
    Nov 28, 2017 at 20:16
  • This method is marked as "experimental". Should one expect that this will get depreciated soon?
    – Pille
    Mar 21, 2018 at 9:11
  • @Pille: About "experimental" APIs, check out the warning message in ui5.sap.com/#/api/experimental Mar 24, 2018 at 17:42
  • @user557657 I added an example of autoResizeColumn in my answer May 6, 2018 at 22:00
3

Option 1: setting fixed sizes of columns

var oTable = new sap.ui.table.Table({
    width : "100%",
    selectionMode : sap.ui.table.SelectionMode.None,
    enableColumnFreeze : true,
});

oTable.addColumn(new sap.ui.table.Column({
    template : new sap.ui.commons.TextView({
        text : "{Title}",
        wrapping : true,
        textAlign : sap.ui.core.TextAlign.Begin,
    }),
    enableColumnFreeze : true,
    width : '350px', // also possible in % -> e.g. in ur case '100%'

}));

Option 2: resizable, but showing full column width, I would try to use these properties

  • width : sap.ui.core.CSSSize
  • flexible : boolean (default: true)
  • resizable : boolean (default: true)

like this

oTable.addColumn(new sap.ui.table.Column({
    template : new sap.ui.commons.TextView({
        text : "{Title}",
        wrapping : true,
        textAlign : sap.ui.core.TextAlign.Begin,
    }),
    width : '100%',
    resizable : false,
    flexible : false,
}));

I think its a challenge, I also made it via fixed sizes .. eventually you can define fixed sizes depending on the screen size .. hope to help you.

3

I tried several ways but none was really working on 1.52.23 so I analyzed the way auto-resize is working on the double-click on the column separator. And found the hidden treasure: sap.ui.table.TablePointerExtension

This code does the trick for me:

var oTpc = new sap.ui.table.TablePointerExtension(oTable);
var aColumns = oTable.getColumns();
for (var i = 0; i < aColumns.length; i++) {
  oTpc.doAutoResizeColumn(i);
}
3

This works for me:

my colums are:

flexible: true,
resizable: true,
autoResizable: true,
width : 'auto'

$($.find('.sapUiTableColRsz')).trigger("click");

0

For me, I need to do the call to "autoResizeColumn" after the data is received. You can attach to the binding dataReceived event

-1

While facing the same issue, I found the solution in the sap.m.Table control. Using the "fixed layout" option (set value to false, see documentation attached), you can force the columns/cells to resize according to its content (same effect like in ALV grid controls). The feature is described very well in the API reference: sap.m.Table / setFixedLayout

-1
var oTable = new sap.m.Table({
    fixedLayout: false
});

Defines the algorithm to be used to layout the table cells, rows, and columns. By default, a table is rendered with fixed layout algorithm. This means the horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells. Cells in subsequent rows do not affect column widths. This allows a browser to layout the table faster than the auto table layout since the browser can begin to display the table once the first row has been analyzed.

When this property is set to false, sap.m.Table is rendered with auto layout algorithm. This means, the width of the table and its cells depends on the contents of the cells. The column width is set by the widest unbreakable content inside the cells. This can make the rendering slow, since the browser needs to read through all the content in the table before determining the final layout. Note: Since sap.m.Table does not have its own scrollbars, setting fixedLayout to false can force the table to overflow, which may cause visual problems. It is suggested to use this property when a table has a few columns in wide screens or within the horizontal scroll container (e.g sap.m.Dialog) to handle overflow. In auto layout mode the width property of sap.m.Column is taken into account as a minimum width.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.