javascript - ag-grid how do I set the floating filter height - Stack Overflow

Anyone know how to set the floating filter height?

I have looked through all the documentation and I can't see anything. The next thing I am looking at is tweaking the theme. But so far no luck there either.

I looked at the css in dev tools and found that it didn't have a class I could style. The tag has a manual style applied to it.

<div class="ag-header-row" role="presentation" 
style="top: 30px;height: 56px;width: 1603px;">

So I don't believe I can't hack it with a class or a template override. Anyone else know how to do this?

Anyone know how to set the floating filter height?

I have looked through all the documentation and I can't see anything. The next thing I am looking at is tweaking the theme. But so far no luck there either.

I looked at the css in dev tools and found that it didn't have a class I could style. The tag has a manual style applied to it.

<div class="ag-header-row" role="presentation" 
style="top: 30px;height: 56px;width: 1603px;">

So I don't believe I can't hack it with a class or a template override. Anyone else know how to do this?

• javascript
• ag-grid
• ag-grid-react

Share Follow edited Jun 2, 2022 at 14:06 KARTHIKEYAN.A 20.2k1010 gold badges137137 silver badges150150 bronze badges asked Aug 7, 2019 at 19:16 wondernatewondernate 34411 gold badge77 silver badges1717 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

This can be achieved using gridOptions.floatingFiltersHeight config.
Here is an example from ag grid documentation.

As per docs-

floatingFiltersHeight - The height for the row containing the floating filters. If not specified the default is 20px.

we can apply directly apply in <AgGridReact> tag, floatingFiltersHeight={20} as property in the following way

<AgGridReact
   rowStyle={rowStyle}
   ref={gridRef}
   columnDefs={columnDefs}
   rowData={rowData}
   headerHeight={20}
   rowHeight={20}
   floatingFiltersHeight={20} // floatingFiltersHeight applied
   defaultColDef={defaultColDef}
   onGridReady={onGridReady}
   onFilterChanged={()=> setRow(gridRef.current.gridOptions.api.getDisplayedRowCount())}
></AgGridReact>