I am using AG Grid v31.3.2 with React and only JavaScript.

I am specifying the following 5 values to be displayed by default:

• Approved
• In Process
• Passed Back
• Recalled
• Submitted

I do so with the following function, which is passed to a prop of the AgGrid component of the same name.

    // This function includes the statuses that are to be displayed by default. Voided and Rejected are omitted.
    const onGridReady = useCallback((gridOptions) => {
        gridOptions.api.setColumnFilterModel("changeRequestDetailStatus",
            { values: [workflowResources.APPROVED, workflowResources.IN_PROCESS, workflowResources.PASSED_BACK, workflowResources.RECALLED, workflowResources.SUBMITTED] })
            .then(() => gridOptions.api.onFilterChanged());
    }, []);

Everything is fine if at least one of those values is already in the grid. For instance, if a row moves from the Submitted to the Approved status, and there is at least one other row with a status of Approved, then the refreshed grid will display my Approved row at once.

The problem occurs when there is not already a row with a status of Approved. The grid filter options are populated only by the subset of the specified values that are among the existing values of the rows in the grid. So we might at the start have:

• In Process
• Passed Back
• Submitted

as our filter options, but no Approve.

When a row moves from Submitted to Approved, it is not displayed by default. In this case, the option for Approved has been added to the filter, but it is deselected by default.

A refresh of the grid fixes the issue.

I would like for Approve, and indeed any of the five default statuses, to be immediately unfiltered as soon as the grid updates. Do I possibly need another function passed as a prop to the AgGrid component? I have looked here:

https://www.ag-grid.com/javascript-data-grid//grid-events/

but don’t know which one I want.