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

[MioYasutake]

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

[maheshpalavalli]

setTimeout is something you can use or you can try onafterrendering of table

oMyTable.addEventDelegate({
   onAfterRendering: function() {
      // Try resizing here.. if the data is loaded
   }
});

[MioYasutake]

Dear Mahesh,

Thank you for your suggestion. setTimeout worked.

onAfterRendering event was too early to adjust columns, as table contents were not available at this point.

Regards,

Mio

[maheshpalavalli]

mioyasutake i just saw the code, and it looks like onAfterRendering will not be triggered, but another event is triggered, it's a private event, so it's risky to use it

oTable.attachEvent("_rowsUpdated", function() {
///					
				}.bind(this));

so for now it looks like setTimeout is on way(which also I don't like it 😄 )BR,Mahesh

[MioYasutake]

Hi Mahesh,

Thanks for your comment.

There doesn't seem to be an official way to implement column optimization.

Regards,

Mio

[maheshpalavalli]

mioyasutake, I can't tell for 100 percent that there is no other way, (the only ways i found are the ones that i mentioned here).You could raise an issues in openui5 git, if you want to get expert resolution on this.-Mahesh

[RaminS]

SAP should really provide an event after data is loaded into the table, so resizing columns can be done. Without this Grid Tables are pretty much useless. Having to manually press a Resize button every time data is loaded is not good user experience.

I thought beforeRebindTable event would be that event, but it doesn't seem to work, like all other events it seems to be too early.

Has anyone had any luck with beforeRebindTable?

[Kishannaicker]

Since the smarttable directly reads data from odata it is usually not possibly to read the data bound to the table unless we access the inner table. In this case "events parameter comes to the rescue.

You can add change, datarequested, datareceived, attachdatastatechange events to the beforerebindtable/beforerebindtableextension (if its a list report) method

onBeforeRebindTableExtension: function (event) {
      
        event.getParameters()["bindingParams"].events = {
            "dataRequested":function(er)
            {
               
            },
            "dataReceived": function (ec) {

ec.getParameter("data")  //this will give the table resultset
}

[Former Member]

Try this https://blogs.sap.com/2020/05/22/fiori-element-list-report-adjust-column-size-automatically/

[MioYasutake]

Hi navneet_nair,

Thanks for your suggestion.

I tried the solution, but BusyStateChanged event was too early to adjust columns.

The columns were adjusted to match the width of the title rather rather than the width of the contents.

I used sap.ui.table.Table in a freestyle app (not list report), which may caused the difference.

Thanks,

Mio

[venkateswaran_k]

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]

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]

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

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