How to Add an Angular Pivot Table to Your Web Application

Pivot Tables are essential for summarizing, grouping, and analyzing large data sets in a visual and interactive way. In this tutorial, we'll show how to embed a Pivot Table into your Angular application using the Angular Spreadsheet component, SpreadJS, and its optional Pivot Table add-on. Instead of generic sample data, we'll use real-world-like mock data of video games, including title, genre, platform, price, ratings, and more.

Download a free trial of SpreadJS today!

Customizing Pivot Tables and Reports with an Angular Spreadsheet Pivot Table API

• Create an Angular Pivot Table
• Add Pivot Table Panels to Angular App
• Set the Angular Pivot Layout
• Set the Pivot Table Theme
• Understanding Pivot Table Slicers
• Understanding Pivot ContextMenu
• Apply Pivot Conditional Formatting

You can download a sample application here to follow along with the blog.

Create an Angular Pivot Table

To get started, we have an Angular spreadsheet app that uses SpreadJS with countless rows of data containing specific information. For this example, in the datasheet below, we have a large number of records that display the best-selling video games.

To follow along, make sure your project includes the required NPM packages:

npm install @mescius/spread-sheets
npm install @mescius/spread-sheets-angular
npm install @mescius/spread-sheets-pivot-addon
npm install @mescius/spread-sheets-shapes

Import the necessary modules in your app.component.ts file:

import * as GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-angular';
import '@mescius/spread-sheets-pivot-addon';

Use the add method from the PivotTableManager to create a Pivot Table, referencing your source table by name.

const pivotTable = sheet.pivotTables.add('PivotTable', 'GameData', 1, 1);

Developers can programmatically set the pivot table fields using the PivotTable Add method like so:

pivotTable.suspendLayout();
pivotTable.add("platform", "Platform", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("genre", "Genre", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("sales", "Sales", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
pivotTable.add("price", "Price", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.average);
pivotTable.resumeLayout();

Lastly, invoke the autoFitColumn from the PivotTable class after resuming the layout to adjust the column widths:

To improve readability, you can format value fields like Price and Sales by applying a currency style using the setStyle method.

const currencyStyle = new GC.Spread.Sheets.Style();
currencyStyle.formatter = '$ #,##0';

const initArea = (fieldName: string, pt: any) => ({
  dataOnly: true,
  references: [{ fieldName: 'Values', items: [fieldName] }]
});

pivotTable.setStyle(initArea('Price', pivotTable), currencyStyle);
pivotTable.setStyle(initArea('Sales', pivotTable), currencyStyle);

With just a few lines of code, you have a fully interactive Pivot Table in your Angular app. Next, we'll show you how to customize it further—from layout and theme options to Pivot Panels, slicers, and more.

For more information on getting started with Angular Pivot Tables, check out our documentation or online Angular Pivot Table demo.

Add Pivot Table Panels to an Angular App

Another way to enable users to create or analyze Pivot Table data in your Angular app is by using the customizable Pivot Panel offered by SpreadJS.

To initialize the Pivot Panel in an Angular app, first, create a DOM element—in this case, a DIV with an ID "panel":

<div class="sample-tutorial">
    <div class="sample-spreadsheets">
        <gc-spread-sheets [backColor]="spreadBackColor" [hostStyle]="hostStyle"
            (workbookInitialized)="workbookInit($event)"></gc-spread-sheets>
    </div>
    <div class="sample-panel">
        <div id="panel"></div>
    </div>
</div>

Apply CSS for the side panel. Interesting side note: developers can customize the styling and appearance of the Pivot Panel here through the CSS:

.sample-panel {
  float: right;
  width: 300px;
  padding: 12px;
  height: 100%;
  box-sizing: border-box;
  background: #fbfbfb;
  overflow: auto;
}

.gc-panel {
  padding: 10px;
  background-color: rgb(230, 230, 230);
}

#panel {
  position: absolute;
  right: 0;
  width: 300px;
  height: 100%;
  top: 0;
}

Then, use the PivotPanel constructor to initialize the Pivot Panel for the created Pivot Table.

var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", pivotTable, document.getElementById("panel"));

The application will now display the Angular Pivot Table with the Pivot Panel, allowing end-users to drag and drop the needed fields according to the report logic.

To learn more about the Angular Spreadsheet Pivot Table Panels, check out the documentation and online demo.

Set the Angular Pivot Layout

SpreadJS allows you to choose from three different pivot table layouts to offer various visualizations of your data. This includes the Compact, Outline, and Tabular form layouts. By default, the pivot table layout is Compact form. Still, users can set the layout when creating the pivot table using the PivotTable constructor or change the layout using the layoutType function. The function has an integer argument corresponding to the form layout (0 - Compact, 1 - Outline, 2 - Tabular).

// Set an outline form (1) 
pivotTable.layoutType(1);

Compact Form (0)	All row fields appear in a single column, nested in a hierarchy. Saves space but harder to reuse or copy data.
Outline Form (1)	Row fields appear in separate columns with field headers. Easier to analyze and reuse, but uses more horizontal space.
Tabular Form (2)	Similar to Outline, with repeated item labels. Ideal for exports. Subtotals only appear below groups.

To learn more, check out SpreadJS's online PivotTable Layout demo and documentation.

Pivot Table Theme

Choosing the right theme improves the appearance of your pivot table and offers a more professional presentation of data for the end receivers of your report. The SpreadJS Angular PivotTable provides 85 predefined themes—29 light, 28 medium, and 28 dark.

You can apply the pivot table theme when adding a Pivot Table, or you can use the theme function.

let pivotTable = sheet.pivotTables.add("PivotTable", table.name(), 0, 0, GC.Spread.Pivot.PivotTableLayoutType.outline, GC.Spread.Pivot.PivotTableThemes.medium2); 
//pivotTable.theme(GC.Spread.Pivot.PivotTableThemes.dark2); 
//pivotTable.theme("dark2");

To learn more, check out SpreadJS' documentation or the online Pivot Table Theme demo to see for yourself.

Pivot Table Slicers

Pivot Table Slicers are an interactive visual control that allows users to filter and manipulate data within a pivot table. They provide a user-friendly way to narrow down the data displayed in a pivot table by selecting specific criteria, such as dates, categories, or other relevant dimensions. Using slicers, users can quickly analyze and explore data subsets without modifying the underlying pivot table structure. SpreadJS supports both the Item Slicer and Timeline Slicer.

PivotTable Item Slicer	PivotTable Timeline Slicer

Check out this Angular Pivot Table Slicer demo or the documentation to learn more.

Pivot ContextMenu

SpreadJS offers a Pivot ContextMenu that empowers users to perform various actions on pivot tables effortlessly. This feature allows users to sort data, rearrange field headers, and personalize the control by expanding or collapsing field values. The Pivot ContextMenu provides a user-friendly and compact interface to modify the appearance of pivot table data.

When interacting with different parts of a pivot table and then right-clicking, SpreadJS presents distinct context menu options. Below are some of the Angular Pivot Table Context Menus:

Users can also format values with given or customized formats by choosing the "Value Field Settings..." option from the data area or the Grand Total area context menu to open the dialog window.

Try the Pivot Table Context Menus yourself with our online Angular demo, or learn more from our documentation.

Pivot Conditional Formatting

Conditional formatting helps highlight patterns and outliers in your Pivot Table. In SpreadJS, rules can be added, retrieved, or removed, and they stay active even when the layout changes.

Use the addConditionalRule method to apply conditional formatting based on cell values. In the example below, green represents low values, and red represents high values.

Try this demo for yourself by visiting the SpreadJS Pivot Table Conditional Formatting Angular demo explorer.

Angular Pivot Table Component

We hope you enjoyed learning how to create and customize Angular Spreadsheet Pivot Tables using SpreadJS and its optional Pivot Table add-on. You can download the sample application and follow along with this blog. This article only scratches the surface of the full capabilities of SpreadJS, the Angular spreadsheet component.

Review the documentation to see some of the many available features, and check out our online demos to see the features in action and interact with the sample code. Integrating a spreadsheet component into your Angular applications allows you to customize your users' experience and provide them with familiar spreadsheet functionality.