Is there a way to make a DetailsList header text wrap in Fluent UI?

Question

I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated. See this codepen.

Is there any way to change this behavior, such that the header text wraps over multiple lines?

While I found this unanswered question from 2 years ago, I couldn't find an answer on the topic on neither Stackoverflow, Github or the offical documentation. Here are some approaches I tried:

• inject a CSS class with word-break: break-all; via the headerClassName field of IColumn
• setting isMultiLine on the columns
• The DetailsHeader component itself whose rendering I can override with onRenderDetailsHeader does not seem to offer any props for customizing how the text is displayed

Is there even a way to achieve the desired behaviour (wrapping over multiple lines instead of truncating long column headers)?

Eluvium

Answer 1

Most of FluentUI Components uses text-overflow: ellipsis. What you can do is to modify that "rule". Inside DetailsList you have onRenderDetailsHeader method which allows you to change header styles.

const onRenderDetailsHeader = (headerProps, defaultRender) => {
    if (!headerProps || !defaultRender) {
        //technically these may be undefined...
        return null;
    }
    return defaultRender({
        ...headerProps,
        styles: {
            root: {
                selectors: {
                    '.ms-DetailsHeader-cell': {
                        whiteSpace: 'normal',
                        textOverflow: 'clip',
                        lineHeight: 'normal',
                    },
                    '.ms-DetailsHeader-cellTitle': {
                        height: '100%',
                        alignItems: 'center',
                    },
                },
            },
        },
    })
}

<DetailsList
  ...
  onRenderDetailsHeader={onRenderDetailsHeader}
/>

Codepen working solution

Note:

Play around with minWidth, maxWidth props inside this._columns to get expected behavior.

Virgulate

Amazing solution, was searching for something like this since 3 hours – Strobile

If you're using TSX, the onRenderDetailsHeader function is of type IRenderFunction<IDetailsHeaderProps> – Overelaborate