adobe / adobe/react-spectrum

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

Open
#3,585 1 comment 0 reactions 0 assignees View on GitHub
bug TableView
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 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

```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)
() => (
onSelectionChange([...s])}>

- File Name
+ File Name
Type
Size

```

and now make the table require to resize itself

https://user-images.githubusercontent.com/52631/193650045-de9b26c4-a7ee-4ece-84f5-178342f57155.mp4

## 🌍 Your Environment

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

## 🧢 Your Company/Team

## 🕷 Tracking Issue (optional)

Contributor guide

Open the contributing guide

Research direction

Start with packages/@react-spectrum/table/stories/Table.stories.tsx and reproduce the variable-width TableView example with overflowMode="wrap". Inspect the Virtualizer behavior involved in row sizing and verify that cells shrink after the table has enough vertical space; confirm the behavior across the reported environments.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.