Comcast / Comcast/react-data-grid

Flex Column widths break if text does not fit the cell

Open
#3,921 0 comments 0 reactions 0 assignees View on GitHub
Status: Unconfirmed
Dominant language
TypeScript
Stars
7.7k
Forks
2.2k
Avg merge
1d 2h
Merged PRs (30d)
33

Description

## Describe the bug

When using fr or percent column widths and there is truncated text in cells, if grid resizes (zoom or window resize), width of columns expands to fit full cell content

## To Reproduce

1. Go to "Columns Reordering" on example website (all column widths except ID are set to 1fr)
2. Inspect element -> Add text to any cell not in ID column so it does not fit and gets truncated with ellipsis
3. Resize window or resize any other cell
4. Column that has modified cell expands to fit the text

## Expected behavior

1. Columns (except ID) stay equal size and text stays truncated with ellipsis

## Link to Minimal Reproducible Example

[ColumnsReordering.tsx](https://github.com/Comcast/react-data-grid/blob/main/website/routes/ColumnsReordering.tsx)

## Environment

- `react-data-grid` version: 7.0.0-beta.58
- `react`/`react-dom` version: 19.1.1

## Additional context

Setting overflow on .rdg-cell to "hidden" instead of "clip" seems to fix the issue, but not sure if it will break other existing features

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.