material-uidatagridreact-tsxcolumnheader

How to remove column header of MUI v5 datagrid in react ts?

In React Typescript using MUI datagrid, need to remove column header which is no longer needed a datagrid without column header , enter image description here

need to remove header instead need to add this,

enter image description here

I did this by "& .MuiDataGrid-columnHeaders, & .MuiDataGrid-columnHeader": { display: "hidden", }, the header is not visible any more still it leave some space even I adjust the height. Like this, enter image description here

Solution

  • In MUI v5, It can be accomplish by making columnHeader display: none and its important to make its margin top to 0 in virtualScroller

    "& .MuiDataGrid-columnHeaders, & .MuiDataGrid-columnHeader": {
  display: "none",
 }, 
"& .MuiDataGrid-virtualScroller": {
  marginTop: "0 !important",
 },

    And headerHeight={0} , Header=>(null)

    <DataGrid
      rows={files}
      columns={columns}
      pageSize={100}
      rowHeight={40}
      headerHeight={0}
      components={{
        Header: () => null,// to remove header completely
        Header:()=>(<div> X Upload Failed</div>),//can be customized of your choice
  }}
/>

    enter image description here