How can I get a column header to wrap in react-virtualized?

Question

I have a react-virtualized Table with some lengthy column headers, and want the column headers to wrap rather than trail off with an ellipsis. Anyone know how to make this happen?

For reference, here's some example code:

makeTable = <AutoSizer>
    {({ width, height }) => (
        <Table ref={this.setTableRef.bind(this)}
            width={width}
            height={height}
            headerHeight={20}
            rowHeight={this._rowHeight.bind(this)}
            rowCount={this.props.reportRows.length}
            rowGetter={this._rowGetter.bind(this)}
            rowClassName={this._rowClassName.bind(this)}
        >
            <Column
                label='Super Long Column Header Name of Longness'
                dataKey='testCase'
                width={150}
                flexGrow={1}
                cellRenderer={this._testCaseCellRenderer.bind(this)}

            />

[truncated the code above]

As you can see, it's the label I need to wrap, but no style I apply is working, be it in the Column or the css. Help? Thanks!

Answer 1

I assume you are including the styles as specified in react-virtualized? For context, what is applying the style is this line in their stylesheet.

It looks like the className is hard injected when loading default render so you have to either override this style with your own style that is of the same name, define your own style that somehow can apply a style to this element with a higher CSS specificity or, overkill, define your own headerRenderer which Column provides a way to do.

Just an FYI -- naturally react-virtualized has a lot of its components in a certain way and the responsive aspect of it is true as well. I would recommend playing around in their playground via the CSS in Chrome Dev tools so if removing the wrap behaves as expected and it doesn't, you can see what you may need to change.