Skip to content

Flex Column widths break if text does not fit the cell #3921

@triax7

Description

@triax7

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

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions