Advanced filtering capabilities including set filters, multi-column filters, advanced filter builder, and find functionality for comprehensive data filtering and search.
Enterprise set filter with checkbox selection, search functionality, and custom value handling.
/**
* Set filter with enterprise features for checkbox-based filtering
*/
interface ISetFilter {
/** Get the current filter model */
getModel(): ISetFilterModel | null;
/** Set the filter model */
setModel(model: ISetFilterModel | null): void;
/** Refresh the filter values */
refreshFilterValues(): void;
/** Get the current mini filter text */
getMiniFilter(): string;
/** Set the mini filter text */
setMiniFilter(newMiniFilter: string): void;
/** Get filter keys currently displayed */
getFilterKeys(): string[];
/** Get filter values currently displayed */
getFilterValues(): any[];
}
/**
* Set filter model configuration
*/
interface ISetFilterModel {
/** Filter type identifier */
filterType: "set";
/** Selected values array */
values: string[];
}
/**
* Set filter parameters for customization
*/
interface ISetFilterParams extends IFilterParams {
/** Values to display in filter */
values?: (string | number)[] | ((params: SetFilterValuesFuncParams) => void);
/** Function to get cell value for filtering */
cellRenderer?: ICellRendererComp | ICellRendererFunc | string;
/** Enable case-sensitive filtering */
caseSensitive?: boolean;
/** Function to format values for display */
valueFormatter?: (params: ValueFormatterParams) => string;
/** Enable mini filter search box */
suppressMiniFilter?: boolean;
/** Mini filter search delay in milliseconds */
miniFilterSearchByRefDataKey?: boolean;
}Usage Example:
import { SetFilterModule } from "ag-grid-enterprise";
const columnDefs: ColDef[] = [
{
field: "country",
filter: "agSetColumnFilter",
filterParams: {
values: ["USA", "UK", "France", "Germany", "Spain"],
cellRenderer: (params) => {
return `<span style="color: blue">${params.value}</span>`;
},
suppressMiniFilter: false,
caseSensitive: false
}
}
];
const gridOptions: GridOptions = {
modules: [SetFilterModule],
columnDefs
};
// Programmatic filter operations
const countryFilter = gridApi.getFilterInstance("country") as ISetFilter;
countryFilter.setModel({ filterType: "set", values: ["USA", "UK"] });
gridApi.onFilterChanged();Combine multiple filter types (set, number, text, date) for a single column with AND/OR logic.
/**
* Multi-column filter combining different filter types
*/
interface IMultiFilter {
/** Get child filter instance by index */
getChildFilterInstance(index: number): IFilterComp;
/** Get display name for the multi filter */
getFilterDisplayName(): string;
/** Get the filter model */
getModel(): IMultiFilterModel | null;
/** Set the filter model */
setModel(model: IMultiFilterModel | null): void;
}
/**
* Multi filter model with multiple conditions
*/
interface IMultiFilterModel {
/** Filter type identifier */
filterType: "multi";
/** Array of filter conditions */
conditions: IFilterModel[];
/** Operator connecting conditions */
operator: "AND" | "OR";
}
/**
* Multi filter parameters
*/
interface IMultiFilterParams extends IFilterParams {
/** Array of filter configurations */
filters: {
filter: string;
filterParams?: any;
display?: string;
}[];
}Usage Example:
import { MultiFilterModule } from "ag-grid-enterprise";
const columnDefs: ColDef[] = [
{
field: "age",
filter: "agMultiColumnFilter",
filterParams: {
filters: [
{
filter: "agNumberColumnFilter",
display: "Number Filter"
},
{
filter: "agSetColumnFilter",
display: "Set Filter",
filterParams: {
values: [18, 21, 25, 30, 35, 40]
}
}
]
}
}
];
// Access multi-filter programmatically
const ageFilter = gridApi.getFilterInstance("age") as IMultiFilter;
const numberFilter = ageFilter.getChildFilterInstance(0);
const setFilter = ageFilter.getChildFilterInstance(1);Visual filter builder with drag-and-drop interface for creating complex filter expressions.
/**
* Advanced filter builder for complex filtering expressions
*/
interface IAdvancedFilterModel {
/** Filter type identifier */
filterType: "advanced";
/** Root condition of the filter tree */
condition: AdvancedFilterCondition;
}
/**
* Advanced filter condition node
*/
interface AdvancedFilterCondition {
/** Filter type: join or column */
filterType: "join" | "column";
/** Join type for combining conditions */
type?: "AND" | "OR";
/** Child conditions for join nodes */
conditions?: AdvancedFilterCondition[];
/** Column key for column filters */
colId?: string;
/** Filter operation */
filter?: string;
/** Filter value */
value?: any;
/** Second filter value for range operations */
valueTo?: any;
}
/**
* Advanced filter parameters
*/
interface AdvancedFilterParams {
/** Whether to include column filter buttons */
includeHiddenColumns?: boolean;
/** Default join operator */
defaultJoinOperator?: "AND" | "OR";
}Usage Example:
import { AdvancedFilterModule } from "ag-grid-enterprise";
const gridOptions: GridOptions = {
modules: [AdvancedFilterModule],
enableAdvancedFilter: true,
advancedFilterModel: {
filterType: "advanced",
condition: {
filterType: "join",
type: "AND",
conditions: [
{
filterType: "column",
colId: "age",
filter: "greaterThan",
value: 25
},
{
filterType: "column",
colId: "country",
filter: "equals",
value: "USA"
}
]
}
}
};
// Programmatic advanced filter control
gridApi.setAdvancedFilterModel({
filterType: "advanced",
condition: {
filterType: "join",
type: "OR",
conditions: [
{ filterType: "column", colId: "sport", filter: "contains", value: "Swimming" },
{ filterType: "column", colId: "sport", filter: "contains", value: "Running" }
]
}
});Search functionality for finding and highlighting text across the entire grid.
/**
* Find service for searching grid content
* Note: Search/replace functionality requires Find Panel UI component
*/
interface IFindService {
/** Go to next match */
next(): void;
/** Go to previous match */
previous(): void;
/** Go to specific match by index */
goTo(index: number): void;
/** Clear active search */
clearActive(): void;
/** Refresh current search */
refresh(): void;
/** Check if current cell matches search */
isMatch(cell: CellPosition): boolean;
}
/**
* Find options for search configuration
*/
interface FindOptions {
/** Case sensitive search */
caseSensitive?: boolean;
/** Search entire words only */
wholeWord?: boolean;
/** Use regular expressions */
regExp?: boolean;
/** Search in specific columns only */
searchInCols?: string[];
}
/**
* Cell position for find operations
*/
interface CellPosition {
/** Row index */
rowIndex: number;
/** Row pinned state */
rowPinned: string | null;
/** Column */
column: Column;
}Usage Example:
import { FindModule } from "ag-grid-enterprise";
const gridOptions: GridOptions = {
modules: [FindModule],
// Enable find panel
onGridReady: (params) => {
// Show find panel
params.api.showFindPanel();
}
};
// Using the find panel (requires UI interaction)
const gridOptions: GridOptions = {
modules: [FindModule],
onGridReady: (params) => {
// Show the find panel UI for user interaction
params.api.showFindPanel();
}
};
// Programmatic navigation through search results
const findService = gridApi.getFindService();
// Navigate through results (requires active search from UI)
findService.next();
findService.previous();
findService.goTo(5); // Go to 5th match
// Clear active search
findService.clearActive();Visual interface for managing column filters with drag-and-drop functionality.
/**
* Filter tool panel for visual filter management
*/
interface IFiltersToolPanel {
/** Refresh the filters displayed */
refresh(): void;
/** Expand all filter groups */
expandAll(): void;
/** Collapse all filter groups */
collapseAll(): void;
/** Set filter groups expansion state */
setExpandedGroups(groupIds: string[]): void;
/** Get expanded filter groups */
getExpandedGroups(): string[];
}
/**
* Filter tool panel parameters
*/
interface IFiltersToolPanelParams {
/** Suppress expand/collapse all buttons */
suppressExpandAll?: boolean;
/** Suppress column filter search */
suppressFilterSearch?: boolean;
/** Suppress column selection checkboxes */
suppressSyncLayoutWithGrid?: boolean;
}Usage Example:
import { FiltersToolPanelModule } from "ag-grid-enterprise";
const gridOptions: GridOptions = {
modules: [FiltersToolPanelModule],
sideBar: {
toolPanels: [
{
id: "filters",
labelDefault: "Filters",
labelKey: "filters",
iconKey: "filter",
toolPanel: "agFiltersToolPanel",
toolPanelParams: {
suppressExpandAll: false,
suppressFilterSearch: false
}
}
]
}
};
// Access filter tool panel programmatically
const filtersToolPanel = gridApi.getToolPanelInstance("filters") as IFiltersToolPanel;
filtersToolPanel.expandAll();// Set filter value function parameters
interface SetFilterValuesFuncParams {
success: (values: string[]) => void;
colDef: ColDef;
}
// Filter model base interface
interface IFilterModel {
filterType: string;
}
// Multi filter model
interface IMultiFilterModel extends IFilterModel {
filterType: "multi";
conditions: IFilterModel[];
operator: "AND" | "OR";
}
// Advanced filter condition types
type AdvancedFilterCondition = JoinAdvancedFilterCondition | ColumnAdvancedFilterCondition;
interface JoinAdvancedFilterCondition {
filterType: "join";
type: "AND" | "OR";
conditions: AdvancedFilterCondition[];
}
interface ColumnAdvancedFilterCondition {
filterType: "column";
colId: string;
filter: string;
value?: any;
valueTo?: any;
}