Full width table built on divs

[izabelapeza]

Hi everyone 👋

I have a question regarding implementing a full-width table with column resizing.

In my current setup, I'm building the table with div elements instead of table tags (this approach was easier for me to add the horizontal scroll below the header). For setting column widths, I'm using the example provided here: Column Resizing Example.

Additionally, I want the columns to automatically adjust their widths to fill the entire table, so I applied flex: 1 1 auto to the cells. This works great for auto-sizing the columns, but there's an issue when resizing:
When I resize a column, it changes the width of the columns on both sides, which is not the behavior I want.

Is there a way to force resizing to only affect the column being resized, without impacting the other columns?

Currently, my workaround is to:

1. Remove flex: 1 1 auto.
2. Use CSS variables for column widths, calculate the remaining width and distribute it manually.
3. Calculate width on initial data loading, window resize and columnSizing change.

It works correctly, but maybe is there a more straightforward solution to achieve this behavior?

Thanks in advance for your help!