JavaScript Data GridAdvanced Filter

Version 36.2.0

Enterprise

The Advanced Filter allows for complex filter conditions to be entered across columns in a single type-ahead input, as well as within a hierarchical visual builder.

main.ts

import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

interface IOlympicDataTypes extends IOlympicData {
  dateObject: Date;
  hasGold: boolean;
  dateTime: Date;
  dateTimeString: string;
  countryObject: {
    name: string;
  };
}

let gridApi: GridApi<IOlympicDataTypes>;

const gridOptions: GridOptions<IOlympicDataTypes> = {
  columnDefs: [
    { field: "athlete" },
    { field: "age", minWidth: 100 },
    { field: "hasGold", minWidth: 100, headerName: "Gold" },
    { field: "dateObject", headerName: "Date" },
    { field: "date", headerName: "Date (String)" },
    {
      field: "dateTime",
      headerName: "DateTime",
      cellDataType: "dateTime",
      minWidth: 250,
    },
    { field: "dateTimeString", headerName: "DateTime (String)", minWidth: 250 },
    { field: "countryObject", headerName: "Country" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 180,
    filter: true,
  },
  dataTypeDefinitions: {
    object: {
      baseDataType: "object",
      extendsDataType: "object",
      valueParser: (params) => ({ name: params.newValue }),
      valueFormatter: (params) =>
        params.value == null ? "" : params.value.name,
    },
  },
  enableAdvancedFilter: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicDataTypes[]) =>
    gridApi!.setGridOption(
      "rowData",
      data.map((rowData) => {
        const dateParts = rowData.date.split("/");
        const [year, month, day] = dateParts
          .reverse()
          .map((e) => parseInt(e, 10));
        const [h, m, s] = [
          Math.floor(window.agRandom() * 24),
          Math.floor(window.agRandom() * 60),
          Math.floor(window.agRandom() * 60),
        ];
        const paddedDateTimeStrings = [month, day, h, m, s].map((e) =>
          e.toString().padStart(2, "0"),
        );
        const dateString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}`;
        const dateTimeString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}T${paddedDateTimeStrings.slice(2).join(":")}`;
        return {
          ...rowData,
          date: dateString,
          dateObject: new Date(year, month - 1, day),
          dateTimeString,
          dateTime: new Date(year, month - 1, day, h, m, s),
          countryObject: {
            name: rowData.country,
          },
          hasGold: rowData.gold > 0,
        };
      }),
    ),
  );

index.html

<div id="myGrid" style="height: 100%"></div>

The Advanced Filter is enabled by setting the property enableAdvancedFilter = true. By default, the Advanced Filter is displayed between the column headers and the grid rows. It can instead be displayed outside of the grid by setting an Advanced Filter Parent. The buttons shown alongside the input can be customised.

const gridOptions = {
    enableAdvancedFilter: true,
    defaultColDef: {
        // Include all columns in the Advanced Filter
        filter: true,
    },

    // other grid options ...
}

Advanced Filter and Column Filters cannot be active at the same time. Enabling Advanced Filter will disable Column Filters.

Advanced Filter Input Copy Link

The example below demonstrates the Advanced Filter:

Start typing athlete into the Advanced Filter input. As you type, the list of suggested column names will be filtered down.
Select the Athlete entry by pressing ↵ Enter or ⇥ Tab, or using the mouse to click on the entry.
Select the contains entry in a similar way.
After the quote, type michael followed by an end quote (").
Press ↵ Enter or click the Apply button to execute the filter.
Try out each of the columns to see how the different Cell Data Types are handled.
Complex filter expressions can be built up by using AND and OR along with brackets - ( and ).

main.ts

import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

interface IOlympicDataTypes extends IOlympicData {
  dateObject: Date;
  hasGold: boolean;
  dateTime: Date;
  dateTimeString: string;
  countryObject: {
    name: string;
  };
}

let gridApi: GridApi<IOlympicDataTypes>;

const gridOptions: GridOptions<IOlympicDataTypes> = {
  columnDefs: [
    { field: "athlete" },
    { field: "age", minWidth: 100 },
    { field: "hasGold", minWidth: 100, headerName: "Gold" },
    { field: "dateObject", headerName: "Date" },
    { field: "date", headerName: "Date (String)" },
    {
      field: "dateTime",
      headerName: "DateTime",
      cellDataType: "dateTime",
      minWidth: 250,
    },
    { field: "dateTimeString", headerName: "DateTime (String)", minWidth: 250 },
    { field: "countryObject", headerName: "Country" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 180,
    filter: true,
  },
  dataTypeDefinitions: {
    object: {
      baseDataType: "object",
      extendsDataType: "object",
      valueParser: (params) => ({ name: params.newValue }),
      valueFormatter: (params) =>
        params.value == null ? "" : params.value.name,
    },
  },
  enableAdvancedFilter: true,
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicDataTypes[]) =>
    gridApi!.setGridOption(
      "rowData",
      data.map((rowData) => {
        const dateParts = rowData.date.split("/");
        const [year, month, day] = dateParts
          .reverse()
          .map((e) => parseInt(e, 10));
        const [h, m, s] = [
          Math.floor(window.agRandom() * 24),
          Math.floor(window.agRandom() * 60),
          Math.floor(window.agRandom() * 60),
        ];
        const paddedDateTimeStrings = [month, day, h, m, s].map((e) =>
          e.toString().padStart(2, "0"),
        );
        const dateString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}`;
        const dateTimeString = `${year}-${paddedDateTimeStrings[0]}-${paddedDateTimeStrings[1]}T${paddedDateTimeStrings.slice(2).join(":")}`;
        return {
          ...rowData,
          date: dateString,
          dateObject: new Date(year, month - 1, day),
          dateTimeString,
          dateTime: new Date(year, month - 1, day, h, m, s),
          countryObject: {
            name: rowData.country,
          },
          hasGold: rowData.gold > 0,
        };
      }),
    ),
  );

index.html

<div id="myGrid" style="height: 100%"></div>

Advanced Filter Builder Copy Link

As well as typing into the Advanced Filter input, Advanced Filters can also be set by using the Advanced Filter Builder. This displays a hierarchical view of the filter, and allows the different filter parts to be set using dropdowns and inputs. It also allows for filter conditions to be added, deleted and reordered.

The Advanced Filter Builder can be launched by clicking the Builder button next to the Advanced Filter input. It can also be shown and hidden via the API, and its options customised, as described in Advanced Filter Builder.

The following example demonstrates the Advanced Filter Builder:

Click on any of the dropdown pills to change the join operators, columns and filter options.
Click on the value pills to change the filter values.
Use the drag handles to move the filter conditions or groups around.
Use the add and remove buttons to create new conditions or delete existing ones.
If the filter is valid (and does not match the already applied filter), click the Apply button to apply the filter.

main.ts

import {
  AdvancedFilterModel,
  ClientSideRowModelModule,
  FirstDataRenderedEvent,
  GridApi,
  GridOptions,
  GridStateModule,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  AdvancedFilterModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  GridStateModule,
  AdvancedFilterModule,
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const initialAdvancedFilterModel: AdvancedFilterModel = {
  filterType: "join",
  type: "AND",
  conditions: [
    {
      filterType: "join",
      type: "OR",
      conditions: [
        {
          filterType: "number",
          colId: "age",
          type: "greaterThan",
          filter: 23,
        },
        {
          filterType: "text",
          colId: "sport",
          type: "endsWith",
          filter: "ing",
        },
      ],
    },
    {
      filterType: "text",
      colId: "country",
      type: "contains",
      filter: "united",
    },
  ],
};

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete" },
    { field: "country" },
    { field: "sport" },
    { field: "age", minWidth: 100 },
    { field: "gold", minWidth: 100 },
    { field: "silver", minWidth: 100 },
    { field: "bronze", minWidth: 100 },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 180,
    filter: true,
  },
  enableAdvancedFilter: true,
  initialState: {
    filter: {
      advancedFilterModel: initialAdvancedFilterModel,
    },
  },
  onFirstDataRendered: (params: FirstDataRenderedEvent) => {
    params.api.showAdvancedFilterBuilder();
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));

index.html

<div id="myGrid" style="height: 100%"></div>

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Next Steps Copy Link

Columns & Filter Options - which columns appear, how they are named, the filter options each offers, and how each Cell Data Type is compared.
Input & Builder - configuring the Advanced Filter, its parent element and the Advanced Filter Builder.
Custom Filter Options - offering Custom Filter Options in the Advanced Filter.
Filter Model / API - reading and setting the Advanced Filter Model.
Server-Side Row Model - using the Advanced Filter with the Server-Side Row Model instead of the Client-Side Row Model.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridAdvanced Filter

Advanced Filter Input Copy Link

Advanced Filter Builder Copy Link

Next Steps Copy Link