Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Dynamic row height does not work with pinned columns #7486

Open
kkapitanova opened this issue Jan 12, 2023 · 4 comments
Open

[DataGrid] Dynamic row height does not work with pinned columns #7486

kkapitanova opened this issue Jan 12, 2023 · 4 comments
Labels
component: data grid This is the name of the generic UI component, not the React module! support: commercial Support request from paid users

Comments

@kkapitanova
Copy link

kkapitanova commented Jan 12, 2023

I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡
I want to be able to have pinned columns and auto row height together. Currently, it seems that the getRowHeight={() => 'auto'} property behaves correctly only when there are no pinned columns.

Examples 🌈
Here is an example to showcase this: grid demo - StackBlitz

Steps to reproduce:

  1. Click the ‘Add’ button to add more values in the array to see how the row increases its height (there are no pinned columns)
  2. Click the ‘Delete All’ button to delete all of the values and see how the row decreases its height
  3. Click on any column to pin it left/right
  4. Go through steps 1 and 2 again and notice how the row height is not decreased when deleting the values

Motivation 🔦
I believe auto row height should work the same way when there are pinned columns

@kkapitanova kkapitanova changed the title [DataGrid] Dynamic row height does now work with pinned columns [DataGrid] Dynamic row height does not work with pinned columns Jan 12, 2023
@m4theushw
Copy link
Member

m4theushw commented Jan 12, 2023

Dynamic row height does work with pinned columns, however, it needs a bit of customization when the content may have its height decreased after initialization. See the example in https://mui.com/x/react-data-grid/column-pinning/#usage-with-dynamic-row-height This is necessary because when there's no height calculated for the row, we let all cells freely expand vertically, then we take the maximum value and apply it to the other cells. When one cell has its height reduced, the cell from the pinned column still has the old height value so this value is used.

@m4theushw m4theushw added component: data grid This is the name of the generic UI component, not the React module! support: commercial Support request from paid users labels Jan 12, 2023
@ziggy6792
Copy link

jumps

This workaround is not ideal as it leads to some pretty ugly re-rendering while resizing.
Is there any better solution?

Thanks

@romgrk
Copy link
Contributor

romgrk commented Oct 2, 2023

No, there is no solution. To know the dynamic row height we need to wait until after the row has rendered. Updating the pinned columns takes another render cycle.

This might be solved by #10059 if we render all cells inside the same container.

@MarcusCody
Copy link

MarcusCody commented Aug 14, 2024

jumps jumps

This workaround is not ideal as it leads to some pretty ugly re-rendering while resizing. Is there any better solution?

Thanks

Is there any solution for this issue yet?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: data grid This is the name of the generic UI component, not the React module! support: commercial Support request from paid users
Projects
None yet
Development

No branches or pull requests

5 participants