CODEWITHSUNDEEP
reactjsreact-data-grid
Oliver Watkins
Oliver Watkins

Reputation: 13539

Alter Column Header height

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 :

enter image description here

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.

Upvotes: 6

Views: 8661

Answers (4)

Oliver Watkins
Oliver Watkins

Reputation: 13539

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} />

Upvotes: 10

Fathima Irfana
Fathima Irfana

Reputation: 99

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: () => (

Upvotes: 0

Rana Faraz
Rana Faraz

Reputation: 308

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

Upvotes: 0

Clom
Clom

Reputation: 371

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

Upvotes: 5

Related Questions