Material UI Data Grid Component Text not getting aligned

Question

I am using DataGrid component inside a div which is inside Box component. I am not able to align center the content of DataGrid. Also, not able to style the header text.

Code is as below:

Blockquote

<Box>
 <div style={{
        textAlign: "center",
      }}>
          <DataGrid
          rows={tableData}
          columns={columns}
          pageSize={12}
          disableSelectionOnClick
          showCellRightBorder
          autoHeight
          density="compact"
          sx={{ fontFamily: "Plus Jakarta Sans, sans-serif", fontWeight: 'bold', fontSize: 14, textAlign: 'center' }}
          HorizontalAlignment="Center"
        >
          </DataGrid>
 </div>
</Box

Blockquote

Answer 1

You can define the text alignment for text and headers to be centered like this example in your columns object.

const columns = [
  {
    field: 'test',
    headerName: 'Column Header',
    headerAlign: 'center',
    align: 'center',
  },
  ...
]