[DataGrid] Introduce a maxWidth property in GridColDef

[flaviendelangle]

Closes #2174

The next step would be to improve the flex behavior to respect the CSS specification (#3091 for instance).

https://deploy-preview-3550--material-ui-x.netlify.app/components/data-grid/columns/#resizing

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[cherniavskii]

LGTM

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	141.7	306.2	194.8	204.16	61.161
Sort 100k rows	ms	255.9	690.8	582.8	524.48	159.669
Select 100k rows	ms	144.4	340.8	203.4	212.7	70.74
Deselect 100k rows	ms	90.1	199.4	175.7	147.66	37.503

Generated by 🚫 dangerJS against c4e4d6a

[oliviertassinari]

@flaviendelangle I have tried the use case raised in #2174 (comment) (reading the git diff, I had a few doubts about the correctness). It doesn't seem to work correctly. I would expect the last column of the second demo to be full-width. Proof: https://codesandbox.io/s/columnsizinggrid-material-demo-forked-nhcv3?file=/package.json.

      <div style={{ height: 200, width: "100%" }}>
        <DataGridPro
          columns={[
            { field: "id" },
            { field: "username", width: 100 },
            { field: "age", resizable: false, flex: 1 }
          ]}
          rows={rows}
        />
      </div>
      <div style={{ height: 200, width: "100%" }}>
        <DataGridPro
          columns={[
            { field: "id" },
            { field: "username", flex: 1, maxWidth: 100 },
            { field: "age", resizable: false, flex: 1 }
          ]}
          rows={rows}
        />
      </div>

I have tried with AG Grid, it seems correct: https://plnkr.co/edit/WJCcSwIr69GwJdoc.

How about we open a new GitHub issue?

[flaviendelangle]

You are right 👍