CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
miu
miu

Reputation: 71

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

I want to change the design of Mui Datagrid outline from 1

to 2

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

Upvotes: 7

Views: 41618

Answers (5)

Michael Okoye
Michael Okoye

Reputation: 1

Adding this className to the DataGrid sx allows you to manipulate the individual headers but not the whole container. You can still set background colors and margins as you want.

'& .MuiDataGrid-columnHeader': {
                    backgroundColor: 'your-color-constant',
                }

Upvotes: 0

Hekmat
Hekmat

Reputation: 521

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

Upvotes: 1

badr ahrir
badr ahrir

Reputation: 33

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

Upvotes: 0

Sandeep Jain
Sandeep Jain

Reputation: 1262

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/

Upvotes: 2

Prashant Jangam
Prashant Jangam

Reputation: 2828

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',
    },
  }}
/>

Upvotes: 14

Related Questions