sap.ui.table.Table how to optimize column widths - sapui5

Question

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.

Answer 1

You can use autoResizeColumn(colIndex) method

Answer 2

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.

Answer 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);
}

Answer 4

This works for me:
my colums are:
flexible: true,
resizable: true,
autoResizable: true,
width : 'auto'
$($.find('.sapUiTableColRsz')).trigger("click");

Answer 5

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

Answer 6

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

Answer 7

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.