You can apply certain filters to a pivot table in order to view only the required information while hiding the rest of the data.
You can apply Row and Column Fields filter when the data of rows or columns needs to be filtered. The following image shows the filter applied on a pivot table to show the quantity for only East region.
The following example code shows how to filter the Region column to show only East region's data.
Javascript |
Copy Code
|
---|---|
// add filter field myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.filterField); let itemList = ["East"]; myPivotTable.labelFilter("Region", { textItem: { list: itemList, isAll: false } }); |
The value filter can be used to filter the value based fields in a pivot table based on summary values (like sum, count, max, min, average etc.). The following image shows the value filter applied on a pivot table to show the 'Sum of quantity' of Category column with values greater than 2000.
The following example code shows how to apply value filter to display 'sum of quantity' greater than 2000.
Javascript |
Copy Code
|
---|---|
// add filter field myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.filterField); // apply Value Filter for "Sum of quantity" greater than 2000 using FilterInfo let valueFilter = { condition: { conType: GC.Pivot.PivotConditionType.value, val: [2000], operator: 2 }, conditionByName: "Sum of quantity" }; myPivotTable.valueFilter("Category", valueFilter); |
The label filter can be used to filter row label items. It provides different options based on the data type of the field to be filtered. For example, for string or number data type, the options provided are equals, does not equals, begin with, contains, greater than etc. whereas for date data type, the options provided are before, after, tomorrow, next week etc. The following example demonstrates how to apply a label filter to "Region" column field to display city which starts with “S”.
The following sample code shows how to apply a label filter for city which starts with "S".
Javascript |
Copy Code
|
---|---|
// add filter field myPivotTable.add("OrderDate", "OrderDate", GC.Spread.Pivot.PivotTableFieldType.filterField); // apply Label Filter for 'City' names starting with 'S'using FilterInfo let labelFilter = { condition: { conType: GC.Pivot.PivotConditionType.caption, val: 'S', operator: 2 } }; myPivotTable.labelFilter("City", labelFilter); |
You can also use the manual filter in place of defining conditions for label filter. The following image shows manual filter applied to display the data for 'Jersey' and 'Seattle' cities.
The following code example shows how to apply manual filter.
Javascript |
Copy Code
|
---|---|
// add manual filter let parent = { textItem: { list: ["Jersey", "Seattle"], isAll: false } }; myPivotTable.labelFilter("City", parent); |
You can also choose to apply manual and condition based label filters together by setting the allowMultipleFiltersPerField option to true. The following example demonstrates how to apply multiple filters in a pivot table.
The following example shows how to apply multiple filters in a pivot table.
Javascript |
Copy Code
|
---|---|
myPivotTable.options.allowMultipleFiltersPerField = true; // When allowMultipleFiltersPerField is set, the two filters i.e. both take effect var labelFilter = { textItem: { list: ["Jersey", "San Francisco"], isAll: false }, condition: { conType: GC.Pivot.PivotConditionType.caption, operator: GC.Pivot.PivotCaptionFilterOperator.beginsWith, val: 'S' } }; myPivotTable.labelFilter("City", labelFilter); |
A date type filter can be used to specify a criteria that is applied to date type items of the pivot table. The following image shows the date type filter applied on a pivot table to show quarterly data.
The following example code shows how to apply a date type filter.
Javascript |
Copy Code
|
---|---|
let groupInfo = { originFieldName: "OrderDate", dateGroups: [ { by: GC.Pivot.DateGroupType.quarters }, { by: GC.Pivot.DateGroupType.years }] }; myPivotTable.group(groupInfo); myPivotTable.add("OrderDate", "Qtr", GC.Spread.Pivot.PivotTableFieldType.columnField); // apply label Filter using FilterInfo let labelFilter = { condition: { conType: GC.Pivot.PivotConditionType.date, val: [], operator: GC.Pivot.PivotDateFilterOperator.Q1 } }; myPivotTable.labelFilter("Qtr", labelFilter); |
You can also use the below built-in date to date filters:
Along with the above options, you can use parallel date filters by setting the isParallel property to true. The parallel date filter allows you to get the same period in the previous or the upcoming dates (depending on the data in the pivot table) corresponding to the actual period. For example, suppose today is Nov 23, 2021, and the pivot table contains the data from Sep 1, 2021, to Dec 31, 2021.
Month to Date filter:
Parallel month to date filter:
The following example code shows how to apply a date-to-date filter.
Javascript |
Copy Code
|
---|---|
function DateToDateFilter() { var condition = { conType: GC.Pivot.PivotConditionType.month, operator: GC.Pivot.PivotDateFilterOperator.dateToDate, val: [new Date(2021, 7, 15), new Date(2022, 6, 20)], isParallel: false, isDynamicEndDate: true, by: GC.Pivot.PivotAdvancedDateFilterBy.month }; var filterInfo = { condition }; myPivotTable.labelFilter("OrderDate", filterInfo); } |
The above filters are applied by creating the filter info. The following table describes the conditions which can be used to create filter info:
Condtions | conType | operator | val | conditionByname | type | isWholeDay |
GC.Pivot.IPivotCaptionConditionFilterInfo | GC.Pivot.PivotConditionType.caption | GC.Pivot.PivotCaptionFilterOperator | Array.<string> |
/ |
/ |
/ |
GC.Pivot.IPivotDateConditionFilterInfo | GC.Pivot.PivotConditionType.date | GC.Pivot.PivotDateFilterOperator | Array.<Date> |
/ |
/ |
boolean |
GC.Pivot.IPivotTop10ConditionFilterInfo | GC.Pivot.PivotConditionType.top10 | GC.Pivot.PivotTop10FilterOperator | number |
/ |
GC.Pivot.PivotTop10FilterType |
/ |
GC.Pivot.IPivotValueConditionInfo | GC.Pivot.PivotConditionType.value | GC.Pivot.PivotValueFilterOperator | Array.<number> | string |
/ |
/ |
You can hide the filter buttons from the pivot table using showFilter option.
The following example code shows how to hide filter buttons.
Javascript |
Copy Code
|
---|---|
// Set showFilter to false myPivotTable.options.showFilter = false; |
You can use the Filter dialog by clicking on any row or column header in a pivot table. It provides various sorting and filtering options. You can also select the required items from the filter dialog's list box. The below image shows the filter dialog box.
The filter dialog also provides a search box that allows you to apply filtering settings conveniently.
You can input case-insensitive search terms and also use the 'Add current selection to filter' option to merge the selected item with the previous filter information. If unchecked, the current selection overwrites the previous filter information.
It also allows you to search using regex characters like: '?', '*' and '~' as shown in the image below.