API / Plugins / Base / Filtering / Column Filter

ColumnFilterPlugin

The ColumnFilterPlugin from @omnigrid/column-filter-plugin adds a declarative column filter popup on top of the core filter engine (grid.setColumnFilter). It automatically detects each column’s data type (text, number, date, boolean or select) and renders the matching set of operators and input controls. The data type can be set explicitly via dataType on the column definition, and filtering can be disabled per column with filterable: false.

Live demo|NPM

Constructor

new ColumnFilterPlugin<T>(options?: ColumnFilterPluginOptions)

Options

Properties accepted by ColumnFilterPluginOptions.

PropertyDescription

debounceMs

numberdefault: 250

Debounce applied by the adapter to text inputs before the filter is applied.

Instance methods

openColumnFilter(columnId, anchor?): void

Opens the filter popup for a column; calling it again updates the popup in place. Columns with `filterable: false` are ignored.

closeColumnFilter(): void

Closes the filter popup, if open.

Types and Interfaces

ColumnFilterColumnDef

Column definition extensions added by the column filter plugin.

interface ColumnFilterColumnDef<T> {
    /** Nature of the values in this column. When omitted, the plugin infers it by sampling the data. */
    dataType?: ColumnDataType;
    /** Kind of filter UI rendered for this column. When omitted, it is derived from `dataType`. */
    filterType?: ColumnFilterType;
    /** Identifier of a custom filter registered with the filtering plugin. Required when `filterType` is `"custom"`. */
    filterTypeId?: string;
    /** Whether this column offers a filter menu. Set to `false` to opt the column out of filtering UI. @default true */
    filterable?: boolean;
    /** Custom subset of operators allowed for this column's filter menu. */
    allowedOperators?: FilterOperator[];
    /** Fixed option list used by the `"set"` filter. */
    filterOptions?: Array<{ label: string; value: any }>;
}