How to Add a Vue Pivot Table to Your Web Application
Tags: webdev, devops, javascript, tutorial
Published: 2023-12-06 16:24:32

---
canonical_url: https://developer.mescius.com/blogs/how-to-add-a-vue-pivot-table-to-your-web-application
description: Learn how to use a Vue Pivot Table component in your web application. See more from SpreadJS today.
---
Pivot Tables are undeniably one of the most powerful data analysis tools; they help organize data so users can detect recurring patterns more easily. Pivot Tables help users create customized tables from large data groups. The user can summarize, sort, reorganize, group, count, total, or average data effortlessly within a table using pivot functionalities.

[**<span>SpreadJS</span>**, a Vue spreadsheet component](https://developer.mescius.com/spreadjs/vue-spreadsheet-components "https://developer.mescius.com/spreadjs/vue-spreadsheet-components"), has a [Pivot Tables add-on](https://developer.mescius.com/spreadjs/javascript-excel-spreadsheet-pivot-table "https://developer.mescius.com/spreadjs/javascript-excel-spreadsheet-pivot-table") feature that allows Vue developers to create Excel-like Pivot Tables programmatically in their applications or allow end-users to create them with a familiar UI easily.

[**<span>Check out our online Vue Pivot Table demo to see how to get started with SpreadJS’s PivotTables</span>**](https://developer.mescius.com/spreadjs/demos/features/pivot-table/overview/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/overview/vue").

This blog will go through some of the essential properties and features of the Vue spreadsheet Pivot Table API that will help you customize the appearance of your pivot tables and reports derived from these Pivot Tables.

*   [<span>Create a Vue Pivot Table</span>](#create)
*   [<span>Pivot Layout</span>](#layout)
*   [<span>Pivot Table Theme</span>](#theme)
*   [<span>Pivot Styles</span>](#styles)
*   [<span>Pivot Table AutofitColumn</span>](#autofit)
*   [<span>Pivot Table Slicers</span>](#slicers)
*   [<span>Pivot ContextMenu</span>](#contextmenu)
*   [<span>Pivot Conditional Formatting</span>](#conditional)

**You can [download the sample application](https://cdn.mescius.io/assets/developer/blogs/spread/20231102-how-to-use-a-vue-pivot-table-component-in-your-web-application/features_pivot-table_overview_Vue.zip) to follow along with the blog.**

## <a id="create"></a>Create a Vue Pivot Table

Imagine having countless rows of data containing specific information. For example, in the datasheet below, we have a large number of records showing the best-selling video games.

<span>![React Pivot Table](//cdn.mescius.io/umb/media/5yin4wap/blob.png?rmode=max&width=468&height=298)</span>

The goal is to create a report summarizing this raw data into more insightful information. The below function shows how to programmatically add a pivot table and add fields in a [<span>Vue application</span>](https://developer.mescius.com/spreadjs/demos/features/pivot-table/overview/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/overview/vue") using [SpreadJS’s **PivotTable** class API](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1 "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1").

```
     let initPivotTable = function(sheet, tableName){
            sheet.name("Basic PivotTable");
            sheet.setRowCount(250);
            let pivotTableOptions = {bandRows:true,bandColumns:true};
            let pivotTable = sheet.pivotTables.add("PivotTable", tableName, 1, 1, GC.Spread.Pivot.PivotTableLayoutType.tabular, GC.Spread.Pivot.PivotTableThemes.medium14, pivotTableOptions);
            pivotTable.suspendLayout();

            pivotTable.add("Genre", "Genre", GC.Spread.Pivot.PivotTableFieldType.rowField);
            pivotTable.add("Name", "Name", GC.Spread.Pivot.PivotTableFieldType.rowField);

            pivotTable.add("NA_Sales", "NA_Sales", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
            pivotTable.add("EU_Sales", "EU_Sales", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
            pivotTable.add("JP_Sales", "JP_Sales", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
            pivotTable.add("Other_Sales", "Other_Sales", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
            pivotTable.add("Global_Sales", "Global_Sales", GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);

            pivotTable.resumeLayout();
        }
```

After applying this code, the PivotTable will display in the Vue application like so:

<span>![React Pivot Table](//cdn.mescius.io/umb/media/ke1pnivl/blob.png?rmode=max&width=468&height=408)</span>

Another way of creating a pivot table is by using the [<span>Pivot Panel</span> ](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-panel/overview/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-panel/overview/vue")offered by SpreadJS. To initialize the Pivot Panel, first, create a DOM element, in this case, a DIV with an ID “panel”:

```
    return (
            <div class="sample-tutorial">
                <div class="sample-spreadsheets">
                    <SpreadSheets workbookInitialized={spread=>initSpread(spread)}>
                    </SpreadSheets>
                </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 [<span>SpreadJS’s **PivotPanel** constructor</span>](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotPanel#constructor "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotPanel#constructor") to initialize the panel:

```
    //code to add pivot panel in the working spreadsheet.
    var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
```

The application will now display the SpreadJS Vue PivotTable with the side panel allowing end-users to drag and drop needed fields according to the report logic.

<span>![React Pivot Table](//cdn.mescius.io/umb/media/yv3cnm0i/blob.gif?rmode=max&width=468&height=263)</span>

## <a id="layout"></a>Pivot Layout

SpreadJS allows you to choose from [<span>three different pivot table layouts</span>](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-layout/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-layout/vue") 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](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#constructor "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#constructor") or change the layout using the [**layoutType** function](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#layouttype "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#layouttype"). 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)**

This layout contains all the Row fields in one column in a hierarchical structure.

This layout form optimizes readability by keeping related data in one column. Still, if you copy and paste the data into a new worksheet, it will be harder to do further analysis.

<span>![React Pivot Table](//cdn.mescius.io/umb/media/sspforeg/blob.png?rmode=max&width=468&height=203)</span>

### **Outline Form (1)**

This layout has a hierarchical structure, but each Row field is in a separate column in the pivot table. It displays one column per field and provides space for field headers.

Using this form, you can include Field headers in each column, repeat all item labels and reuse the data of the Pivot Table in a new location for further analysis. Still, this form uses horizontal space, so it might not be beneficial to use it in some cases.

<span>![React Pivot Table](//cdn.mescius.io/umb/media/bsofhwn2/blob.png?rmode=max&width=468&height=229)</span>

### **Tabular Form (2)**

This layout is a hierarchical structure, and each Row field is in a separate column in the pivot table. It can display subtotals at the top of every group because items in the next column are displayed in one row below the current item.

This traditional table format includes Field headers in each column and allows you to have all the item labels repeated and reuse the Pivot Table data in a new location for further analysis. As a disadvantage, this layout uses horizontal space, and subtotals can’t appear at the top of the group if you want to have those at the top.

<span>![React Pivot Table](//cdn.mescius.io/umb/media/2gpniqnv/blob.png?rmode=max&width=468&height=190)</span>

## <a id="theme"></a>Pivot Table Theme

SpreadJS’s Vue PivotTable provides 85 predefined themes - 29 light, 28 medium, and 28 dark.

You can apply the pivot table theme when [<span>adding the pivot table</span>](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#add "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#add"), or you can use the [**theme** function](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#theme "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#theme").

```
    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");
```

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. [<span>Check out SpreadJS’s online demo here to see for yourself</span>](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-customize/pivot-theme/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-customize/pivot-theme/vue").

<span>![React Pivot Tables](//cdn.mescius.io/umb/media/2aqjdjut/blob.gif?rmode=max&width=468&height=244)</span>

## <a id="styles"></a>Pivot Styles

You can apply a [<span>pivot table style</span>](https://developer.mescius.com/spreadjs/docs/features/pivot-table/themes-and-style#style "https://developer.mescius.com/spreadjs/docs/features/pivot-table/themes-and-style#style") to highlight any specific data. The [**style** method](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#setStyle "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#setStyle") can apply styles to row, column, value, and label fields. For example, the following code snippet applies a style to the value fields.

```
    // Get the pivot area
    let labelPivotArea = {
        dataOnly: true,
        references: [{
          fieldName: "Values",
          items: ["Global_Sales", "NA_Sales"]
        }]
    };

    // Create style
    let style = new GC.Spread.Sheets.Style();
    style.backColor = "#82bc00";

    // Set pivot style
    pivotTable.setStyle(labelPivotArea, style);
```

This code will highlight the value fields “Global_Sales”, “JP_Sales”, and “NA_Sales”:

<span>![React Pivot Tables](//cdn.mescius.io/umb/media/lauhbfdu/blob.png?rmode=max&width=468&height=461)</span>

With this support, Vue developers can customize and apply their own rules, styles, and formatting to certain pivot table fields; check out [<span>SpreadJS’s online Pivot Style demo</span>](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-style/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-style/vue") for more information.

## <a id="autofit"></a>Pivot Table AutofitColumn

SpreadJS’s Vue pivot table offers an [**AutofitColumn** function](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#autofitcolumn "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#autofitcolumn") that adjusts the pivot table's column width to accommodate the longest value in a field. Overall, it is a helpful function and convenient when working with long, text-based fields.

```
    // Auto fit Pivot Table columns
    pivotTable.autoFitColumn();
```

The GIF below demonstrates this function; when the page reloads, the **autoFitColumn** function is invoked:

![Pivot Table AutoFit Column](//cdn.mescius.io/umb/media/23ahn343/10-pivottable-panel-autofit.gif?rmode=max&width=764&height=401)

## <a id="slicers"></a>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 [<span>Item Slicer</span>](https://developer.mescius.com/spreadjs/docs/features/pivot-table/pt-slicer/pivot-table-item-slicer "https://developer.mescius.com/spreadjs/docs/features/pivot-table/pt-slicer/pivot-table-item-slicer") and [Timeline Slicer](https://developer.mescius.com/spreadjs/docs/features/pivot-table/pt-slicer/pivot-table-timeline-slicer "https://developer.mescius.com/spreadjs/docs/features/pivot-table/pt-slicer/pivot-table-timeline-slicer").

PivotTable Item Slicer

<span>![React Pivot Table - Item Slicers](//cdn.mescius.io/umb/media/3pemd3b2/blob.png?rmode=max&width=468&height=335)</span>

PivotTable Timeline Slicer

<span>![React Pivot Table - Timeline slicers](//cdn.mescius.io/umb/media/n00k1oyg/blob.png?rmode=max&width=468&height=335)</span>

Check out [<span>SpreadJS’s Vue Slicer demo</span>](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-slicer/pivot-slicer-overview/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-slicer/pivot-slicer-overview/vue") to try the slicers for yourself.

## <a id="contextmenu"></a>Pivot ContextMenu

SpreadJS offers a [<span>Pivot ContextMenu</span>](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-context-menu/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-context-menu/vue") 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, [<span>SpreadJS presents distinct context menu options</span>](https://developer.mescius.com/spreadjs/docs/features/pivot-table/context-menu "https://developer.mescius.com/spreadjs/docs/features/pivot-table/context-menu"). Here are some of the Vue Pivot Table Context Menus:

The page area

<span>![React Pivot Table](//cdn.mescius.io/umb/media/dmqlle1n/blob.png?rmode=max&width=468&height=311)</span>

The header area

<span>![React Pivot Table](//cdn.mescius.io/umb/media/om5d5mls/blob.png?rmode=max&width=468&height=311)</span>

The data area

<span>![React Pivot Table](//cdn.mescius.io/umb/media/oxzddz0d/blob.png?rmode=max&width=468&height=311)</span>

The Grand Total area

<span>![React Pivot Table](//cdn.mescius.io/umb/media/lnlp2xcl/blob.png?rmode=max&width=468&height=311)</span>

[<span>Users can also format values with given formats or customized ones</span>](https://developer.mescius.com/spreadjs/docs/features/pivot-table/context-menu#custom-format-in-value-fields "https://developer.mescius.com/spreadjs/docs/features/pivot-table/context-menu#custom-format-in-value-fields") by choosing the “**Value Field Settings...**" option from the data area or the Grand Total area context menu to open the dialog window.

![Pivot Table Value Settings](//cdn.mescius.io/umb/media/jfcna0sz/17-pivottable-value-field-settings.gif?rmode=max&width=772&height=434)

## <a id="conditional"></a>Pivot Conditional Formatting

Conditional Formatting is a powerful tool that allows you to quickly highlight data fields, making it easier to identify outliers or refine your results. In a pivot area, you have the flexibility to apply, retrieve, and remove conditional formatting rules. These rules remain in effect even if you make changes to the PivotTable layout.

You can apply Conditional Formatting to the SpreadJS’s Vue Pivot Table using the [**addConditionalRule** method](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#addconditionalrule "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#addconditionalrule").

Check out [<span>SpreadJS’s online Vue demo</span>](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-conditional-rules/vue "https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-conditional-rules/vue"). This demo applies different color formatting depending on the cell values, with green being the lowest and red the highest.

<span>![React Pivot Table](//cdn.mescius.io/umb/media/jqdnbpv0/blob.png?rmode=max&width=468&height=264)</span>

We hope you enjoyed learning how to create and customize Vue Spreadsheet Pivot Tables. This article only scratches the surface of the full capabilities of [**<span>SpreadJS</span>**](https://developer.mescius.com/spreadjs/react-spreadsheet-components "https://developer.mescius.com/spreadjs/react-spreadsheet-components"), the Vue spreadsheet component.

Review the [<span>documentation</span> ](https://developer.mescius.com/spreadjs/docs/overview "https://developer.mescius.com/spreadjs/docs/overview")to see some of the many available features, and check out our [online demos](https://developer.mescius.com/spreadjs/demos/ "https://developer.mescius.com/spreadjs/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.