Search code examples
sapui5

SapUI5 Grid Table Column Auto Width Issue

I'm using sap.ui.table component and I would like to set the column width value "auto" depending on cell content value's width. But I couldn't make it. How can I set auto width columns ?

Here is a part of my code and screenshot;

for (var i = 0; i < json.length; i++) {
            oTable.addColumn(new sap.ui.table.Column({
                label: new sap.m.Label({
                    text: json[i].Value,
                }),
                template: new sap.m.Text({
                    text: '{' + json[i].Key + '}',
                    wrapping : false,
                    textAlign : sap.ui.core.TextAlign.Begin,
                }),
                sortProperty: json[i].Key,
                filterProperty: json[i].Key,
                width : 'auto',
                resizable : false,
                flexible : false,
                //enableGrouping : json[i].enableGrouping,
                //visible : json[i].visible,
            }));
            oTable.autoResizeColumn(i);})

Here is the result image;

https://ibb.co/h4BMSR

Solution

  • At this moment it's not possible for sap.ui.table.Table.

    Default layout for table is "fixed" and can not be changed via any API settings for this control. When new records are loaded, the content of the cells might have different length, thus it would lead columns to jump when scrolling.

    sap.ui.table.Column has property resizable which allows user to resize the column. In addition to this, there is property autoResizable which can adjust column width based on the currently visible data by double clicking on columns separator (see docs - https://ui5.sap.com/#/api/sap.ui.table.Column).