[data grid] Sorting a column jitters when row spacing is applied

[Kavish20]

Steps to reproduce

Steps:

1. Create a Data grid.
2. Apply row spacing only for the first visible and last visible rows.
3. Click Sort on a column

Current behavior

As soon as sort icon is clicked, it jitters the table before sorting the rows. The rows shift up and down before coming into place

Expected behavior

The rows should not shift and the table should not give a jittering feeling.

Context

getRowSpacing={(params: GridRowSpacingParams) => { return { top: params.isFirstVisible ? 16 : 0, bottom: params.isLastVisible ? 16 : 0, }; }}

This is the code for applying row spacing on the Data Grid

Your environment

No response

Search keywords: row spacing sort sorting

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[Kavish20]

Thank you for replying @michelengelen

I am attaching a code sandbox link reproducing the issue.

When clicking on the Sort icon on any column, all the rows shift up and down before coming into place

Link to code sandbox

[michelengelen]

All right ... thanks for reporting. I can see the jitter. This is clearly a bug.

I'll add this to the board for the team to discuss and fix! Thanks again! 🙇🏼

[Kavish20]

Thank you @michelengelen. I am happy to be of help.