mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.37k stars 1.3k forks source link

[data grid] Row resize handle #3801

Open joserodolfofreitas opened 2 years ago

joserodolfofreitas commented 2 years ago

Add a visual handle shown when the mouse cursor is close to a row's lines, allowing users to change a row's height through the UI (by clicking and dragging the lines)

It's like the handle to resize a column's width, but for the rows' height.

Based on #3218 comment, part of #3737, related to #3750.

Benchmark

https://github.com/user-attachments/assets/b21df029-a2b7-4cb9-92f9-47c28063ee26

cherniavskii commented 2 years ago

I think we should discuss whether we want to implement this. AG Grid allows to set row height, but there's no Row resizing feature: https://www.ag-grid.com/javascript-data-grid/row-height/ I'm not sure if there's a valid use case for such feature either.

joserodolfofreitas commented 2 years ago

We can link the issue to the "variable row height" documentation, and add the waiting for 👍 label, to confirm it's a desired feature. Do we have any major technical challenges on this one?

cherniavskii commented 2 years ago

I think performance is the biggest challenge. Currently, to change the row height we recalculate positions of all rows on the page. With row resize, we'll have to do that on each resize event. I'm not sure if we can avoid recalculating all rows positions.

Adding @DanailH to discussion, since he has more context in this regard

m4theushw commented 2 years ago

The column resize doesn't call setColumnWidth on each resize event. It first updates imperatively the width of all cells, then syncs the state.

https://github.com/mui-org/material-ui-x/blob/ce1aebfc59721ec8970b7386c2cb8524231e290e/packages/grid/_modules_/grid/hooks/features/columnResize/useGridColumnResize.tsx#L137

cherniavskii commented 2 years ago

@m4theushw Interesting, it pretty much solves my concern :) Have you discovered a use case for this feature?

m4theushw commented 2 years ago

Besides Excel supporting it, Kendo UI and ReactDataGrid also allow to resize rows. If we don't see much value having it we can add the "waiting for 👍" label.

hassaans208 commented 1 year ago

I hope this to be a solution to your problem https://github.com/mui/mui-x/issues/417#issuecomment-1456228312