Vue Data GridFloating Filter Component

When a Vue component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell and row values available to you via this.params.

The interface for a custom floating filter component is as follows:

interface FloatingFilterDisplay {
    // Mandatory methods

    // A hook to perform any necessary operations when the column definition is updated.
    refresh(params: FloatingFilterDisplayParams): void;

    // Optional methods

    // Gets called every time the popup is shown, after the GUI returned in
    // getGui is attached to the DOM. This is useful for any logic that requires attachment
    // before executing, such as putting focus on a particular DOM element. 
    afterGuiAttached?(params?: IAfterGuiAttachedParams): void;

    // Gets called when the column is destroyed. If your custom filter needs to do
    // any resource cleaning up, do it here. A filter is NOT destroyed when it is
    // made 'not visible', as the GUI is kept to be shown again if the user selects
    // that filter again. The filter is destroyed when the column it is associated with is
    // destroyed, either when new columns are set into the grid, or the grid itself is destroyed.
    destroy?(): void;
}

Custom Floating Filter Parameters Copy Link

When a Vue component is instantiated the grid will make the grid APIs, a number of utility methods as well as the cell and row values available to you via this.params - the interface for what is provided is documented below.

If custom params are provided via the colDef.floatingFilterComponentParams property, these will be additionally added to the params object, overriding items of the same name if a name clash exists.