React MUI Datagrid Top Center Alignment for Headers

Question

I would like to set the alignment of the wrapped headers as top-center via sx:

const datagridSx = {
    '& .MuiDataGrid-columnHeaders': {
        height: 'unset !important',
        maxHeight: '168px !important',
    },
    "& .MuiDataGrid-columnHeaderTitle": {
        whiteSpace: "normal",
        lineHeight: "normal",
        fontWeight: "bold",
        verticalAlign: "top"
    },
};

but it doesn't work. Could anyone help me, please? Thank you.

Answer 1

Instead of using the verticalAlign: "top" on the .MuiDataGrid-columnHeaderTitle you can change the alignItems property on the .MuiDataGrid-columnHeaderTitleContainer.

So your sx would look something like this:

const datagridSx = {
  ".MuiDataGrid-columnHeaderTitleContainer": {
    alignItems: "start",
  },
  "& .MuiDataGrid-columnHeaders": {
    height: "unset !important",
    maxHeight: "168px !important",
  },
  "& .MuiDataGrid-columnHeaderTitle": {
    whiteSpace: "normal",
    lineHeight: "normal",
    fontWeight: "bold",
  },
};