Column Filter
For a better data analysis you can apply filters on specific columns to show most relevant data first. There are four types of filters you can apply to your grid.
Enable the filter option by setting the defaultColumnOptions method to true.
config = {
defaultColumnOptions: {
filter: {
enable: true,
type: 'conditional' // other value is 'value'
}
}
};Prerequisites
Before starting with the code, ensure that you have:
- Downloaded and installed FusionGrid Server, and the server is running
Conditional Filter
Use conditions and logical operations such as, or and and, to filter your data.
Below is the list of all applicable conditions based on column data type.
| Numeric | String | Date |
|---|---|---|
| = (equals/is) | is | is |
| ≠ (not equal to/is not) | is not | is not |
| < (less than) | contains | is before |
| > (greater than) | does not contain | is after |
| ≤ (less than or equal to) | starts with | is on and before |
| ≥ (greater than or equal to) | ends with | is on and after |
| ↔ (between/in range) | is empty | is within |
| is empty | is not empty | |
| is not empty |
Code
The following is an example of a grid with conditional filters:
var schema = [
{ name: "Season" },
{ name: "DateTime", type: "datetime" },
{ name: "HomeTeam" },
{ name: "AwayTeam" },
{ name: "FTHG", type: "number" },
{ name: "FTAG", type: "number" },
{ name: "FTR" }
];
var data = [
["1993-94", "1993-08-14T00:00:00Z", "Arsenal", "Coventry", 0, 3, "A"],
["1993-94", "1993-08-14T00:00:00Z", "Aston Villa", "QPR", 4, 1, "H"],
["1993-94", "1993-08-14T00:00:00Z", "Chelsea", "Blackburn", 1, 2, "A"],
["1993-94", "1993-08-14T00:00:00Z", "Liverpool", "Sheffield Weds", 2, 0, "H"],
["1993-94", "1993-08-14T00:00:00Z", "Man City", "Leeds", 1, 1, "D"],
["1993-94", "1993-08-14T00:00:00Z", "Newcastle", "Tottenham", 0, 1, "A"],
["1993-94", "1993-08-14T00:00:00Z", "Oldham", "Ipswich", 0, 3, "A"],
["1993-94", "1993-08-14T00:00:00Z", "Sheffield United", "Swindon", 3, 1, "H"],
["1993-94", "1993-08-14T00:00:00Z", "Southampton", "Everton", 0, 2, "A"],
["1993-94", "1993-08-14T00:00:00Z", "West Ham", "Wimbledon", 0, 2, "A"],
["1993-94", "1993-08-15T00:00:00Z", "Norwich", "Man United", 0, 2, "A"],
["1993-94", "1993-08-16T00:00:00Z", "Tottenham", "Arsenal", 0, 1, "A"],
["1993-94", "1993-08-17T00:00:00Z", "Everton", "Man City", 1, 0, "H"],
["1993-94", "1993-08-17T00:00:00Z", "Ipswich", "Southampton", 1, 0, "H"],
["1993-94", "1993-08-17T00:00:00Z", "Leeds", "West Ham", 1, 0, "H"],
["1993-94", "1993-08-17T00:00:00Z", "Wimbledon", "Chelsea", 1, 1, "D"],
["1993-94", "1993-08-18T00:00:00Z", "Blackburn", "Norwich", 2, 3, "A"],
["1993-94", "1993-08-18T00:00:00Z", "Coventry", "Newcastle", 2, 1, "H"],
[
"1993-94",
"1993-08-18T00:00:00Z",
"Man United",
"Sheffield United",
3,
0,
"H"
],
["1993-94", "1993-08-18T00:00:00Z", "QPR", "Liverpool", 1, 3, "A"],
[
"1993-94",
"1993-08-18T00:00:00Z",
"Sheffield Weds",
"Aston Villa",
0,
0,
"D"
],
["1993-94", "1993-08-18T00:00:00Z", "Swindon", "Oldham", 0, 1, "A"],
["1993-94", "1993-08-21T00:00:00Z", "Blackburn", "Oldham", 1, 0, "H"]
];
var container = document.getElementById("grid-container");
var dataStore = new FusionGrid.DataStore();
var dataTable = dataStore.createDataTable(data, schema, {
enableIndex: false
});
var grid = new FusionGrid(container, dataTable, {
defaultColumnOptions: {
searchable: true,
filter: true
}
});
grid.render();Below is how the grid displays:
Value Filter
This filter will allow users to select one or multiple values from the column to filter rows in the grid. Users can use clear option to clear the selection. Alternatively, they can use Select All option as well.
Code
The following is an example with a value filter configured.
var schema = [
{ name: "Season" },
{ name: "DateTime", type: "datetime" },
{ name: "HomeTeam" },
{ name: "AwayTeam" },
{ name: "FTHG", type: "number" },
{ name: "FTAG", type: "number" },
{ name: "FTR" }
];
var data = [
["1993-94", "1993-08-14T00:00:00Z", "Arsenal", "Coventry", 0, 3, "A"],
["1993-94", "1993-08-14T00:00:00Z", "Aston Villa", "QPR", 4, 1, "H"],
["1993-94", "1993-08-14T00:00:00Z", "Chelsea", "Blackburn", 1, 2, "A"],
["1993-94", "1993-08-14T00:00:00Z", "Liverpool", "Sheffield Weds", 2, 0, "H"],
["1993-94", "1993-08-14T00:00:00Z", "Man City", "Leeds", 1, 1, "D"],
["1993-94", "1993-08-14T00:00:00Z", "Newcastle", "Tottenham", 0, 1, "A"],
["1993-94", "1993-08-14T00:00:00Z", "Oldham", "Ipswich", 0, 3, "A"],
["1993-94", "1993-08-14T00:00:00Z", "Sheffield United", "Swindon", 3, 1, "H"],
["1993-94", "1993-08-14T00:00:00Z", "Southampton", "Everton", 0, 2, "A"],
["1993-94", "1993-08-14T00:00:00Z", "West Ham", "Wimbledon", 0, 2, "A"],
["1993-94", "1993-08-15T00:00:00Z", "Norwich", "Man United", 0, 2, "A"],
["1993-94", "1993-08-16T00:00:00Z", "Tottenham", "Arsenal", 0, 1, "A"],
["1993-94", "1993-08-17T00:00:00Z", "Everton", "Man City", 1, 0, "H"],
["1993-94", "1993-08-17T00:00:00Z", "Ipswich", "Southampton", 1, 0, "H"],
["1993-94", "1993-08-17T00:00:00Z", "Leeds", "West Ham", 1, 0, "H"],
["1993-94", "1993-08-17T00:00:00Z", "Wimbledon", "Chelsea", 1, 1, "D"],
["1993-94", "1993-08-18T00:00:00Z", "Blackburn", "Norwich", 2, 3, "A"],
["1993-94", "1993-08-18T00:00:00Z", "Coventry", "Newcastle", 2, 1, "H"],
[
"1993-94",
"1993-08-18T00:00:00Z",
"Man United",
"Sheffield United",
3,
0,
"H"
],
["1993-94", "1993-08-18T00:00:00Z", "QPR", "Liverpool", 1, 3, "A"],
[
"1993-94",
"1993-08-18T00:00:00Z",
"Sheffield Weds",
"Aston Villa",
0,
0,
"D"
],
["1993-94", "1993-08-18T00:00:00Z", "Swindon", "Oldham", 0, 1, "A"],
["1993-94", "1993-08-21T00:00:00Z", "Blackburn", "Oldham", 1, 0, "H"]
];
var container = document.getElementById("grid-container");
var dataStore = new FusionGrid.DataStore();
var dataTable = dataStore.createDataTable(data, schema, {
enableIndex: false
});
var grid = new FusionGrid(container, dataTable, {
defaultColumnOptions: {
searchable: true,
filter: {
enable: true,
type: "conditional"
}
}
});
grid.render();Below is how the grid displays:
For detailed information on the different methods and events to configure column filters, visit the Methods and Events page.