How to get started easily with Angular 13 Pivot Table?
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.
- Node.js
- Angular 13
- Angular CLI
- Typescript 4+
- Visual Studio Code for Editor
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
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';
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!
