How can I stop the DataGrid from expanding horizontally to fill its parent container?

[RyleySill93]

The problem in depth 🔍

How can I stop the DataGrid from expanding horizontally to fill its parent container?

The default behavior appears to insert additional cells in a ghost column which expand to fill the parent container. Is there a way to make it behave more like a table so it only takes up the horizontal space needed to render the columns?

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Data Grid Width
Order ID: 72462

[michelengelen]

Hey @RyleySill93 ... I'll have a look and come back with a recipe! 👍🏼

[MBilalShafi]

If I am relating to it correctly, we used to have a prop called disableExtendRowFullWidth which served a similar purpose, but since it was not disabling extending the full row width, rather just adding a right border we decided to remove it to later replace with a proper fix.

By the way, I am just curious, if not an empty cell, what exactly do you want to see in the empty space, do you want to place another element there? If that is the case, wouldn't it be better to reduce the width of the grid and place the element outside? 🤔

[michelengelen]

Yes, I remembered using that prop in the past as well. That's why I thought I can come up with a quick recipe ... I did not know that it got removed though.

The DataGrid in itself is not using intrinsic dimensions (Docs - DataGrid Layout), so depending on your specific use-case this can potentially be hard to accomplish.

As @MBilalShafi already mentioned: If you can outline what you want to accomplish its easier for us to help you out!

[RyleySill93]

By the way, I am just curious, if not an empty cell, what exactly do you want to see in the empty space, do you want to place another element there? If that is the case, wouldn't it be better to reduce the width of the grid and place the element outside? 🤔

Yeah this is the approach I ended up taking: added a maxWidth equal to sum of the widths of the columns: maxWidth: columns.reduce((acc, column) => acc + column.width, 0).

FWIW the reason I needed this behavior was to create an airtable-like experience where the last "row" and "column" (which are really just buttons made to look like they are part of the grid) enable the user to add rows and columns dynamically.

Thanks for the quick response!

[romgrk]

@RyleySill93 One problem with that approach is that it wouldn't be possible to virtualize columns.

Maybe one thing you could try is to make that last + thing a real datagrid column? You can use GridColDef.renderHeader to render a custom header, and you could add some styles to disable border on the (empty) cells of that last column. This gives you all the benefits of the grid with your desired styles/UX.

edit: Though the empty cells would still be interactive, IIUC. Not sure how to disable keyboard & mouse actions for those. I guess pointer-events: none works for the mouse, but disabling keyboard shortcuts might need some code inside the grid to be update.

[github-actions]

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.