title: Is there a way to implement grid header with dynamic height using react-virtualized?
body: <p>I'm developing a data grid component based on react-virtualized. It's supposed to have a fixed header with resizable columns. I want the header to change its height according to the header cells content. I'm using <a href="https://github.com/bvaughn/react-virtualized/blob/master/docs/CellMeasurer.md" rel="nofollow noreferrer">CellMeasurer</a> to calculate cells height and update height of the header.</p>
  
  <p>The problem is that cell sizes are calculated after the cells are rendered (afaik), so I have to call <code>forceUpdate</code> inside of the header's <code>render</code> if height has been changed.</p>
  
  <p>here is how <code>render</code> looks like (complete example is <a href="https://codesandbox.io/s/88j0vo10k2" rel="nofollow noreferrer">here</a>):</p>
  
  <pre><code>render() {
      const height = this._cache.rowHeight({ index: 0 });
      console.log('render', height, this.props.sizes);
      setTimeout(() =&gt; {
        if (height !== this._cache.rowHeight({ index: 0 })) {
          console.log('forceUpdate', this._cache.rowHeight({ index: 0 }))
          this.forceUpdate()
        }
      }, 0)
  
      return (
        &lt;Grid 
          ref={ref =&gt; this._grid = ref}
          deferredMeasurementCache={this._cache}
          width={1500}
          height={height}
          columnCount={5}
          columnWidth={this.columnWidth}
          rowCount={1}
          rowHeight={this._cache.rowHeight}
          cellRenderer={this.renderCell}
        /&gt;
      );
    }
  </code></pre>
  
  <p>so the question is how do I avoid <code>forceUpdate</code>? Is there a cleaner way to implement grid header with dynamic height using react-virtualized?</p>