feat: Support percentage widths in resizable table columns

[gethinwebster]

Description

Support percentage (rather than pixel) widths in resizable table columns, so that more responsive table layouts can be created.

Related links, issue #, if available: AWSUI-22206

How has this been tested?

New integ tests. Will add screenshot tests post-release.

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

• Changes include appropriate documentation updates.
• Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
• Changes do not include unsupported browser features, see CONTRIBUTING.md.
• Changes were manually tested for accessibility, see accessibility guidelines.

Security

• If the code handles URLs: all URLs are validated through the checkSafeUrl function.

Testing

• Changes are covered with new/existing unit tests?
• Changes are covered with new/existing integration tests?

---

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

[codecov[bot]]

Codecov Report

:white_check_mark: All modified and coverable lines are covered by tests. :white_check_mark: Project coverage is 95.78%. Comparing base (e7561bf) to head (7d9e8d4). :warning: Report is 1012 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2553      +/-   ##
==========================================
- Coverage   95.79%   95.78%   -0.01%     
==========================================
  Files         741      741              
  Lines       20282    20278       -4     
  Branches     6520     6886     +366     
==========================================
- Hits        19429    19424       -5     
+ Misses        845      798      -47     
- Partials        8       56      +48     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[pan-kot]

@gethinwebster when running the test page in dev mode I am getting the warnings like:

[AwsUi] [Table] resizableColumns feature requires width property to be a number, got 20%. The component may work incorrectly.

[pan-kot]

@gethinwebster I found some weird behaviour reproducible in a slightly updated version of the test page: https://github.com/cloudscape-design/components/pull/2560

As you can see in the screen recording, adding "Description" columns also increases the width of the first column when percentages are used.

https://github.com/user-attachments/assets/dee5e3a8-0a66-4e3e-9708-4e86482f790d

[jperals]

If this feature is aimed to work together with resizable columns, should we update the interface docs for Table.ColumnDefinition? Currently they state:

When resizableColumns property is set to true, additional constraints apply: 1) string values are not allowed

[gethinwebster]

If this feature is aimed to work together with resizable columns, should we update the interface docs for Table.ColumnDefinition? Currently they state:

good point, I thought this was only mentioned in the Development Guidelines, but will check through and make updates to API docs too.

[gethinwebster]

@gethinwebster when running the test page in dev mode I am getting the warnings like:

[AwsUi] [Table] resizableColumns feature requires width property to be a number, got 20%. The component may work incorrectly.

Updated to remove these

[gethinwebster]

@gethinwebster I found some weird behaviour reproducible in a slightly updated version of the test page: #2560

As you can see in the screen recording, adding "Description" columns also increases the width of the first column when percentages are used.

Screen.Recording.2024-08-09.at.09.29.02.mov

Updated with fix for this

[pan-kot]

Is it expected that the width is applied differently for when resizable columns is on or off?

In my example, I am only setting width to the first and second column (300% and 300px accordingly).

https://github.com/user-attachments/assets/ee08d33e-b263-4e28-a0ae-8eb34e7d86e7

[gethinwebster]

Closing, will not address immediately.