Alter Column Header height

Question

We are using react-data-grid (adazzle), and would like to do some styling adjustments to the table header.

We would like to adjust the headers so that they are about twice the hight of the rows in our table, like so :

I am guessing that we would approach this from the HeaderRow Component. However because there is zero documentation for this Component I have zero idea how to further approach this problem.

Answer 1

Buried in some forum somewhere I found the answer :

  render() {
    return (
      <ReactDataGrid
        onGridSort={this.handleGridSort}
        columns={this._columns}
        headerRowHeight={123}
        rowGetter={this.rowGetter}
        rowsCount={this.state.rows.length}
        // rowRenderer={RowRenderer}
        minHeight={500}/>);
  }

There is a flag headerRowHeight which you can set a numerical value to.

EDIT:

Looks like the property is now columnHeaderHeight

e.g.,

<ReactDataGrid
  ...
  columnHeaderHeight={123} />