custom filter ag grid react - reactjs

Question

I was trying to implement a custom DropDown filter in ag grid using React.
The link I followed is link
I was able to create the filter, however the filter doesnot appear by default. As a user, we need to click the 3 arrow icon next to the column header and then the filter appears.
Is there a way to display the custom filter dropDown by default?

Answer 1

I hope Floating filters can help you here.
Check this example in ag-grid documentation
filter: "agNumberColumnFilter",
floatingFilterComponent: "sliderFloatingFilter",
floatingFilterComponentParams: {
maxValue: 5,
suppressFilterButton: true
},
The example shows sliderFloatingFilter, to make it a dropdown filter, I think you need to create custom component for it.
Have a look at how ag-grid team has made TextFloatingFilterComp, DateFloatingFilterComp, NumberFloatingFilterComp etc. on GitHub code
Hope this helps.

Answer 2

I achieved dropdown/enum filter using this column configuration. I my case, I was trying to add a boolean filter.
Here is complete example
https://codesandbox.io/s/ag-grid-react-enum-filter-q4er8?file=/src/App.js:1572-1599
const getEnumColumnParams = (enumMap) => {
return {
cellRenderer: (params) => {
if (!params.data) return "";
const { value } = params;
return enumMap[value];
},
filterParams: {
buttons: ['reset', 'apply'],
closeOnApply: true,
filterOptions: [
"empty",
...Object.keys(enumMap).map(key => {
return {
displayKey: key,
displayName: enumMap[key],
test: function (filterValue, cellValue) {
return cellValue === true;
},
hideFilterInput: true,
};
})
],
suppressAndOrCondition: true,
},
};
};
const boolEnum = {
true: 'Yes',
false: 'No'
};
const colorEnum = {
'#ff00000': 'Red',
'#00ff00': 'Green',
'#0000ff': 'Blue',
};
const columnDefs = [
{
field: 'available',
...getEnumColumnParams(boolEnum),
},
{
field: 'color',
...getEnumColumnParams(colorEnum),
}
];
Or you can create column types and assign type: 'boolColumn' etc in column definition like I did in above codesandbox example