TableView with overflowMode=wrap does not shrink cells who once got expanded
- 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
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