[OPIK-2227]: Make table columns independently resizable

[infinitespark-96]

Details

• Ensured the table width reflects the sum of column widths so resizing one column no longer stretches others
• Increased the resize handle size on the last column to simplify resizing
• Fine-tuned some columns' width

Issues

Changing the width of one column changes the width of all other columns.
Plus It's also hard to resize the last column in the table.
Resolves #2227

How it was before: https://github.com/user-attachments/assets/3761996a-353c-4fea-b50c-c5ab4a400df6
And how it is now:https://github.com/user-attachments/assets/ae2ef936-5463-4582-8938-e2bb6b5cd863

[andriidudar]

Hey @infinitespark-96 , Thank you for your contribution.

I have run code with your improvements, and I see that the table layout is broken.

We want to preserve a good UI while introducing the functionality to define column widths for each column. To achieve this, the following steps should be taken:
• Increase the default column width and specify default widths for particular columns on each page.
• From a technical perspective, we need to add an additional column in the DataTable component with an auto width. This column will occupy any remaining table width when the total width of the columns is less than the table’s width.
• Additionally, there are specific scenarios that require custom solutions. For example, on comparison pages, we have virtual rows (for comparing experiments), and in tables with grouping (like Experiments and Optimization pages), further adjustments are needed.

[andriidudar]

The table layout should remain the same as was before the change.

[infinitespark-96]

I've made the requested changes fixes and improvements. IMO, it looks good now, and the main issues addressed in issue #2227 are now fixed. If there are any additional improvements maybe better to make a separate ticket for this?

Screencast: https://github.com/user-attachments/assets/e066bc70-2e02-4626-95e4-ce3220a3d3ea
@andriidudar

[andriidudar]

Hey @infinitespark-96, thank you for your contribution!

From a technical perspective, your code looks solid. We’re currently having internal discussions with the product team about whether we want to introduce such a drastic change to the table layout.

There’s also an issue with some tables where column titles are being trimmed by default — we’ll need to address that.

Additionally, I suggest the following change in the DataTable file: remove the calculation of the auto column’s width and delegate that responsibility to the browser instead.

I recommend pausing on this until the product team has made a decision on how to proceed.

FYI: @jacques-comet @juanferrub @olesya-comet @aadereiko

[infinitespark-96]

Got it, thanks for the review @andriidudar