First Name
Last Name
Product
Order Date
Quantity
Unit Price
Beate
Wilson
Espresso Truffle
31-July-2016
2
$1.75
Andrew
Rossi
Doubleshot Espresso
01-November-2016
2
$3.30
Beate
Saavedra
Black Tea
22-June-2016
6
$2.25
Andrew
Devling
Doubleshot Espresso
20-September-2016
2
$3.30
Andrew
Petersen
Caffe Espresso
02-August-2016
10
$3.00
Andrew
Nagase
Caffe Espresso
02-March-2016
3
$3.00
Andrew
Saavedra
Green Tea
19-May-2016
2
$1.50
Andrew
Winkler
Espresso Truffle
24-April-2016
10
$1.75
Beate
Rossi
Cappuccino
19-January-2016
7
$5.00
Beate
Bein
White Chocolate Mocha
15-October-2016
10
$3.60
Andrew
Rossi
Caffe Americano
23-July-2016
5
$2.50
Beate
Wilson
Espresso con Panna
30-September-2016
7
$3.25
Remove Filter
Event Log:
Filter Column: First Name






Vue Grid simple filtering

In order to activate the filtering feature you have to move the cursor over a column header and click the dropdown button to open the filtering menu. JQWidgets Grid for Vue.js supports all the important row filtering conditions such as: contains, contains with a match case, empty, starts with, ends with, equals, equals with a match case and is null. The filtered value can be string, number or date

Custom filter menus and row filters

Our Vue grid can have different filtering menu types. There are several built-in filtering menus amongst which is the Textboxes filter. This type of filter is very useful when you want to preset the values with which to do the filtering. To create custom filter menus, you will have to override the built-in Filter Menu by implementing the "createfilterpanel" function. The filter row option gives the capability to place a row having all the filters below the column header row.

Excel-like filters and filter conditions

With our grid Vue grid you can implement also excel like filtering which represents a list box with check boxes on the left of the items. In addition to that all the conditions available in the columns popup menu can be customized.

Date and range filters

One additional advanced feature is the capability to have date and range filters with a calendar. Using this option you can filter dates by using all the available options in our advanced calendar component.