Getting Started with TypeScript Pivot Table using Vite

This section explains the steps to create a simple Pivot Table and demonstrates the basic usage of the Pivot Table component in a Vite-based TypeScript project scaffolded with the latest Vite version.

Prerequisites

Ensure the following tools are installed on your machine:

Setup for local development

Run the following command to create a new Vite project with the TypeScript template:

npm create vite@latest my-app -- --template vanilla-ts

The -- separator is required for npm 7+. For older npm versions, use npx create-vite@latest my-app --template vanilla-ts instead.

The Vite scaffolder will create the project in a my-app folder with the Vanilla framework and TypeScript variant. The scaffold also generates a style.css file in src/ that will be used later for theme imports.

Pivot Table Initial setup

Navigate to the project directory and install its dependencies:

cd my-app
npm install

Adding Syncfusion® Pivot Table packages

Install Syncfusion Pivot Table from npm:

npm install @syncfusion/ej2-pivotview --save

Adding CSS reference

Themes for Syncfusion® JavaScript controls can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, refer to the themes documentation.

The following example demonstrates the installation of the Tailwind 3 theme package from npm. Each component in this theme package includes an index.css file that automatically loads all required dependency styles.

To install the Tailwind 3 theme package, use the following command:

npm install @syncfusion/ej2-tailwind3-theme --save

Import the required theme styles in the ~/src/style.css file generated by the Vite template:

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pivotview/index.css';

Make sure to import style.css in src/main.ts to apply the Syncfusion component styles globally (shown in the next section). For details about built-in themes and CSS references for individual controls, refer to the themes section.

Adding Pivot Table control

To get started, add the Pivot Table control in the main.ts and index.html files. The Pivot Table can be initialized through a div element.

import './style.css';
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');
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Syncfusion TypeScript Pivot Table</title>
</head>

<body>
  <div id="PivotTable"></div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>

Run the application

Use the following command to run the application:

npm run dev

Vite starts the local development server at http://localhost:5173/. Open the URL in a browser to view the Pivot Table. Use npm run build for a production bundle or npm run preview to serve the built output locally.

See also