Syncfusion AI Assistant

How can I help you?

Getting started in TypeScript Pivot Table control

23 May 20264 minutes to read

This section explains the steps to create a simple Pivot Table and demonstrates the basic usage of the pivot table component using the Essential® JS 2
quickstart seed repository. This seed repository is pre-configured with the Essential® JS 2 package.

This application is integrated with the webpack.config.js configuration and uses the latest version of the webpack-cli. It requires node v14.15.0 or higher. For more information about webpack and its features, refer to the webpack documentation.

Setup for local development

Clone the Essential® JS 2 quickstart application project from GitHub using the following command line scripts.

git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
cd ej2-quickstart

Add Syncfusion® JavaScript packages

Syncfusion® JavaScript (Essential® JS 2) packages are available on the npmjs.com public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single @syncfusion/ej2 package or individual packages for each control.

Use the following command to install the dependent npm packages from the command prompt.

npm install

Import the Syncfusion® CSS styles

Combined CSS files are available in the Essential® JS 2 package root folder. This can be referenced in your [src/styles/styles.css] using the following code.

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

Adding Pivot Table component

You can start adding Essential® JS 2 pivot table component to the application. To get started, add the pivot table component in app.ts file using the following code.

import { PivotView, IDataSet } from '@syncfusion/ej2-pivotview';

let pivotData: IDataSet[] = [
    { 'Sold': 31, 'Amount': 52824, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q1' },
    { 'Sold': 51, 'Amount': 86904, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q2' },
    { 'Sold': 90, 'Amount': 153360, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q3' },
    { 'Sold': 25, 'Amount': 42600, 'Country': 'France', 'Products': 'Mountain Bikes', 'Year': 'FY 2025', 'Quarter': 'Q4' }
];

let pivotTableObj: PivotView = new PivotView({
    dataSourceSettings: {
        dataSource: pivotData,
        expandAll: true,
        columns: [{ name: 'Year' }, { name: 'Quarter' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        values: [{ name: 'Amount', caption: 'Sold Amount' }, { name: 'Sold', caption: 'Units Sold' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }]
    }
});
pivotTableObj.appendTo('#PivotTable');

Now, add an HTML div element which act as the pivot table element in index.html using the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>pivot table Typescript Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " />
</head>
<body>
    <!--Element where the pivot table will be rendered-->
    <div id="PivotTable"></div>
</body>
</html>

Run the application

The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.

npm start

For more information and to access the quick start project, visit: GitHub Repository

See also