ag-grid: Create a filter drop-down on column values?

I'm trying to add a dropdown filter to a column in an ag-grid. I've managed to get the column to display using this code (in an Angular 8 app):

columnDefs = [
{ headerName: 'Id' , field: 'id' , type: 'number' },
{ headerName: 'Message' , field: 'message' , type: 'text' },
{ headerName: 'Level' , field: 'level' , type: 'text' , width: 90,
filterParams: {
filterOptions: [
'empty',
{
displayKey: 'errors',
displayName: 'Errors',
test: (cellValue) => cellValue != null && cellValue === 'Error'
},
{
displayKey: 'info',
displayName: 'Information',
test: (cellValue) => cellValue != null && cellValue === 'Information'
},
{
displayKey: 'verbose',
displayName: 'Verbose',
test: (cellValue) => cellValue == null && cellValue === 'Verbose'
},
],
applyButton: true,
clearButton: true,
debounceMs: 200,
suppressAndOrCondition: true
}
},
{ headerName: 'Source' , field: 'source' , type: 'text' , width: 80 } ];


What this gives me is a dropdown when I click the hamburger menu on the column. But when I select one of the options from above I just get a text field below it where I have to enter text to filter. What I'm trying to do is just select one of the options, for example "Errors", and it automatically filters the grid by that test function. Is that possible? It seems very simple, but I've spent all day reading through documentation and trying different things and nothing seems to work...

Thanks!

Continue reading...