Show filter value in AgGrid - reactjs

Question

I'm using a custom CategoryFilter for my categories AgGrid:
const columnDefs = [
{
field: 'categoryId',
headerName: t('category', { ns: 'common' }),
cellRendererSelector: (params: ICellRendererParams<IProduct>) => ({
component: CategoryColumn,
params: {
...params,
defaultLanguage
}
}),
filter: CategoryFilter,
floatingFilterComponentParams: {
suppressFilterButton: false,
},
}
]
When I filter by category, I can enter the value in the input field, but it's still not showing up under the column's name:
How do I display the selected category under the "Category" column title?

Answer 1

You can pass the <CategoryColumn/> reference to the parent component via forwardRef and access the parent model's value via function params of useImperativeHandle inside the <CategoryColumn/>.
Example
CategoryColumn
import React, {
Fragment,
forwardRef,
useImperativeHandle,
useRef,
} from 'react';
import { IFloatingFilterParams } from 'ag-grid-community';
export default forwardRef((props: IFloatingFilterParams<any>, ref) => {
const inputRef = useRef<HTMLInputElement>(null);
// expose AG Grid Filter Lifecycle callbacks
useImperativeHandle(ref, () => {
return {
onParentModelChanged(parentModel: number | null) {
console.log(parentModel)
// When the filter is empty we will receive a null value here
if (parentModel == null) {
inputRef.current!.value = '';
} else {
inputRef.current!.value = parentModel + '';
}
},
};
});
return (
<Fragment>
>{' '}
<input
ref={inputRef}
style={{ width: '30px' }}
type="number"
min="0"
/>
</Fragment>
);
});
index.tsx
...
const [columnDefs, setColumnDefs] = useState<ColDef[]>([
{ field: 'athlete', filter: 'agTextColumnFilter' },
{
field: 'gold',
floatingFilterComponent: NumberFloatingFilterComponent,
floatingFilterComponentParams: {
suppressFilterButton: true,
},
filter: NumberFilterComponent,
},
]);
const defaultColDef = useMemo<ColDef>(() => {
return {
filter: true,
floatingFilter: true,
};
}, []);
...
Have read of Ag-grid Floating Filter!