[datagrid] Fit columns in the data grid without horizontal scroll

[jonathanharwood]

The problem in depth 🔍

I have a query about the implementation of the AutoSizing feature for the MUI X Premium DataGrid component.

I have been following online documentation but there seems to be something missing that I can’t get my head around.

We are rendering a DataGridPremium that implements the AutosizeOnMount prop and with the following AutosizeOptions object: { includeHeaders: true, expand: true }

The ‘expand’ property is perfect to extending the DataGrid to the width of the parent container in the event the maximum visible cell width is smaller than said parent container.

However, there doesn’t appear to be a way to do the opposite. I’d like to constrain the width of the DataGrid to the parent in the event that the AutoSize width exceeds the parent width. At the moment, it expands fully across to the width of the maximum cell in the grid, which is causing a horizontal scrollbar.

Additionally, in the event that the AutoSize width is smaller than the parent container, the checkbox column also expands with the other columns. I know there is a way to filter the columns to 'expand', but the 'columns' prop for the DataGrid doesn't take in the checkbox column as an array value (it's calculated internal to the DataGrid).

Is there any way to achieve my use case?

CodeSandbox here: https://codesandbox.io/s/summer-darkness-cpnn5v?file=/src/demo.tsx

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: Windows 10 10.0.19045 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.3570.0), Chromium (119.0.2151.72) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.22 @mui/core-downloads-tracker: 5.14.16 @mui/icons-material: ^5.14.16 => 5.14.16 @mui/lab: ^5.0.0-alpha.151 => 5.0.0-alpha.151 @mui/material: ^5.14.16 => 5.14.16 @mui/private-theming: 5.14.16 @mui/styled-engine: 5.14.16 @mui/system: 5.14.16 @mui/types: 7.2.8 @mui/utils: 5.14.16 @mui/x-data-grid: ^6.14.0 => 6.18.1 @mui/x-data-grid-generator: ^6.18.1 => 6.18.1 @mui/x-data-grid-premium: ^6.16.1 => 6.18.1 @mui/x-data-grid-pro: 6.18.1 @mui/x-date-pickers: ^5.0.15 => 5.0.20 @mui/x-license-pro: 6.10.2 @mui/x-tree-view: 6.0.0-alpha.1 @types/react: 17.0.3 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.2.2 ```

Search keywords: Autosize AutosizeOnMount AutosizeOptions autosizeColumns Order ID: 77486

[michelengelen]

@cherniavskii can we support this in a different way (with styling maybe), or would we need to add this as a new feature?

[cherniavskii]

Hi @jonathanharwood

I’d like to constrain the width of the DataGrid to the parent in the event that the AutoSize width exceeds the parent width.

Are you looking for something like autoHeight, but for the Data Grid width? I don't think it's possible right now. Can you elaborate more on your use case? Why would you prefer the grid content to overflow instead of having a horizontal scroll inside of the grid?

Additionally, in the event that the AutoSize width is smaller than the parent container, the checkbox column also expands with the other columns.

You can set the max width for the checkbox column: https://codesandbox.io/p/sandbox/laughing-wilbur-qmsm35

const columns = [
  { field: GRID_CHECKBOX_SELECTION_FIELD, maxWidth: 50 },
  // ...
];

Related docs: https://mui.com/x/react-data-grid/row-selection/#custom-checkbox-column

[jonathanharwood]

Hi @cherniavskii, thanks for the comment.

Our use case for constraining the width is that we want to show all columns within the viewport without having to scroll horizontally to see them (at least when the control is initially mounted - column resizing to expand the columns does show a horizontal scroll which makes perfect sense). We have a customised 'renderCell' control which shows a MUI Tooltip to show the full cell content in the event it is too wide to fit into the viewport (this is in our current implementation before moving to DataGrid).

It is not essential at this moment in time as we can make use of 'flex' for now.

You can set the max width for the checkbox column

Duh, thanks for this - I hadn't spotted this in the API docs.

[cherniavskii]

@jonathanharwood Ah, so you're looking for a way to fit all columns in the Data Grid without a horizontal scroll? Did you consider using flex width for columns instead of auto-sizing?

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.