Filtering in Vue Grid component
16 Mar 20239 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:
<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
andclearFiltering
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
.
<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 |
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 |
between | Filter the values based on the range between the start and end specified values. | Number | Date |
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.
<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>