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

Question

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

need to remove header instead need to add this,

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,

Answer 1

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