0

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!

R. Senterfeit
  • 33
  • 5

1 Answers1

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.

aug
  • 11,138
  • 9
  • 72
  • 93
  • Thank you!! I wasn't overriding the css correctly, but this worked (though the formatting is odd in the comments): `.ReactVirtualized__Table .ReactVirtualized__Table__headerTruncatedText { display: inline-block; max-width: 100%; white-space: normal; overflow: visible; }` – R. Senterfeit Sep 07 '17 at 21:29
  • 2
    Just to add onto what @aug said: Generally `react-virtualized` sets _functional styles_ only (eg position, width/height, etc). `Table` is the _only_ component that has presentational styles and those are stored in a separate CSS file that you can load (or not) depending on whether you want them. If you want to do your own thing with `Table` headers, your best bet might just be to fork the default stylesheet and modify it until you like it. – bvaughn Sep 07 '17 at 23:05