How to get started easily with Angular 13 Pivot Table?

6 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 Angular 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

Conclusion

I hope you enjoyed learning about how to get started easily with Angular 13 Pivot Table.

You can refer to our Angular Pivot Table feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

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

Did you find this information helpful?

Yes