Open prakhargupta1 opened 1 year ago
I have created https://github.com/mui/mui-x/issues/7323 on MUI X's side.
There is a dynamic row height feature that we can provide as config or have it by default.
In case of supporting it by default, we can explore getEstimatedRowHeight
prop.
There is a dynamic row height feature that we can provide as config or have it by default. In case of supporting it by default, we can explore getEstimatedRowHeight prop.
Personally, I find the UX of datatables with varying row heights quite poor. It makes it hard to scan the data as your eyes have to travel a different distance for each row.
The auto
feature is also an all-or-nothing approach. There is no way of constraining to a maximum row height, so one single large cell in a table can render it completely unusable. Or to have it operate on only a subset of the columns. It also makes resizing columns a bit prone to layout-shift in the rows.
I feel like we should rather look into https://github.com/mui/mui-x/issues/7323 to solve this problem
Note that currently, the table goes into auto row height mode when there is at least one image type column. It has the unintended effect to also resize rows based on large cells that don't contain images. I'd vote for removing this behavior for now. @bharatkashyap Do you think there's a way to solve image columns without auto row height? Perhaps using a thumbnail + popover?
edit: To illustrate that particular problem, see what suddenly happens when I add an image column:
https://user-images.githubusercontent.com/2109932/214318477-d2df9741-e5ff-48d8-96e6-098bd3610adb.mov
The only option to see the contents is by dragging the column header to the right and sometimes that also doesn't work when the text is too long.
Shorterm, we could implement a "1. Cell expander" https://github.com/mui/mui-x/issues/1040#issuecomment-780484281
The only option to see the contents is by dragging the column header to the right and sometimes that also doesn't work when the text is too long.
Shorterm, we could implement a "1. Cell expander" mui/mui-x#1040 (comment)
Agreed, this is present in the docs as well now https://mui.com/x/react-data-grid/recipes-editing/#multiline-editing
Duplicates
Latest version
Summary 💡
A table for me in preview mode looks like:
The only option to see the contents is by dragging the column header to the right and sometimes that also doesn't work when the text is too long.
Examples 🌈
https://elastic.github.io/eui/#/tabular-content/data-grid https://codesandbox.io/s/expandcelldemo-enbw7
Motivation 🔦
No response