Filtering in Vue Grid component

13 Apr 202312 minutes to read

Filtering allows you to view particular records based on filter criteria. To enable filtering in the Grid, set the allowFiltering to true. Filtering options can be configured through filterSettings. To use filter, inject Filter module in the provide section.

To get start quickly with Filtering Options, you can check on this video:

app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowFiltering='true' height='273px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data
    };
  },
  provide: {
    grid: [Filter]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

You can apply and clear filtering, by using filterByColumn and clearFiltering methods.

To disable Filtering for a particular column, by specifying columns.allowFiltering to false.

Initial filter

To apply the filter at initial rendering, set the filter predicate object in filterSettings.columns.

app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      filterOptions: {
            columns: [{ field: 'ShipCity', matchCase: false, operator: 'startswith', predicate: 'and', value: 'reims' },
            { field: 'ShipName', matchCase: false, operator: 'startswith', predicate: 'and', value: 'Vins et alcools Chevalier' }]
      }
    };
  },
  provide: {
    grid: [Filter]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

Filter operators

The filter operator for a column can be defined in filterSettings.columns.operator property.

The available operators and its supported data types are,

Operator	Description	Supported Types
startsWith	Checks whether a value begins with the specified value.	String
endsWith	Checks whether a value ends with specified value.	String
contains	Checks whether a value contains with specified value.	String
doesnotstartwith	Checks whether the value does not begin with the specified value.	String
doesnotendwith	Checks whether the value does not end with the specified value.	String
doesnotcontain	Checks whether the value does not contain the specified value.	String
equal	Checks whether a value equal to specified value.	String \| Number \| Boolean \| Date
notEqual	Checks whether a value not equal to specified value.	String \| Number \| Boolean \| Date
greaterThan	Checks whether a value is greater than with specified value.	Number \| Date
greaterThanOrEqual	Checks whether a value is greater than or equal to specified value.	Number \| Date
lessThan	Checks whether a value is less than with specified value.	Number \| Date
lessThanOrEqual	Checks whether a value is less than or equal to specified value.	Number \| Date
isnull	Returns the values that are null.	String \| Number \| Date
isnotnull	Returns the values that are not null.	String \| Number \| Date
isempty	Returns the values that are empty.	String
isnotempty	Returns the values that are not empty.	String
between	Filter the values based on the range between the start and end specified values.	Number \| Date

Wildcard and LIKE operator filter

Wildcard and LIKE filter operators filters the value based on the given string pattern, and they apply to string-type columns. But it will work slightly differently.

Wildcard filtering

The Wildcard filter can process one or more search patterns using the “*” symbol, retrieving values matching the specified patterns.

The Wildcard filter option is supported for the DataGrid that has all search options.

For example:

Operator	Description
a*b	Everything that starts with “a” and ends with “b”.
a*	Everything that starts with “a”.
*b	Everything that ends with “b”.
a	Everything that has an “a” in it.
ab*	Everything that has an “a” in it, followed by anything, followed by a “b”, followed by anything.

WildcardFilter

LIKE filtering

The LIKE filter can process single search patterns using the “%” symbol, retrieving values matching the specified patterns. The following Grid features support LIKE filtering on string-type columns:

Filter Menu
Filter Bar with the filterSettings.showFilterBarOperator property enabled on the Grid filterSettings.
Custom Filter of Excel filter type.

For example:

Operator	Description
%ab%	Returns all the value that are contains “ab” character.
ab%	Returns all the value that are ends with “ab” character.
%ab	Returns all the value that are starts with “ab” character.

LIKEFilter

By default, the filterSettings.columns.operator value is equal.

Diacritics filter

By default, grid ignores diacritic characters while filtering. To include diacritic characters, set the filterSettings.ignoreAccent as true.

In the following sample, type mun in Ship City column to filter diacritic characters.

app.vue
<template>
    <div id="app">
        <ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                <e-column field='ShipName' headerText='Ship Name' width=100></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      filterOptions: {
        ignoreAccent: true
      }
    };
  },
  provide: {
    grid: [Filter]
  }
}
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>