search

mui / toolpad

Toolpad: Full stack components and low-code builder for dashboards and internal apps.
https://mui.com/toolpad/
MIT License
1.16k stars 277 forks source link

Datagrid columns should have the option to wrap cell contents like in Excel #1484

Open prakhargupta1 opened 1 year ago

prakhargupta1 commented 1 year ago

Duplicates

Latest version

Summary 💡

A table for me in preview mode looks like:

Screenshot 2022-12-23 at 11 51 16 AM

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

oliviertassinari commented 1 year ago

I have created https://github.com/mui/mui-x/issues/7323 on MUI X's side.

prakhargupta1 commented 1 year ago

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.

Janpot commented 1 year ago

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

oliviertassinari commented 1 year ago

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

bharatkashyap commented 1 year ago

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