[AnalyticalTable] Rerenders reset custom column width

[ej612]

Describe the bug

Hi there!

I have a UI bug that I don't know what to make of: Our AnalyticalTable forgets a custom column width when it's rerendered, but only on the second rerender.

Steps to reproduce:

• https://stackblitz.com/edit/github-mi6h4y3x-r1degagl?file=src%2FApp.tsx
• Increase the width of the first column
• Select two rows
  -> The column width has been reset

Video

20250402-1227-31.8767842.mp4

Note: If I remove my custom selectedRowIds logic, the bug doesn't occur.

Thanks in advance!

UI5 Web Components for React Version

2.8.1

UI5 Web Components Version

2.8.0

Browser

Chrome

[Lukas742]

Hi @ej612

since the columns array is added inline, it's recreated on every render and therefore the default column definitions are applied again. I'm not sure why this is only happening on the second rerender, but as we recommend memoizing the columns array, I don't see this as bug.

I've moved the array outside and then it's working as intended: https://stackblitz.com/edit/github-mi6h4y3x-jctqkpc2?file=src%2FApp.tsx

In case you need to manipulate the columns array and still want to persist the user defined values, you can leverage the useOnColumnResize plugin hook to update the width of the columns before updating the columns array. I would recommend only updating the array when necessary, as otherwise this could have an effect on performance.

I'm going to close this issue now, but in case something isn't clear or still doesn't work, feel free to add a comment here again :)

[ej612]

Hi @Lukas742, thank you!! Your insights made me find the problem on our end. :)

[ej612]

Hi @Lukas742, I'm going to need some more help with this, I haven't managed to get it to work in our code. I managed to break the sandbox again by adding a table hook:
https://stackblitz.com/edit/github-mi6h4y3x-rdzbpwak?file=src%2FApp.tsx

Do you have a recommendation for how to fix this?

[Lukas742]

In this case memoization will help again, but I only realized now that you could also set reactTableOptions={{ autoResetResize: false }} to prevent this behavior for both the columns and the plugin hook (although especially for the columns memoization should be preferred). For the plugin hook I will have to check if this is the intended behavior, or if we messed up memoization somewhere, so I'm reopening this issue. I'll let you know once I found the time to investigate this more.

Here you can find an example showing both approaches (memoization and setting autoResetResize to false): https://stackblitz.com/edit/github-mi6h4y3x-yyterqcf?file=src%2FApp.tsx

[ej612]

Hi @Lukas742,

Thanks for your response! You're definitely right, it's going to most likely be botched memoization on our side. I tried hard to find the root cause, but I couldn't. autoResetResize=false works like a charm though, thanks so much :) My problem is resolved.