In SAPUI5, how can I set a table column width according to another table?

Question

I have two tables which I'd like to synchronize in their column widths. I'm working in SAPUI5, and therefore I have an event that gets fired every time I resize the column of my table.

I'm currently using jQuery to get to my solution but it's not yet working the way I want it. I realize that there have been different questions to the same topic, I've gone through all of them but couldn't find the fitting solution.

Here's my code:

oTable.attachColumnResize(function(oEvent) {
    $('.syncScroll tr:eq(1) td').each(function (i) {
         var width = $('.syncScroll td:eq(' + i + ')').width()
         $('.bottom td:eq(' + i + ')').attr('width', width);
        console.log($('.bottom td:eq(' + i + ')').width());
    })                                              
})

synScroll is the class name of my upper table and bottom the name for my lower table. (I can't use IDs since they're predefined from SAPUI5 but the classnames are unique)

The event is fired every time I resize a column, so that part is working fine. But the column width doesn't adjust (checked this by console.log...)

I've tried different solutions on how to set the width of the lower table. Attempts so far:

• $('.bottom td:eq(' + i + ')').width(width);
• $('.bottom td:eq(' + i + ')').css('width', width, 'px');
• $('.bottom td:eq(' + i + ')').width() = width; --> causes invalid left-handed argument error

Answer 1

With the help of @DubZ, I came to different approaches.

• jQuery doesn't provide the new width of a column, but only the width before the columnResize()-Event. Therefore, accessing that width won't help during the attachColumnResize()-Event
• SAPUI5 provides a getWidth()-Method for table columns, but this property is empty when the initial value is set to "auto". So this wouldn't help either

My solution: The attachColumnResize()-Event provides two parameters. First, the column that got resized and second, the new width of that column. So I figure out the index of the resized column in the one table and apply the new width to the column with the same index in the second table. Since columnWidth is set to auto, the other columns will adjust accordingly. This is my code:

 oTable.attachColumnResize(function(oEvent) {
        //get position of resized column and adjust column with same position in lower table
        let aColumns = oTable.getColumns();
        let eventId = _.trimStart(oEvent.getParameters().column.sId, '__column');
        let lastIndex = _.trimStart(_.nth(aColumns, -1).sId, '__column')
        let nmbrOfColumns = oTable.getColumns().length;
        let positionId = nmbrOfColumns - (lastIndex - eventId) - 1;    
        let oSecondTable = this.getView().byId("generatedTableView").getContent()[0].getContent()[1];                   
        let aSecondColumns = oSecondTable.getColumns();                 
        aSecondColumns[positionId].setWidth(oEvent.getParameters().width);                  
}.bind(this))

I feel like this is a bit long-winded, so feel free to let me know any sleeker way!