I want the title column takes 3/4 of the full row width and the amount column tackes 1/4 of the full row width in all screens (md, sx...). This is the code:
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
See here: https://mui.com/x/react-data-grid/column-dimensions/
columns={[
{ field: 'title', flex: 3},
{ field: 'amount', flex: 1}
]}