Here is the code snippet that I am working with:
return (
<Box sx={{ height: 400 }}>
<DataGrid columns={columns} rows={rows} />
</Box>
)
Currently, my table appears like this: https://i.sstatic.net/KWXwL.png
I am aiming for the email column to automatically adjust its width based on the widest cell in the row, resulting in a table layout like this:
https://i.sstatic.net/eeBJN.png
The structure of my columns and rows is pretty straightforward:
const columns = [ { field: "firstName" }, { field: "lastName" }, ...etc ]
const rows = [
{ firstName: "Camil Pasa Sokak", lastName: "In The Village", ...etc },
... etc
]
Is there a way to achieve this in MUI x (community table version)?
I want the column of the
- Please note: even though the table might be wide, it should still display both x and y scrollbars. I prefer not to disable these scrollbars.
For reference, you can explore a sandbox example here: https://codesandbox.io/s/strange-newton-z6pwj4?file=/src/App.js