I have created a react datagrid which includes the following column definition which sets up a filter on the column "shares" with 3 filtering options. This works perfectly well:
{
id: "shares",
header: [
"Shares",
{
filter: {
type: "richselect",
config: {
options: [
{ id: 1, label: "Hide Zero"},
{ id: 2, label: "Include Zero"},
{ id: 3, label: "Zero Only"}
],
handler: (value, filter) => {
if (!filter) return true;
switch (filter) {
case 1:
return parseFloat(value) > 0.00001;
case 2:
return true;
case 3:
return parseFloat(value) <= 0.00001
default:
return true;
}
}
}
}
}
],
flexgrow: 16,
editor: {
type: "text",
config: {
type: "number",
},
},
sort: true,
resize: true
}
Next, I want option 1 to be selected when the grid is first rendered. To do this I have added the following to the return section of my function component:
filterValues={{shares: 1}}
Again this works because the selected filter is now displayed in the column header.
The problem is that the filter is not filtering. I need a way to fire the filter to implement the function built into the header definition. I can find examples where an external component is used to fire an external filter, but I can't find anything which details how to fire a filter function built into the column header.
Can anyone please help?
