Articles in this section
Category / Section

How to get started easily with Syncfusion Angular 6 Pivot Table?

6 mins read

The Essential JS 2 Angular Pivot Table component organizes and summarizes business data and displays the result in a cross-table format. A high volume of pivot data can be loaded without any performance degradation using the row and column virtualization. In this knowledge base, details about how to easily integrate Syncfusion Angular Pivot Table in the Angular 6 application and enable its commonly used features using services has been provided. The various features that are available in the Angular Pivot Table are databinding, sorting, filtering, exporting, aggregating, and grouping of pivot data with drill-down capability.

Prerequisites

 

The following list is required to create an Angular Pivot Table in the Angular 6 application:

Installation and application creation

  1. Install an Angular cli 6 using the following command.
    npm install -g @angular/cli@6.1.1
    

 

  1. Create an Angular 6 application using the Angular cli.
    ng new angular6-app
    cd angular6-app
    

 

  1. Serve the Angular 6 application using the following command.

 

ng serve

 

Listen the application in localhost:4200. Your application will serve in the browser as follows.

Angular welcome page

 

Integration of Angular Pivot Table

 

  1. After running the Angular 6 application successfully, configure the Angular Pivot Table in this application. Install the Angular Pivot Table and EJ2 package using the following command.
    npm install @syncfusion/ej2-angular-pivotview --save
    npm install @syncfusion/ej2 save
    

 

The --save command will instruct the NPM to include a Pivot View package inside the dependencies section of the package.json.

  1. Import the PivotViewModule from the installed package in the app/app.module.ts and declare the PivotViewModule in imports array type and the meta data property of @NgModule in app/app.module.ts.

 

import { NgModule } from '@angular/core';
import { PivotViewModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
 
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
PivotViewModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

 

  1. You should refer to the CSS file for Angular Pivot Table in style.CSS.

@import "../node_modules/@syncfusion/ej2/material.css";

 

  1. Add the Angular Pivot Table component to the app.component.html.
    <ejs-pivotview></ejs-pivotview>
    

 

  1. Bind the JOSN data to the data property of datasource in the Pivot Grid component, this section explains how to bind remote data using the DataManager and WebApiAdaptor.
    Note:

    You can bind the local JSON data directly to the data property of the data source in the Pivot Table.

 

  1. Bind the string type fields either in rows or columns and bind the value field in value axis. The filter axis allows you to filter the values from the bounded data in the pivot table:

 

name: Allows you set the field name from the bound data source.

caption: Allows you set the field caption, which is the alias name displayed in the pivot grid.

type: Allows you set the summary type of the field, and this property is applicable only for the value axis.

 

import { Component, OnInit } from '@angular/core';
import { IDataOptions, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { DataManager, WebApiAdaptor  } from '@syncfusion/ej2-data';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
export class AppComponent implements OnInit {
  public data: DataManager;
  public dataSource: IDataOptions;
  public width: string;
 
  ngOnInit() {
    this.data = new DataManager({
      url: 'https://bi.syncfusion.com/northwindservice/api/orders',
      adaptor: new WebApiAdaptor,
      crossDomain: true
  });
 
this.dataSource = {
      data: this.data,
      expandAll: false,
      rows: [{ name: 'ProductName', caption: 'Product Name' }],
      columns: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
      formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
      values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }],
      filters: []    
};
    this.width = '800';
  }
}

 

  1. After defining the datasource, assign it to the Pivot Table’s dataSource attribute in app.component.html.
    <ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width></ejs-pivotview>
    
  1. Now, serve the application using the following command.

 

ng serve --open

 

After all the files are compiled successfully, it will serve at the following site localhost:4200.

The following screenshot illustrates this.

Pivot Table

 

 

Enabling features

 

This section describes how to inject the pivot table services and enable its features. Before enabling the Pivot Table features, inject their services in app.module.ts and define the services in the providers meta data property of the NgModule.

Grouping bar

Define the GroupingBarService in the providers meta data property of NgModule in the app.module. Now, you can access the GroupingBar functionality from the pivot table.

import { GroupingBarService } from '@syncfusion/ej2-angular-pivotview';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PivotViewModule
  ],
  providers: [ GroupingBarService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

To enable the GroupingBar in the Pivot Table, set the showGroupingBar property to true.

<ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height showGroupingBar='true'></ejs-pivotview>

Pivot Table with Grouping bar

Field list

 

The Pivot Grid provides a built-in Field List like Microsoft Excel. It allows you add or remove fields and rearrange them between different axes, including column, row, value, and filter along with filter and sort options dynamically at runtime.

Define the FieldListService in the providers meta data property of NgModule in the app.module. Now, you can access the FieldList functionality from the Pivot Table.

 

import { GroupingBarService, FieldListService, } from '@syncfusion/ej2-angular-pivotview';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PivotViewModule
  ],
  providers: [GroupingBarService, FieldListService,],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

To display the field list icon in the Pivot Grid UI, you should set the showFieldList property to true. To display the field list dialog, click the field list icon at the top-left corner of the Pivot Grid. The field list icon will be displayed at the top-right corner of the Pivot Grid, when the grouping bar is enabled.

 

<ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height showGroupingBar='true' showFieldList='true'></ejs-pivotview>

 



Pivot Table with Field list

 

 

Calculated field

 

Define the CalculatedFieldService in the providers meta data property of the NgModule in the app.module.ts. You can use the calculated field feature in the Pivot Table.

 

import { GroupingBarService, FieldListService, CalculatedFieldService } from '@syncfusion/ej2-angular-pivotview';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PivotViewModule
  ],
  providers: [ GroupingBarService, FieldListService, CalculatedFieldService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

 

To enable the Calculated Field, you should set the allowCalculatedField property to true.

<ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height showGroupingBar='true' showFieldList='true' allowCalculatedField='true'></ejs-pivotview>

 

 

 

Pivot Table with Calculated field

 

Exporting

The Excel export allows the Pivot Grid data to export as Excel document. To enable Excel export in the Pivot Grid, set the allowExcelExport property to true in the app.component.html. You should use the excelExport method for Excel exporting in app.component.ts.

 

<ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height allowExcelExport='true' ></ejs-pivotview><div class=”col-md-2”><button ej-button id= ‘export’ >Export</button></div>

 

 

Conditional formatting

The conditional formatting allows you change the appearance of Pivot Grid value cells with its background color, font color, font family, and font size based on specific conditions. To achieve this, set the allowConditionalFormatting to true in app.component.html and declare the ConditionalFormattingService in the app.module.ts.

 

 

import { ConditionalFormattingService } from '@syncfusion/ej2-angular-pivotview';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PivotViewModule
  ],
  providers: [ CondionalFormattingService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Use the conditionalFormatSettings object in the Pivot Grid component along with the following properties.

 

<ejs-pivotview #pivotview id='PivotView' [dataSource]=dataSource [width]=width [height]=height allowConditionalFormatting='true' ></ejs-pivotview>

 

 

this.dataSource = {
      data: this.data,
      expandAll: false,
      rows: [{ name: 'ProductName', caption: 'Product Name' }],
      columns: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
      formatSettings: [{ name: 'UnitPrice', format: 'C4', currency: 'EUR' }],
      values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }],
      filters: [],
      conditionalFormatSettings: [
        {
          value1: 30,
          value2: 50,
          conditions: 'Between',
          style: {
            backgroundColor: '#80cbc4',
            color: 'black',
            fontFamily: 'Tahoma',
            fontSize: '12px'
 
          }
        }
        ,
        {
          value1: 20,
          value2: 25,
          conditions: 'Between',
          style: {
            backgroundColor: '#f48fb1',
            color: 'black',
            fontFamily: 'Tahoma',
            fontSize: '12px'
 
          }
        }
      ] 
    };
    this.width = '800';
  }
 

 

Pivot Table with Conditional formatting

Number formatting

 

Number formatting allows you change the format of value cells, like currency, decimal digits to be displayed in the value cell. You can enable the number format settings in the the pivot grid data source by declaring the formatSettings along with the following properties.

name: Specifies the value field name for which the number format will be applied.

format: Sets the number of digits to be displayed after the decimal point (e.g. C0, C1).

currency: Sets the currency code of the value cell (e.g. USD, EUR).  

this.dataSource = {
      data: this.data,
      expandAll: false,
      rows: [{ name: 'ProductName', caption: 'Product Name' }],
      columns: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
      formatSettings: [{ name: 'UnitPrice', format: 'C2', currency: 'EUR' }],
      values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }],
      filters: [],
    };
    this.width = '800';
  }

 

Pivot Table with Number Formatting

 

 

Summary

 

In this GitHub repository, the application prepared from the above steps has been committed, and it is readily runnable. Also, you can check the Angular Pivot Grid features from this page.

If you have any queries or require clarifications, please let us know in the comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please sign in to leave a comment
Access denied
Access denied