[DataGridPro] Add ability to set minimum / maximum resizable column width

[bryyytl]

Following up after #347 and #566, I think it would be great to be able to set the minimum / maximum width of a column similarly to how the GridColDef allows the default width to be set.

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

Summary 💡

I could see two different ways this feature could be supported.

1. The minimum / maximum width could be set to apply for all columns (e.g. 100px min-width instead of 50px).
2. The minimum / maximum width could be applied individually per column (similarly to how the default width can be specified).

Motivation 🔦

Right now, I am trying to prevent users from being able to shrink the columns to the extent where the column headerName no longer appears. The following screenshot shows the two resizable columns being collapsed to the extent that the user cannot see the sorting icon.

https://material-ui.com/components/data-grid/columns/#resizing

[fnowacki]

Also for the width/flex option, it would be a nice feature!

For now, for large screens, the flex option works great to scale columns for the whole width. But for mobile devices... It's totally unreadable :/

Take a look 👀

Larger screen (like desktop):

Mobile screen (iPhone X):

My proposition is, to add a "minWidth" flag 🙌🏻 It should works perfect with flex 🎉

[oliviertassinari]

@fnowacki your use case is different from the author. Still, I do agree that with the default width, it makes a lot of sense to reproduce the CSS layout model (but a subset that is compatible with virtualization).

AG Grid has the same feature for both flexbox layout and resizing, but it's not obvious if it makes sense to merge the two concepts. One could argue that the default width shouldn't impact the capability of an end-user to adjust the width as he sees fit.

[oliviertassinari]

We now have #1850 for the flexbox aspect of the min-width raised in this issue.

For the resizing aspec, I would propose we close as "won't fix" as it seems a niche use case that harms end-users flexibility. But also happy to wait for more feedback.

[fnowacki]

@oliviertassinari Cool 👍 Many thanks!

[oliviertassinari]

With #2101, we have made the minWidth property of the column definition also impact how the columns can be resized. We didn't implement the same for the maxWidth property.

[flaviendelangle]

It is a duplicates of #2174, I am closing this one 👍

[oliviertassinari]

Actually, I'm reopening, this one is specifically about the resize feature, while #2174 is about the default layout. It's very similar, but it's not clear if the two states should be identical.

[flaviendelangle]

minWidth also applies when resizing so I think maxWidth should as well.

But we could introduce new properties for people that want to distinguish the base minWidth / maxWidth and the resize one.

[tlmader]

Also interested in minWidth / maxWidth properties that do not impact resizing. minFlexWidth / maxFlexWidth maybe?

[flaviendelangle]

I would go the other way around an create minResizableSize / maxResizableSize (with fallback to minWidth / maxWidth if not defined)
But open to discussion

[tlmader]

That would introduce fewer breaking changes.

How would this work if I wanted to allow full resizing, while setting a minimum flex width? I imagine like this:

  {
    field: 'projectId',
    headerName: 'Project',
    minResizableWidth: 0,
    minWidth: 200,
    flex: 1,
    renderCell: renderCellText,
  },

[flaviendelangle]

Right now both flex process and resize process uses minWidth / maxWidth
If we want to differentiate, we need to create new properties for one of them, with fallback to minWidth / maxWidth if not defined (to avoir any BC).
The fallback may go away in v6 (not sure what's best here).
Not sure why putting the new properties to the resize or to the flex process differ in the amount of BC.

In your example, for me that grid would take 200px at init (or more if more flex space available).
And it would be resizable below 200px (down to 0px).

[tlmader]

You're right, both approaches do not introduce BC. I was in the middle of editing my comment 😄

Either one would work for me. minFlexWidth / maxFlexWidth would allow me to do this with one fewer property though:

  {
    field: 'projectId',
    headerName: 'Project',
    minFlexWidth: 200,
    flex: 1,
    renderCell: renderCellText,
  },

[flaviendelangle]

😄 Too fast

Yes I guess the best argument to do one or the other is : which one do we most often want to define without the other ?

[tlmader]

Another thought: if MUI ever decided to support other fluid column widths (maybe percentages?), then minResizableSize / maxResizableSize could be more future-proof.

[nhayfield]

i've noticed that when using the rendercell function in data grid pro version with resizable columns the content will overlap with neighboring columns. this only happens with rendercell columns. normal columns work as expected.

https://github.com/pomerium/pomerium-console/issues/2993