Table - allow users to change column width

[ian13262]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

calcite-tables should allow users to adjust the widths of columns to most optimally display header/cell content. This would be similar to how tables in Google Docs/Microsoft Word/etc. allow for dynamic sizing.

Acceptance Criteria

Being able to adjust column widths manually in a calcite-table would allow users to tweak their tables' design based on changing content/word lengths in columns.

Relevant Info

No response

Which Component

calcite-table

Example Use Case

We want to avoid something like this from happening in smart mapping raster panels: https://codepen.io/iyouth66/pen/ExGLqjX?editors=100. If a word in a calcite-table-cell is too long, the table will exceed any set max-width. We can prevent this by using overflow-wrap, but then the table will shrink the other columns unnecessarily. It would be more ideal if we could adjust the column widths manually to fit everything as desired.

Priority impact

p3 - want for upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Online

[macandcheese]

Implementation note: this is a dev-user story, to adjust and set a static width for a column. It is separate from the end-user story to, as a user, drag and adjust the width of the column.

[jfelicianiats]

@macandcheese I would also like the ability to set a static width for columns via the table headers and table items that gets applied to the or . Not sure if this is the correct place to put this, but both independent features would be nice. Is there a ticket I can follow to track progress on this?

[macandcheese]

Hi @jfelicianiats this would be the issue to track for progress updates for this specific feature.

As a workaround, you can set a defined width on elements inside the Table Cell, which will constrain the column width. Note, this won't work in layout="fixed", and for exact width, you can adjust for the padding of a Table Cell in a given scale: https://codepen.io/mac_and_cheese/pen/LYqmvzY?editors=1000

[jfelicianiats]

@macandcheese Thanks for the update. As a side note the proposed workaround doesn't work in all cases. If you set a specific width on table cell content, it has a limit to how small the column will become. The use case I need it for is where the column is just a short abbreviation I need to make a small pixel width so its not obtrusively large. In your example, the table column for "Date / Time" won't shrink beyond roughly 130px.

[geospatialem]

The request above is now achievable in 2.10.1, and Adam provided a use case example for defining custom column widths above via https://codepen.io/mac_and_cheese/pen/LYqmvzY. Closing out the above.

There will also be future work on an advanced table that will have more flexibility, targeted for late 2025: #6646