How can I customize the mui-material datagrid header outline?

Question

I want to change the design of Mui Datagrid outline from

to

I can't upload the code for some reason, is there any reference material or example code?

Congius

Answer 1

simplest way to customize the datagrid is using sx props. you can check all the available css rules on https://mui.com/api/data-grid/data-grid/#css

to remove datagrid border use .MuiDataGrid-root rule and inside it you can add border properties. I see you have removed column separator too. To do so use .MuiDataGrid-columnSeparator

if you check below code I have prefixed .MuiDataGrid-root with & sign. but haven't added & sign to .MuiDataGrid-columnSeparator. you can open your chrome developer tool and see if the associated CSS rule has any parent class attached to it or not. if it has any you can prefix the rule with &. this way you don't have to write full class rule.

<DataGrid
  ...
  sx={{
    '.MuiDataGrid-columnSeparator': {
      display: 'none',
    },
    '&.MuiDataGrid-root': {
      border: 'none',
    },
  }}
/>

Mose

Answer 2

MUI Data Grid Header Styling

const columns: GridColumns = [
  {
    field: 'first',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
  {
    field: 'last',
    headerClassName: 'super-app-theme--header',
    headerAlign: 'center',
  },
];

More examples with below link https://mui.com/x/react-data-grid/style/

Country

Answer 3

try this mui data grid header styling:

'& .super-app-theme--header': {
     backgroundColor: '#7BF3A4',
 },

and do not forget headerClassName: 'super-app-theme--header' to put in rows while defining the rows of datagrid

Goat

Answer 4

Only use defaultColumns for mui grid and set font size, color and other properties like following code :

const defaultColumns: GridColDef[] = [


 {
    flex: 0.1,
    field: 'name',
    minWidth: 100,
    align: 'center',
    headerAlign: 'center',
    renderHeader: () => <Typography sx={{ fontSize: '9px' }}>{'Header Title'}</Typography>,
    renderCell: ({ row }: CellType) => (
      <Typography
        sx={{ fontSize: '12px' }}
      >{`#${row.name}`}</Typography>
    )
  },
....
]

use renderHeader for header customize and renderCell for rows in grid

Wrier