Is it possible to get the DataGrid to only be the width of the rows without setting a containing div width?
I have tried disableExtendRowFullWidth={true} to help, but this only does the rows. The containing DataGrid is still full wide.
Here's my current code example - https://codesandbox.io/s/material-ui-issue-forked-j720c?file=/src/Demo.js
you can force the size of the Datagrid using makeStyles for example, even do more awesome stuff like adding gradient colors etc.
const useStyles = makeStyles({
dataGrid: {
width: "640px"
}
});
add the above variable outside your function even in another file and import it, then add the hook useStyles in your function and attach it to de DataGrid using className.
export default function Demo() {
const classes = useStyles();
return (
<DataGrid
autoHeight={true}
disableExtendRowFullWidth={true}
columns={columns}
rows={rows}
className={classes.dataGrid}
/>
);
}
This will help you control the size, whatever keep in mind that's a fixed size, so it will not be responsive, use % units for example in order to achieve some flexibility. Hope to help! Good luck!
BONUS!! Version colored just for fun:
const useStyles = makeStyles({
dataGrid: {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
borderRadius: 3,
border: 0,
color: "white",
height: 48,
padding: "0 30px",
boxShadow: "0 3px 5px 2px rgba(255, 105, 135, .3)",
width: "640px"
}
});
SANDBOX:
https://codesandbox.io/s/material-ui-issue-forked-c0n6i?file=/src/Demo.js:1304-1596
