reactjs - Setting consistent rowHeight in AgGrid-React

Question

I'm using the ag-grid-community:^24.1.0 and ag-grid-react: ^24.1.1in the react application. When I set the rowHeight as 25, it is displayed as shown below.

<div className="ag-theme-alpine" style={ { height: 400, width: 600 } }>
            <AgGridReact rowSelection="multiple"
                rowData={rowData}
                rowHeight={25}>
                ...
            </AgGridReact>
        </div>

I tried setting div.ag-theme-alpine div.ag-cell{font-size: 12px !important;vertical-align: middle;} as told in some other posts but there is no change. However, when I remove the following property from the developer tool, it starts appearing fine.

I want to set the uniform rowHeight(other than the default). How can this be achieved?

Answer 1

You can set the row height to be static in the gridOptions or via the property rowHeight={25} the way you did. However, agGrid also has a hardcoded value for the line-height that makes the rows only accept single line text. changing the lineHeight, to something you prefer is the way to go if you want to start changing the rowHeight in addition to the fixed value.

Note: rowHeight field values don't work at all if you are in the infiniteRow model that is commonly used for server-side pagination because agGrid has problems calculating rowHeights and gridHeights if it doesn't know the full extent of the rows data.

if you want to change the lineHeight on all cells you can use the defaultColDef attribute cellClass and pass a class that forces the lineHeight

EDIT: here is how I do it, in the defaultColDef object :

defaultColDef: {
      ....
      cellClass:'cell-wrap-text',
      ....
}

then define that class like this:

.cell-wrap-text{
  white-space: normal !important;
  line-height: 23px !important;
}

the whitespace line will make your text break and go back to line, since agGrid doesn't allow that by default.

after doing so, you can set the rowHeight in the react component like you already did.