cancel
Showing results for 
Search instead for 
Did you mean: 

sap.ui.table.Table: How to optimize column width?

MioYasutake
Active Contributor
0 Kudos

Hello.

I want to adjust the width of the column to match the width of the content, using sap.ui.table.Table.

The controller code is as follows.

		onInit: function () {
			var oTable = this.byId("table");
			oTable.bindRows({
				path: '/BusinessPartnerSet',
				events: {
					dataReceived: this._adjustColumn.bind(this)
				}
			});
		},
		
		_adjustColumn: function () {
			var oTable = this.byId("table");
			oTable.getColumns().forEach((oColumn, index) => {
				oTable.autoResizeColumn(index);
			});
		}

The issue is, at the point of dataRecieved event, contents in the table are not yet available.

As a result, the columns are adjusted to match the width of the title, wihch is sometimes too small to fit all the content in.

Does anybody know which event we can use to adjust columns?

Best regards,

Mio

View Entire Topic
venkateswaran_k
Active Contributor
0 Kudos

Hi

Try this code as well - in the event after rendering.

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

Regards,

Venkat

MioYasutake
Active Contributor
0 Kudos

Dear Venkat,

Thank you for your suggestion.

Unfortunatelly, oTe.doAutoResizeColumn(i) didn't resize columns.

I executed this code both after oTable's onAfterRendering (as suggested by Mahesh) as well as view's onAfterRendering event.

Regards,

Mio

alabi
Discoverer
0 Kudos

hello everyone, any news regarding this topic. I have the same requirement and I tried the code below but it is not working.

alabi_0-1708617143103.png
when I debug I see that it is not going after line 78 because there is no getColumns function inside oTable.
Any suggestion please?