Skip to content

TableView with overflowMode=wrap does not shrink cells who once got expanded #3585

Open
@tomsontom

Description

@tomsontom

🐛 Bug Report

If you use a TableView with overflowMode="wrap" a cell who has increased because of resizing does not shrink anymore.

🤔 Expected Behavior

I expect a cell to shrink once enough vertical space has been provided by the table to fit the content

😯 Current Behavior

A cell who onces increased its size does not shrink anymore although the vertical space is not needed anymore

💁 Possible Solution

My gut feeling is that the problem is in the Virtualizer but I have no idea how this could be fixed.

🔦 Context

I tried to use TableView in our application but this behavior makes it almost unusable for my usecase where I have columns who don't have a fixed width. To me it generally feels that (at least of firefox) that the TableView is not made for dynamically resized columns but I might be mistaken.

💻 Code Sample

One can just adapt the 'overflowMode="wrap"' with the following patch

diff --git a/packages/@react-spectrum/table/stories/Table.stories.tsx b/packages/@react-spectrum/table/stories/Table.stories.tsx
index 12abd791d..ad9d07d03 100644
--- a/packages/@react-spectrum/table/stories/Table.stories.tsx
+++ b/packages/@react-spectrum/table/stories/Table.stories.tsx
@@ -773,7 +773,7 @@ storiesOf('TableView', module)
     () => (
       <TableView aria-label="TableView with variable row heights" selectionMode="multiple" width={500} height={300} isQuiet overflowMode="wrap" onSelectionChange={s => onSelectionChange([...s])}>
         <TableHeader>
-          <Column width={250} showDivider>File Name</Column>
+          <Column showDivider>File Name</Column>
           <Column>Type</Column>
           <Column align="end">Size</Column>
         </TableHeader>

and now make the table require to resize itself

Bildschirmaufnahme.2022-10-03.um.20.18.36.mp4

🌍 Your Environment

Software Version(s)
react-spectrum latest-release
Browser all
Operating System all

🧢 Your Company/Team

🕷 Tracking Issue (optional)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    • Status

      🔬 To Investigate / Verify

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions