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.

Answer 2

In case someone needs this, for v5 the prop is called "headerHeight"

Answer 3

pass prop headerHeight to data grid like this headerHeight={yourdesiredheightinPX} by default height is 56px

Answer 4

Altering the ColumnHeader height in MUI DataGrid

 <StyledDataGrid
      rows={rows}
      columns={columns}
      pageSize={10}
      rowHeight={40} //for row height
      headerHeight={28} // for columnHeader height
      rowsPerPageOptions={[10]}
      checkboxSelection
      disableSelectionOnClick
      experimentalFeatures={{ newEditingApi: true }}
      components={{
        BaseCheckbox: StyledCheckbox,
        NoRowsOverlay: () => (