Question Re: sap.ui.table.Table: How to optimize column width? in Technology Q&A

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

MioYasutake — Wed, 17 Jun 2020 00:45:14 GMT

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

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

maheshpalavalli — Wed, 17 Jun 2020 05:33:48 GMT

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

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

venkateswaran_k — Wed, 17 Jun 2020 05:38:40 GMT

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

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

MioYasutake — Thu, 18 Jun 2020 04:16:57 GMT

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

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

MioYasutake — Thu, 18 Jun 2020 04:19:34 GMT

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

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

maheshpalavalli — Thu, 18 Jun 2020 06:54:32 GMT

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

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

MioYasutake — Tue, 23 Jun 2020 23:46:23 GMT

Hi Mahesh,

Thanks for your comment.

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

Regards,

Mio

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

maheshpalavalli — Wed, 24 Jun 2020 07:27:47 GMT

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

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

Former Member — Tue, 22 Sep 2020 19:53:38 GMT

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

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

MioYasutake — Wed, 23 Sep 2020 08:17:42 GMT

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

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

RaminS — Thu, 25 Mar 2021 14:32:18 GMT

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?

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

Kishannaicker — Wed, 27 Apr 2022 10:45:58 GMT

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
}

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

alabi — Thu, 22 Feb 2024 15:54:07 GMT

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?