CODEWITHSUNDEEP
javascriptag-gridag-grid-react
wondernate
wondernate

Reputation: 344

ag-grid how do I set the floating filter height

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?

Upvotes: 3

Views: 4701

Answers (2)

KARTHIKEYAN.A
KARTHIKEYAN.A

Reputation: 20098

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>

Upvotes: 2

Pratik Bhat
Pratik Bhat

Reputation: 7614

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.

Upvotes: 3

Related Questions