How to get started with the Angular 13 Pivot Table ?

5 mins read

Getting started with the Angular Pivot Table component

The Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript based on true Angular components. The Pivot Table component is developed from the ground up to be lightweight, responsive, modular, and touch-friendly.

Project pre-requisites

Ensure that you have the following compatible versions of the TypeScript and Angular in your machine before working on this project.

Use the Angular CLI to set up your Angular applications. To install Angular CLI, use the following command.

npm install -g @angular/cli@13.0.1

Create an Angular application

Start a new Angular application using the Angular CLI command as follows.

ng new angular13-app
cd angular13-app

Add the Syncfusion pivot table package

All available Essential JS 2 packages are published in the npmjs.com registry.

To install the pivot view component, use the following command.

npm install @syncfusion/ej2-angular-pivotview --save

Note:

The --save will instruct NPM to include the Pivotview package inside the dependencies section of the package.json.

Register the Pivotview module

Import the Pivotview module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-pivotview.

[src/app/app.module.ts]

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the PivotViewModule for the pivot table component
import { PivotViewModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent }  from './app.component';
 
@NgModule({
  //declaration of ej2-angular-pivotview module into NgModule
  imports:      [ BrowserModule, PivotViewModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Add the CSS reference

The following CSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in the [src/styles.css] using the following code.

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons /styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/material.css';

Add the SCSS Reference

The following SCSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in the [src/styles.scss] using following code.

@import '../node_modules/@syncfusion/ej2-base/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.scss';
@import '../node_modules/@syncfusion/ej2-angular-pivotview/styles/material.scss';

Note:

By default, it installs the CSS style base application. To set up the SCSS, pass the --style=SCSS argument on the created project.

Example code:

ng new angular13-app --style=scss

The Style Pre-Processor for SCSS styles

Add the stylePreprocessorOptions option under options in the angular.JSON file to configure the style path.

"stylePreprocessorOptions": {
"includePaths": [
"node_modules/@syncfusion"
]
}

After configuring the path in the stylePreprocessorOptions, use the following code to refer to the styles in any SCSS file in the application. Usually, styles are referred in the [src/styles.scss] file.

@import 'ej2-base/styles/material.scss';
@import 'ej2-buttons/styles/material.scss';
@import 'ej2-dropdowns/styles/material.scss';
@import 'ej2-grids/styles/material.scss';
@import 'ej2-inputs/styles/material.scss';
@import 'ej2-lists/styles/material.scss';
@import 'ej2-navigations/styles/material.scss';
@import 'ej2-popups/styles/material.scss';
@import 'ej2-splitbuttons/styles/material.scss';
@import 'ej2-angular-pivotview/styles/material.scss';

Add the Pivotview component

Modify the template in the [src/app/app.component.ts] file to render the Pivotview component. Add the Angular Pivotview by using the <ejs-pivotview> selector in the template section of the app.component.ts file.

import { Component, OnInit } from '@angular/core';
import { IDataOptions, IDataSet } from '@syncfusion/ej2-angular-pivotview';
 
@Component({
  selector: 'app-root',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public pivotData!: IDataSet[];
public dataSourceSettings!: IDataOptions;
 
ngOnInit(): void {
 
    this.pivotData = [
            { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q1' },
            { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q2' },
            { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q3' },
            { 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2015', 'Quarter': 'Q4' },
            { 'Sold': 27, 'Amount': 46008, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2016', 'Quarter': 'Q1' }];
 
    this.dataSourceSettings = {
        dataSource: this.pivotData,
        expandAll: false,
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }]
    };
}
}

Then run the ng serve for the serving sample.

UG link: https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started/

Sample: https://github.com/SyncfusionExamples/ej2-angular-13-pivot-table

Sample using SCSS: https://github.com/SyncfusionExamples/ej2-angular-13-pivot-table-using-scss

Did you find this information helpful?

Yes