How to Word-Wrap Column Headers in Material-UI DataGrid

How to Word-Wrap Column Headers in Material-UI DataGrid

Material-UI's DataGrid is a powerful tool for rendering complex tables in React applications. However, a common challenge developers face is implementing word-wrap for column headers. If you’ve struggled to wrap header text properly, this guide will show you how to achieve that with clear examples and explanations.

Problem: Header Text Not Wrapping

By default, the DataGrid component does not support automatic word-wrap for column headers. Even when using CSS properties like wordWrap, the text remains truncated. Here's an example of what developers typically try but doesn’t work:

const StyledDataGrid = styled(DataGrid)(({ theme }) => ({
  root: {
    '& .MuiDataGrid-columnHeaderTitle': {
      wordWrap: 'break-word',
    },
  },
}))

;<StyledDataGrid rows={rows} columns={columns} />

Solution: Using sx for Styling

The key to achieving word-wrap lies in overriding the correct CSS properties. Here’s a solution that adjusts the white-space property and ensures the header height accommodates wrapped text.

import * as React from 'react'
import { DataGrid } from '@mui/x-data-grid'

const rows = [{ id: 1, username: '@MUI', age: 20 }]

export default function HeaderColumnsGrid() {
  return (
    <div style={{ height: 250, width: '100%' }}>
      <DataGrid
        sx={{
          '& .MuiDataGrid-columnHeaderTitle': {
            whiteSpace: 'normal',
            lineHeight: 'normal',
          },
          '& .MuiDataGrid-columnHeader': {
            height: 'unset !important',
          },
          '& .MuiDataGrid-columnHeaders': {
            maxHeight: '168px !important',
          },
        }}
        columns={[
          {
            field: 'username',
            headerName: 'Really long header name',
            description: 'The identification used by the person with access to the online service.',
          },
          { field: 'age', headerName: 'Another really long header name' },
        ]}
        rows={rows}
      />
    </div>
  )
}

Explanation of the Code

1. Adjusting white-space: The white-space: normal property allows the header text to break onto the next line.
2. Modifying Header Height: The height: unset !important and maxHeight properties override the default inline styles that restrict the header's height.
3. Description Property: Adding a description to columns improves accessibility and usability.

Alternate Solution: Custom Header Rendering

You can also customize the header rendering to control how the text is displayed:

const columns = [
  {
    field: 'username',
    headerName: 'Really long header name',
    renderHeader: () => (
      <div style={{ lineHeight: '1.5em' }}>
        <span>Long Header Line 1</span>
        <br />
        <span>Long Header Line 2</span>
      </div>
    ),
  },
]

;<DataGrid columns={columns} rows={rows} />

This method provides even greater flexibility for styling and content.

FAQs

1. Can I use styled API instead of sx? Yes, you can achieve similar results using the styled API. However, sx is often more concise and easier to use for quick styling adjustments.

2. Why does !important appear in the code? The DataGrid component applies inline styles, which can be challenging to override without using !important.

3. What happens if my headers wrap to more than three lines? You may need to increase the maxHeight property or ensure the content fits within the available space.