DataTable: Misaligned columns when using frozen columns and multiSort

[CompartMJU]

Describe the bug

I have a table with the following conditions:

• The first two columns are frozen
• multiSort is applied to the first two columns
• The column header of the first column is wider than its content
• The table width is small enough so that a horizontal scroll bar appears

Sorting any column now will result in a misalignment and gaps in the table columns

Reproducer

https://stackblitz.com/edit/nrfld47g

System Information

mantle-ui: 10.10.6

Steps to reproduce the behavior

To reproduce

1. Open the Stackblitz project, it has two tables, the bottom one will show the issue
2. The preview is probably wide enough that there is no horizontal scroll bar below the tables initially, so resize the preview until a horizontal scroll bar appears below both tables
3. (Not sure if related, but while resizing the frozen columns in both tables behave weirdly, leave gaps and partially cover the following columns content. This only happens if there was no scroll bar on initial rendering)
4. Refresh the preview
5. Sort any of the columns

Result: After sorting a column in the bottom table, there is now a noticeable gap between column 1 and 2, about the width of the 2 disappeared sorting counters. Column 2's header is misaligned with it's content, about the same as the gap. Column 3's header is misaligned with it's content, about the same as the width of one of the two sorting counters that disappeared.

Expected behavior

No misalignment/gaps in the columns after sorting

[sja-cslab]

@melloware missing listener for resize it seems?

Col 1 isn't correctly resized or col 2 isn't correct positioned. We got gap between col 1-2 and overlap col 2-3.

Edit:
The left property seems to be wrong calculated. in my example it's 197px but should be 140px in the upper table.

[melloware]

Yes it could be that simple but with Datatable I find sometimes it never that simple 😃