icflorescu / icflorescu/mantine-datatable

Row Expansion causes columns to resize for no reason.

Open
#658 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.3k
Forks
102
PR merge metrics
No merged PRs in 30d

Description

Describe the bug
When the data table is rendered and all columns have plenty of space around child elements, clicking the row to expand it causes the columns to resize unnecessarily. This is a bit jarring for a user. It's also made worse when there are filter and sort icons on the top. This only occurs in certain situations, but I haven't been able to narrow down why.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://icflorescu.github.io/mantine-datatable/examples/expanding-rows/#using-collapse-function-in-row-expansion-content
  2. Make sure the browser window is wide enough that all columns have plenty of space.
  3. Expand rows and observe column width resizing. *Note that other tables above this example are fine.

Expected behavior
Row expansion should not change column sizes.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]: Windows 11
  • Browser [e.g. chrome, safari]: Firefox
  • Version [e.g. 22] 131.0.3

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue in the expanding-rows example at the linked demo, using a wide Firefox window and observing column widths before and after expansion. Trace the row-expansion and column-sizing behavior from that example; done means expanding rows no longer changes column sizes, including when filter and sort icons are present.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.