or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

charts-visualization.mddata-processing.mdfiltering-search.mdimport-export.mdindex.mdrow-operations.mdselection-interaction.mdui-components.md
tile.json

filtering-search.mddocs/

Filtering and Search

Advanced filtering capabilities including set filters, multi-column filters, advanced filter builder, and find functionality for comprehensive data filtering and search.

Capabilities

Set Filter

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();

Multi Filter

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);

Advanced Filter

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" }
    ]
  }
});

Find and Replace

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();

Filter Tool Panel

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();

Types

// 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;
}