How to Add a Vue Pivot Table to Your Web Application

Pivot Tables are a powerful way to explore and summarize large datasets—perfect for breaking down complex info into clear, digestible insights. In this guide, we'll walk through how to integrate a Pivot Table directly into your Vue application using the Vue Spreadsheet component, SpreadJS, and its optional Pivot Table add-on. Instead of bland generic data, we'll work with a fun mock dataset based on video games, featuring fields like title, genre, platform, pricing, and ratings to simulate a real-world use case.

Download a free trial of SpreadJS today!

Customizing Pivot Tables and Reports with a Vue Spreadsheet Pivot Table API

• Create a Vue Pivot Table
• Add Pivot Table Panels to a Vue App
• Set the Vue 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 a Vue Pivot Table

To get started, we have a Vue 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 showing 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-vue
npm install @mescius/spread-sheets-pivot-addon
npm install @mescius/spread-sheets-shapes

Import and globally register the gc-spread-sheets, gc-worksheet, and gc-column components from @mescius/spread-sheets-vue in the main.js file so they can be used throughout your Vue 3 app.

import "./assets/main.css";
import { createApp } from "vue";
import App from "./App.vue";
import { GcSpreadSheets, GcWorksheet, GcColumn, } from "@mescius/spread-sheets-vue"; 

let app = createApp(App);
app.component("gc-spread-sheets", GcSpreadSheets);
app.component("gc-worksheet", GcWorksheet);
app.component("gc-column", GcColumn);
app.mount("#app");

In the App.vue file, use the add method from the PivotTableManager to create a Pivot Table, referencing your source table by name:

const pivotTable = sheet.pivotTables.add(pivotTableName, tableDataSource, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.tabular, GC.Spread.Pivot.PivotTableThemes.medium14, pivotTableOptions);

Developers can programmatically set the pivot table fields using the Add method and invoking the autoFitColumn from the PivotTable class after resuming the layout to adjust the column widths:

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();
pivotTable.autoFitColumn();

The new Vue Pivot Table data will now display in the application as below:

To improve readability, let's format the value fields, Price and Sales, by applying a currency style using the setStyle method.

// Create formatter style
const currencyStyle = new GC.Spread.Sheets.Style();
currencyStyle.formatter = '$ #,##0.00';
const largeCurrencyStyle = new GC.Spread.Sheets.Style();
currencyStyle.formatter = '$ #,##.00';
// Utility to get field area reference
const initArea = (fieldName, pt) => ({
     dataOnly: true,
     references: [{ fieldName: 'Values', items: [fieldName] }]
})
// Apply currency format to Price and Sales
const priceArea = initArea('Price', pivotTable);
const salesArea = initArea('Sales', pivotTable);
if (priceArea) pivotTable.setStyle(priceArea, currencyStyle);
if (salesArea) pivotTable.setStyle(salesArea, currencyStyle);

With just a few lines of code, you have a fully interactive Pivot Table in your Vue 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 Vue Pivot Tables, check out our documentation or online Vue Pivot Table demo.

Add Pivot Table Panels to Vue App

Another way to allow users to create or analyze Pivot Table data in your Vue app is to use the customizable Pivot Panel offered by SpreadJS.

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

<template>
  <div class="sample-tutorial">
    <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread" />
  </div>
  <div class="sample-panel">
    <div id="panel"></div>
  </div>
</template>

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 Vue 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 Vue Spreadsheet Pivot Table Panels, check out the documentation and online demo.

Set the Vue Pivot Layout

SpreadJS allows you to choose from three different pivot table layouts to offer different 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' 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 your reports' end receivers. The SpreadJS Vue 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.

Pivot Table Slicers

Pivot Table Slicers are interactive visual controls that allow 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 our Vue3 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 Vue 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 Vue3 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 by visiting the SpreadJS Pivot Table Conditional Formatting Vue demo explorer.

Vue Pivot Table Component

We hope you enjoyed learning how to create and customize Vue Spreadsheets Pivot Tables using SpreadJS and its optional Pivot Table add-on. You can download the sample application for this blog to try it yourself. This article only scratches the surface of the full capabilities of SpreadJS, the Vue 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 Vue applications allows you to customize your users' experience and provide them with familiar spreadsheet functionality.