Vue Data GridFloating Filters

Version 36.2.0

Floating Filters are an additional row under the column headers where the user will be able to see and optionally edit the filters associated with each column.

Floating filters are activated by setting the property floatingFilter = true on the colDef:

<ag-grid-vue
    :columnDefs="columnDefs"
    /* other grid options ... */>
</ag-grid-vue>

this.columnDefs = [
    // column definition with floating filter enabled
    {
        field: 'country',
        filter: true,
        floatingFilter: true
    }
];

To have floating filters on for all columns by default, you should set floatingFilter on the defaultColDef. You can then disable floating filters on a per-column basis by setting floatingFilter = false on an individual colDef.

Floating filters depend on and co-ordinate with the main column filters. They do not have their own state, but rather display the state of the main filter and set state on the main filter if they are editable. For this reason, there is no API for getting or setting state of the floating filters.

Every floating filter takes a parameter to show/hide automatically a button that will open the main filter.

To see how floating filters work see Floating Filter Components.

The following example shows the following features of floating filters:

Text filter: has out of the box read/write floating filter (Athlete and Sport columns)
Set filter: has out of the box read-only floating filter (Country column)
The 'Print Country' button prints the country filter model to the developer console.
Date and Number filter: have out of the box read/write floating filters for all filters except when switching to in-range filtering, where the floating filter is read-only (Age and Date columns)
Columns with buttons containing 'apply' require the user to press ↵ Enter on the floating filter for the filter to take effect (Gold column). (Note: this does not apply to floating Date Filters, which are always applied as soon as a valid date is entered.)
Changes made directly to the main filter are reflected automatically in the floating filters (change any main filter)
The user can configure when to show/hide the button that shows the full filter (Silver and Bronze columns)
The Year column has a filter, but has the floating filter disabled
The Total column has no filter and therefore no floating filter either

main.ts

import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  DateFilterModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IDateFilterParams,
  INumberFilterParams,
  ModuleRegistry,
  NumberFilterModule,
  SetFilterHandler,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

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

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
  SetFilterModule,
  TextFilterModule,
  NumberFilterModule,
  DateFilterModule,
]);

const dateFilterParams: IDateFilterParams = {
  comparator: (filterLocalDateAtMidnight: Date, cellValue: string) => {
    const dateAsString = cellValue;
    if (dateAsString == null) return -1;
    const dateParts = dateAsString.split("/");
    const cellDate = new Date(
      Number(dateParts[2]),
      Number(dateParts[1]) - 1,
      Number(dateParts[0]),
    );
    if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
      return 0;
    }
    if (cellDate < filterLocalDateAtMidnight) {
      return -1;
    }
    if (cellDate > filterLocalDateAtMidnight) {
      return 1;
    }
    return 0;
  },
};

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div style="height: 100%; display: flex; flex-direction: column">
      <div>
        <span class="button-group">
          <button v-on:click="irelandAndUk()">Ireland &amp; UK</button>
          <button v-on:click="endingStan()">Countries Ending 'stan'</button>
          <button v-on:click="printCountryModel()">Print Country</button>
          <button v-on:click="clearCountryFilter()">Clear Country</button>
          <button v-on:click="destroyCountryFilter()">Destroy Country</button>
        </span>
        <span class="button-group">
          <button v-on:click="ageBelow25()">Age Below 25</button>
          <button v-on:click="ageAbove30()">Age Above 30</button>
          <button v-on:click="ageBelow25OrAbove30()">Age Below 25 or Above 30</button>
          <button v-on:click="ageBetween25And30()">Age Between 25 and 30</button>
          <button v-on:click="clearAgeFilter()">Clear Age Filter</button>
        </span>
        <span class="button-group">
          <button v-on:click="after2010()">Date after 01/01/2010</button>
          <button v-on:click="before2012()">Date before 01/01/2012</button>
          <button v-on:click="dateCombined()">Date combined</button>
          <button v-on:click="clearDateFilter()">Clear Date Filter</button>
        </span>
        <span class="button-group">
          <button v-on:click="sportStartsWithS()">Sport starts with S</button>
          <button v-on:click="sportEndsWithG()">Sport ends with G</button>
          <button v-on:click="sportsCombined()">Sport starts with S and ends with G</button>
        </span>
      </div>
      <div style="flex-grow: 1; height: 10px">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :defaultColDef="defaultColDef"
          :rowData="rowData"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", filter: "agTextColumnFilter" },
      { field: "age", filter: "agNumberColumnFilter" },
      { field: "country", filter: "agSetColumnFilter" },
      {
        field: "year",
        maxWidth: 120,
        filter: "agNumberColumnFilter",
        floatingFilter: false,
      },
      {
        field: "date",
        minWidth: 215,
        filter: "agDateColumnFilter",
        filterParams: dateFilterParams,
      },
      { field: "sport", filter: "agTextColumnFilter" },
      {
        field: "gold",
        filter: "agNumberColumnFilter",
        filterParams: {
          buttons: ["apply"],
        } as INumberFilterParams,
      },
      {
        field: "silver",
        filter: "agNumberColumnFilter",
        floatingFilterComponentParams: {},
        suppressFloatingFilterButton: true,
      },
      {
        field: "bronze",
        filter: "agNumberColumnFilter",
        floatingFilterComponentParams: {},
        suppressFloatingFilterButton: true,
      },
      { field: "total", filter: false },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 150,
      filter: true,
      floatingFilter: true,
      suppressHeaderMenuButton: true,
    });
    const rowData = ref<IOlympicData[]>(null);

    function irelandAndUk() {
      gridApi
        .value!.setColumnFilterModel("country", {
          values: ["Ireland", "Great Britain"],
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function clearCountryFilter() {
      gridApi.value!.setColumnFilterModel("country", null).then(() => {
        gridApi.value!.onFilterChanged();
      });
    }
    function destroyCountryFilter() {
      gridApi.value!.destroyFilter("country");
    }
    function endingStan() {
      const countriesEndingWithStan = gridApi
        .value!.getColumnFilterHandler<SetFilterHandler>("country")!
        .getFilterKeys()
        .filter(function (value: any) {
          return value.indexOf("stan") === value.length - 4;
        });
      gridApi
        .value!.setColumnFilterModel("country", {
          values: countriesEndingWithStan,
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function printCountryModel() {
      const model = gridApi.value!.getColumnFilterModel("country");
      if (model) {
        console.log("Country model is: " + JSON.stringify(model));
      } else {
        console.log("Country model filter is not active");
      }
    }
    function sportStartsWithS() {
      gridApi
        .value!.setColumnFilterModel("sport", {
          type: "startsWith",
          filter: "s",
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function sportEndsWithG() {
      gridApi
        .value!.setColumnFilterModel("sport", {
          type: "endsWith",
          filter: "g",
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function sportsCombined() {
      gridApi
        .value!.setColumnFilterModel("sport", {
          conditions: [
            {
              type: "endsWith",
              filter: "g",
            },
            {
              type: "startsWith",
              filter: "s",
            },
          ],
          operator: "AND",
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function ageBelow25() {
      gridApi
        .value!.setColumnFilterModel("age", {
          type: "lessThan",
          filter: 25,
          filterTo: null,
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function ageAbove30() {
      gridApi
        .value!.setColumnFilterModel("age", {
          type: "greaterThan",
          filter: 30,
          filterTo: null,
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function ageBelow25OrAbove30() {
      gridApi
        .value!.setColumnFilterModel("age", {
          conditions: [
            {
              type: "greaterThan",
              filter: 30,
              filterTo: null,
            },
            {
              type: "lessThan",
              filter: 25,
              filterTo: null,
            },
          ],
          operator: "OR",
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function ageBetween25And30() {
      gridApi
        .value!.setColumnFilterModel("age", {
          type: "inRange",
          filter: 25,
          filterTo: 30,
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function clearAgeFilter() {
      gridApi.value!.setColumnFilterModel("age", null).then(() => {
        gridApi.value!.onFilterChanged();
      });
    }
    function after2010() {
      gridApi
        .value!.setColumnFilterModel("date", {
          type: "greaterThan",
          dateFrom: "2010-01-01",
          dateTo: null,
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function before2012() {
      gridApi
        .value!.setColumnFilterModel("date", {
          type: "lessThan",
          dateFrom: "2012-01-01",
          dateTo: null,
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function dateCombined() {
      gridApi
        .value!.setColumnFilterModel("date", {
          conditions: [
            {
              type: "lessThan",
              dateFrom: "2012-01-01",
              dateTo: null,
            },
            {
              type: "greaterThan",
              dateFrom: "2010-01-01",
              dateTo: null,
            },
          ],
          operator: "OR",
        })
        .then(() => {
          gridApi.value!.onFilterChanged();
        });
    }
    function clearDateFilter() {
      gridApi.value!.setColumnFilterModel("date", null).then(() => {
        gridApi.value!.onFilterChanged();
      });
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowData,
      onGridReady,
      irelandAndUk,
      clearCountryFilter,
      destroyCountryFilter,
      endingStan,
      printCountryModel,
      sportStartsWithS,
      sportEndsWithG,
      sportsCombined,
      ageBelow25,
      ageAbove30,
      ageBelow25OrAbove30,
      ageBetween25And30,
      clearAgeFilter,
      after2010,
      before2012,
      dateCombined,
      clearDateFilter,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");

styles.css

.button-group {
    padding-bottom: 4px;
    display: block;
}

Provided Floating Filters Copy Link

All the default filters provided by the grid provide their own implementation of a floating filter. All you need to do to enable these floating filters is set the floatingFilter = true column property. The features of the provided floating filters are as follows:

Filter	Editable	Description
Text	Sometimes	Provides a text input field to display the filter value, or a read-only label if read-only.
Number	Sometimes	Provides a number input field to display the filter value (unless using Custom Number Support), or a read-only label if read-only.
Date	Sometimes	Provides a date input field to display the filter value, or a read-only label if read-only.
Set	No	Provides a read-only label by concatenating all selected values.

The floating filters for Text, Number and Date (the simple filters) are editable when the filter has one condition and one value. If the floating filter has a) two or more conditions or b) zero (custom option) or two ('inRange') values, the floating filter is read-only.

The screen shots below show example scenarios where the provided Number floating filter is editable and read-only.

One Value and One Condition - Editable
One Value and Two Conditions - Read-Only
Two Values and One Condition - Read-Only

Controlling Autocomplete on Floating Filters Copy Link

Browser autocomplete on grid inputs is controlled globally by enableInputAutoComplete and per input with browserAutoComplete parameters, see Input Fields for the full behaviour and the accepted values.

For floating filters specifically, browserAutoComplete can be set in two places: filterParams (shared with the parent filter's inputs, and inherited by the floating filter input) or floatingFilterComponentParams (as defined in ITextFloatingFilterParams and INumberFloatingFilterParams), which applies to the floating filter input only and takes precedence over the filterParams value.

Placeholder Text on Floating Filters Copy Link

By default, no placeholder text is displayed in floating filter inputs. Placeholder text can be set using the filterPlaceholder property of floatingFilterComponentParams (as found in ITextFloatingFilterParams and INumberFloatingFilterParams):

string | boolean

Placeholder text for the filter textbox. When set to true, inherits the placeholder text of the parent filter.

Custom Floating Filters Copy Link

In addition to the floating filters provided by the grid, you can also create your own Custom Floating Filter Components.

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Vue Data GridFloating Filters

Provided Floating Filters Copy Link

Controlling Autocomplete on Floating Filters Copy Link

Placeholder Text on Floating Filters Copy Link

Custom Floating Filters Copy Link