import React, { Component } from 'react';
import './App.css';
import '../node_modules/@blueprintjs/core/dist/blueprint.css';
import '../node_modules/@blueprintjs/table/dist/table.css';
import {Cell, ColumnHeaderCell, Column, Table, RenderMode} from '@blueprintjs/table';
const columns = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
class App extends Component {
state = {
shouldRenderHeaderContent: false,
}
renderColumnHeader = (a) => {
return (<ColumnHeaderCell key={a}>foo<br/>bar<br/>baz</ColumnHeaderCell>);
}
renderCell = (rowIndex) => {
return (<Cell key={rowIndex}>ABC</Cell>);
}
toggleHeaderContent = () => this.setState({shouldRenderHeaderContent: !this.state.shouldRenderHeaderContent})
render() {
return (
<div className="App">
<button onClick={this.toggleHeaderContent}>
Toggle Header Content
</button>
<Table
renderMode={RenderMode.NONE}
numRows={2000}>
{columns.map((c) => {
return (
<Column
key={c}
renderCell={this.renderCell}
renderColumnHeader={this.state.shouldRenderHeaderContent ? this.renderColumnHeader : undefined} />
);
})}
</Table>
</div>
);
}
}
export default App;
"@blueprintjs/core": "1.29.0",
"@blueprintjs/table": "1.26.0",

"@blueprintjs/core": "1.28.0",
"@blueprintjs/table": "1.25.0",

Basically, changes in the size of the header are not being rendered properly. Would also love to know if there is a better strategy than this:
renderColumnHeader={this.state.shouldRenderHeaderContent ? this.renderColumnHeader : undefined}
(I just want the original non-custom header cell content OR some custom content)
I think this was addressed in one of these https://github.com/palantir/blueprint/pull/1632 https://github.com/palantir/blueprint/pull/1663
Yep, will be fixed when https://github.com/palantir/blueprint/pull/1663 merges. :)
Thanks @llorca @cmslewis!