I would like the title column to occupy 3/4 of the full row width and the amount column to take up 1/4 of the full row width on all screens sizes (md, sx...). Here is the updated code snippet:
import React from 'react'
const MyComponent = () => {
return (
<Box sx={{height: { md: 450, xs: 350 }, width: '35%',}} >
<DataGrid
columns={[
{ field: 'title',},
{ field: 'amount'
}
]}
rows={[
{ id: 1, title: 'React', amount:'100' },
{ id: 2, title: 'MUI', amount:'-100' },
]}
/>
</Box>
)
}
export default MyComponent