how to get filter input value in Ag grid filter with react?

Question

I'm trying to get the value a user types as input of a filter with AG grid, like in a simple input with onChange function.

i tried onFilterChanged, but couldn't catch the value.

<div style={containerStyle}>
          <div style={gridStyle} className="ag-theme-alpine">
            <AgGridReact
              rowData={all.flat().reverse()}
              columnDefs={columnDefs}
              groupIncludeFooter={true}
              groupIncludeTotalFooter={true}
              defaultColDef={defaultColDef}
              animateRows={true}
              onFilterChanged={(e: any) =>
                console.log("filter has changed", e)
              }
            ></AgGridReact>
          </div>
        </div>

thanks for your help.

Answer 1

we can use the params.api.getFilterModel() to get the filer value of individual column

const cellRender = params => {
    const filterInput = params.api.getFilterModel().Name?.filter
    const value = params.value

    if (filterInput && value) {
        return <Name name={String(value)} highlight={String(filterInput)} />
    }
    return value
}


export default [
    {
        cellRenderer: cellRender,
        field: 'name',
        headerName: 'Name',
        headerTooltip: 'Name',
        tooltipField: 'name'
    }
]

Answer 2

gridRef is necessary and loop all columns if any of each column contains a filtered string

html

    ref={gridRef}
    onFilterChanged={handleFilter}

jsx

const GridExample = () => {
    const gridRef = useRef();
///...columndefs and rowdata
}
this.handleFilter=()=> {
    alert(gridRef.current.api.getFilterInstance('athlete').appliedModel.filter);
  };

if second filter is active, gridRef.current.api.getFilterInstance('athlete').appliedModel.condition1.filter and gridRef.current.api.getFilterInstance('athlete').appliedModel.condition2.filter

working demo

Edited to Add: gridRef.current.api.getFilterModel() is possible which outputs json objects of all given filters.

{
            'athlete':
            {
                   condition1:
                   {
                          filterType: 'text',
                          type: 'contains',
                          filter: 'a'
                   },
                   condition2:
                   {
                          filterType: 'text',
                          type: 'contains',
                          filter: 'b'
                   },
                   filterType: "text",
                   operator: "AND"
            },
            'age':
            {
                   filterType: 'text',
                   type: 'contains',
                   filter: 'c'
            },
}

and if it is global filter (filtered from textbox outside grid), gridRef.current.api.filterManager.quickFilterParts is possible