Label filtering in EJ2 TypeScript Pivotview control

2 May 202319 minutes to read

Label filtering allows you to view the pivot table with particular records of a field based on headers. Label filtering can be enabled by setting the allowLabelFilter property to true. The following are the three different types of available label filtering:

Text or label filtering.
Date filtering.
Number filtering.

Label filtering through UI

Label filtering can be performed through the UI option available in the grouping bar and field list at runtime.

Text or label filtering through code

Text or label filtering allows you to view the pivot table with particular records of a field based on text. For example, to show only the groups for France, apply the text france with filter operator Equals on the country field.

Label filtering can be configured using the filterSettings option through code-behind. The settings required to filter at initial rendering are:

name: Sets the field name.
type: Sets the filter type as Label to the field.
condition: Sets the operator type such as equals, greater than, less than, etc.
value1: Sets the start value.
value2: Sets the end value. It is applicable only for the operator such as ‘Between’ and ‘NotBetween’.

Operators that can be used in label filtering are:

Operator	Description
Equals	Displays the pivot table that matches with the text.
DoesNotEquals	Displays the pivot table that does not match with the given text.
BeginWith	Displays the pivot table that begins with text.
DoesNotBeginWith	Displays the pivot table that does not begins with text.
EndsWith	Displays the pivot table that ends with text.
DoesNotEndsWith	Displays the pivot table that does not ends with text.
Contains	Displays the pivot table that contains text.
DoesNotContains	Displays the pivot table that does not contain text.
GreaterThan	Displays the pivot table when the text is greater.
GreaterThanOrEqualTo	Displays the pivot table when the text is greater than or equal.
LessThan	Displays the pivot table when the text is lesser.
LessThanOrEqualTo	Displays the pivot table when the text is lesser than or equal.
Between	Displays the pivot table that records between the start and end text.
NotBetween	Displays the pivot table that does not record between the start and end text.

index.ts
index.html
import { PivotView, IDataSet } from '@syncfusion/ej2-pivotview';
import { pivotData } from './datasource.ts';

let pivotTableObj: PivotView = new PivotView({
        dataSourceSettings: {
        dataSource: pivotData as IDataSet[],
        expandAll: false,
        allowLabelFilter: true,
        filterSettings: [{ name: 'Country', type: 'Label', condition: 'GreaterThan', value1: 'United Kingdom' }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        filters: []
    },
    height: 350
});
pivotTableObj.appendTo('#PivotTable');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Date filtering through code

Date filtering allows you to view the pivot table with particular records of a field based on date. For example, to show only the groups for the year 2016, apply the value as 2016 with the filter operator Equals on the year field.

Date filtering can be configured using the filterSettings option through code-behind. The settings required to filter at initial rendering are:

name: Sets the field name.
type: Sets the filter type as Date to the field.
condition: Sets the operator type such as equals, before, after, etc.
value1: Sets the start date.
value2: Sets the end date. It is applicable only for the operator such as ‘Between’ and ‘NotBetween’.

Operators that can be used in date filtering are:

Operator	Description
Equals	Displays the pivot table that matches with the given date.
DoesNotEquals	Displays the pivot table that does not match with the given date.
Before	Displays the records on the pivot table before to the given date.
BeforeOrEqualTo	Displays the records on the pivot table before or equal to the given date.
After	Displays the records on the pivot table after to the given date.
AfterOrEqualTo	Display the records on the pivot table after or equal to the given date.
Between	Displays the pivot table that records between the start and end dates.
NotBetween	Displays the pivot table that does not record between the start and end dates.

Date filtering option is enabled only when the field has date type formatsettings.

index.ts
index.html
import { PivotView, IDataSet } from '@syncfusion/ej2-pivotview';
import { pivotData } from './datasource.ts';

let pivotTableObj: PivotView = new PivotView({
        dataSourceSettings: {
        dataSource: pivotData as IDataSet[],
        expandAll: false,
        allowLabelFilter: true,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        formatSettings: [{ name: 'Year', format: 'dd/MM/yyyy-hh:mm', type: 'date' }],
        filterSettings: [{ name: 'Year', type: 'Date', condition: 'Before', value1: new Date('2016') }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        filters: []
    },
    height: 350
});
pivotTableObj.appendTo('#PivotTable');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Number filtering through code

Number filtering allows you to view the pivot table with particular records of a field based on numbers. For example, to show only the groups less than the value 40000, apply the value as 40000 with filter operator LessThan on the amount field.

Number filtering can be configured using the filterSettings option through the code-behind. The settings required to filter at initial rendering are:

name: Sets the field name.
type: Sets the filter type as Number to the field.
condition: Sets the operator type such as equals, greater than, less than, etc.
value1: Sets the start value.
value2: Sets the end value. It is applicable only for the operator such as ‘Between’ and ‘NotBetween’.