How to Add a JavaScript Pivot Table to Your Web Application
Tags: webdev, devops, javascript, tutorial
Published: 2023-11-08 19:38:12

---
canonical_url: https://developer.mescius.com/blogs/how-to-add-a-javascript-pivot-table-to-your-web-application
description: Learn how to add a JavaScript pivot table to 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. Using pivot functionalities, the user can summarize, sort, reorganize, group, count, total, or average data effortlessly within a table.

[**SpreadJS**](https://developer.mescius.com/spreadjs/react-spreadsheet-components "https://developer.mescius.com/spreadjs/react-spreadsheet-components")[, a JavaScript spreadsheet component](https://developer.mescius.com/spreadjs "https://developer.mescius.com/spreadjs"), 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 JavaScript developers to create Excel-like Pivot Tables programmatically in their applications or allow end-users to create them easily with a familiar UI.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-1trs2qu">

<div data-type="file" data-node-type="media" data-width="800" data-height="420" data-id="d18d120d-306d-4989-9584-a4a2e0e91a31" data-collection="contentId-3428352165" data-file-name="01-sjs-react-pivot-table.png?width=500&amp;height=262.5" data-file-size="175296" data-file-mime-type="image/png" data-alt="React Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-1n97hy2" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="01-sjs-react-pivot-table.png?width=500&amp;height=262.5" data-test-status="complete" data-test-progress="1">![JavaScript Pivot Table](//cdn.mescius.io/umb/media/dlkjf2go/sjs-js-pt-blog-top-image-1.png?rmode=max&width=758&height=505)</div>

</div>

</div>

</div>

</div>

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

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

*   Create a JavaScript Pivot Table

    *   Pivot Layout

    *   Pivot Table Collapsing and Grouping

    *   Pivot Table Theme

    *   Pivot Styles

    *   Pivot Table AutofitColumn

    *   Pivot Table Slicers

    *   Pivot ContextMenu

    *   Pivot Conditional Formatting

*   Benefits

    *   Interactive Data Analysis

    *   FinTech

    *   Marketing

    *   Budgeting

**You can [download a sample application](https://cdn.mescius.io//assets/developer/blogs/spread/20231018-how-to-add-a-javascript-pivot-table-to-your-web-application/JavaScript_PivotTable_App.zip) to follow along with the blog.**

# Create a JavaScript Pivot Table<span class="css-1afrefi" aria-label="Copy"></span>

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.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-10hhgac">

<div data-type="file" data-node-type="media" data-width="964" data-height="613" data-id="14baebf4-c671-4397-8004-d47f0dd21541" data-collection="contentId-3428352165" data-file-name="02-react.png?width=500&amp;height=317.9460580912863" data-file-size="197301" data-file-mime-type="image/png" data-alt="React Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-6zkoxe" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="02-react.png?width=500&amp;height=317.9460580912863" data-test-status="complete" data-test-progress="1">![JavaScript Pivot Table](//cdn.mescius.io/umb/media/0wepkxqz/001-js.png?rmode=max&width=761&height=484)</div>

</div>

</div>

</div>

</div>

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 [JavaScript application](https://developer.mescius.com/spreadjs/demos/features/pivot-table/overview/purejs "https://developer.mescius.com/spreadjs/demos/features/pivot-table/overview/purejs") 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").

```
    function initPivotTable(sheet, tableName) {
        sheet.name("Basic PivotTable");
        sheet.setRowCount(250);
        let pivotTableOptions = {bandRows:true,bandColumns:true};
        // Create Pivot Table
        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();
    }

<div class="code-block  css-qswx85">

<div class="css-9n57oc">

<div class="css-ygvpeu">
```

<div>After applying this code, the PivotTable will display in the JavaScript application like so:</div>

</div>

</div>

</div>

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-axgb3q">

<div data-type="file" data-node-type="media" data-width="854" data-height="744" data-id="b0445315-23f3-4102-9221-0f2a0008e1e3" data-collection="contentId-3428352165" data-file-name="03-react.png?width=500&amp;height=435.59718969555036" data-file-size="123315" data-file-mime-type="image/png" data-alt="React Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-127zjiy" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="03-react.png?width=500&amp;height=435.59718969555036" data-test-status="complete" data-test-progress="1">![JavaScript Pivot Table](//cdn.mescius.io/umb/media/kxrdbtxw/002-js.png?rmode=max&width=698&height=608)</div>

</div>

</div>

</div>

</div>

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

```
    <body>
        <div class="sample-tutorial">
            <div id="ss" class="sample-spreadsheets"></div>
            <div class="sample-panel">
                <div id="panel"></div>
            </div>
        </div>
    </body>
```

Apply CSS for the side panel in the styles.css file. 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 [SpreadJS’s **PivotPanel** constructor](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 PivotTable with the side panel, allowing end-users to drag and drop needed fields according to the report logic.

![JavaScript Pivot Table](//cdn.mescius.io/umb/media/qngdmxsl/pivottable-pivot-panel.gif?rmode=max&width=750&height=422)

## Pivot Layout<span class="css-1afrefi" aria-label="Copy"></span>

SpreadJS allows you to choose from [three different pivot table layouts](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-layout/purejs) 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)<span class="css-1afrefi" aria-label="Copy"></span>

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.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-13r9fno">

<div data-type="file" data-node-type="media" data-width="837" data-height="364" data-id="0da20e60-4312-425f-ada6-6108a149b5dc" data-collection="contentId-3428352165" data-file-name="05-react.png?width=500&amp;height=217.44324970131424" data-file-size="35291" data-file-mime-type="image/png" data-alt="React Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-dw8ft4" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="05-react.png?width=500&amp;height=217.44324970131424" data-test-status="complete" data-test-progress="1">![JavaScript Pivot Table](//cdn.mescius.io/umb/media/0icg4x1p/003-js.png?rmode=max&width=729&height=317)</div>

</div>

</div>

</div>

</div>

### Outline Form (1)<span class="css-1afrefi" aria-label="Copy"></span>

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.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-r83a7j">

<div data-type="file" data-node-type="media" data-width="743" data-height="364" data-id="08fd44e0-f424-48ee-a6cf-343397163f59" data-collection="contentId-3428352165" data-file-name="06-react.png?width=500&amp;height=244.9528936742934" data-file-size="34558" data-file-mime-type="image/png" data-alt="React Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-1d47dgt" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="06-react.png?width=500&amp;height=244.9528936742934" data-test-status="complete" data-test-progress="1">![JavaScript Pivot Table](//cdn.mescius.io/umb/media/fygfda4q/004-js.png?rmode=max&width=721&height=353)</div>

</div>

</div>

</div>

</div>

### Tabular Form (2)<span class="css-1afrefi" aria-label="Copy"></span>

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. It allows you to repeat all the item labels 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 be shown at the top of the group.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-g85cf9" data-layout="center" data-width="100" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-yz0pq8">

<div data-type="file" data-node-type="media" data-width="746" data-height="303" data-id="b0cd1642-b9ae-47c9-bce3-f986f851b131" data-collection="contentId-3428352165" data-file-name="07-react.png?width=500&amp;height=203.08310991957106" data-file-size="34758" data-file-mime-type="image/png" data-alt="React Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-1icla2w" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="07-react.png?width=500&amp;height=203.08310991957106" data-test-status="complete" data-test-progress="1">![JavaScript Pivot Table](//cdn.mescius.io/umb/media/ttwoufr3/005-js.png)</div>

</div>

</div>

</div>

</div>

## Pivot Table Collapsing and Grouping<span class="css-1afrefi" aria-label="Copy"></span>

SpreadJS supports pivot table grouping and collapsing to view data more easily. Users can set the collapse info for a specified field of the pivot table by the field name using the [collapse method](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#collapse "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#collapse").

Users can also group dates, numbers, and text fields. Please look below to see how to collapse a field and break down the different grouping and ungrouping techniques supported with SpreadJS by using the [group](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#group) and [ungroup](https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#ungroup "https://developer.mescius.com/spreadjs/api/classes/GC.Spread.Pivot.PivotTable-1#ungroup") method.

### Collapse<span class="css-1afrefi" aria-label="Copy"></span>

To collapse a field, use SpreadJS' collapse method and indicate the target field's name and the collapsed item's name. The example shows a variety of listening regions collapsed.

```
    spread.suspendPaint();
        let isCollapse = false;
        if(e.target.checked){
            isCollapse = true;
        }
        pivotTable.collapse("region","Africa",isCollapse);
        pivotTable.collapse("region","Asia",isCollapse);
        pivotTable.collapse("region","Australia",isCollapse);
        pivotTable.collapse("region","Europe",isCollapse);
        pivotTable.collapse("region","North America",isCollapse);
        pivotTable.collapse("region","South America",isCollapse);
        spread.resumePaint();
    });
```

Notice that when selected, all of the specified fields are collapsed–making the data easier to view:

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-wknss7">

<div data-type="file" data-node-type="media" data-width="1490" data-height="692" data-id="feb1d9a4-dedc-4d5d-8f98-4a837c33ac88" data-collection="contentId-3428352165" data-file-name="11-collapse.gif" data-file-size="226804" data-file-mime-type="image/gif" data-alt="collapse" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-1mowaef" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="11-collapse.gif" data-test-status="complete" data-test-progress="1">![JavaScript Collapse](//cdn.mescius.io/umb/media/3oehuh1w/11-collapse.gif?rmode=max&width=751&height=349)</div>

</div>

</div>

</div>

</div>

### Grouping Dates<span class="css-1afrefi" aria-label="Copy"></span>

When grouping dates with SpreadJS, users can indicate the [DateGroupType](https://developer.mescius.com/spreadjs/api/v15/enums/GC.Pivot.DateGroupType#enumeration-dategrouptype) by hours, days, quarters, years, and more. For example, if a user wants to group their dates by quarters and years, they could use dateGroups and initialize the new groupInfo like so:

```
    let groupInfo = { originFieldName: "date", dateGroups: [{ by: GC.Pivot.DateGroupType.quarters }, { by: GC.Pivot.DateGroupType.years }] };
    pivotTable.group(groupInfo);
    pivotTable.add("Years", "Years", GC.Spread.Pivot.PivotTableFieldType.columnField);
```

When ungrouping **date** groups, all of the dates with the same origin field will be removed, and the origin field revert to the normal date.

**Grouping Text**

Users may want to group specific text items to differentiate from the rest of the data. To do this, the user can create a group of text values. When adding a text group, a new field will be created. The field's name is the fieldName given in groupInfo.textGroup. You can use the new field as a group field. This example shows a new group being added as a column field:

```
    let groupInfo = { originFieldName: "country",textGroup: {
        fieldName:"country1",
        groupItems:{
            group1:["Spain","China","Australia","Egypt"],
            group2:["Germany","Republic of Korea","South Africa"]
        }
    } };
    pivotTable.group(groupInfo);
    pivotTable.add("country1", "country1", GC.Spread.Pivot.PivotTableFieldType.columnField);
```

When ungrouping text groups, the field will be removed when ungrouped.

### Grouping Numbers<span class="css-1afrefi" aria-label="Copy"></span>

Grouping numbers with SpreadJS will add a number group. The origin field specified in the groupInfo will be changed to the group field to use as such. Grouping numbers appear as follows:

```
    let groupInfo = { originFieldName: "id",numberGroup: { by: 100 } };
    pivotTable.group(groupInfo);
```

When ungrouping number groups, the field will revert to the normal number field.

## Pivot Table Theme<span class="css-1afrefi" aria-label="Copy"></span>

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

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

![Pivot Table Panel Themes](//cdn.mescius.io/umb/media/j01ekfxz/pivottable-panel-themes.gif?rmode=max&width=756&height=394)

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-1bif4gd">

<div data-type="file" data-node-type="media" data-width="1415" data-height="737" data-id="cef8fbab-a9b1-4b6b-8a2b-090a0d0b9137" data-collection="contentId-3428352165" data-file-name="08-pivottable-panel-themes.gif?width=500&amp;height=260.42402826855124" data-file-size="1075122" data-file-mime-type="image/gif" data-alt="React Pivot Tables" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-1hc95xh" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="08-pivottable-panel-themes.gif?width=500&amp;height=260.42402826855124" data-test-status="complete" data-test-progress="1"></div>

</div>

</div>

</div>

</div>

## Pivot Styles<span class="css-1afrefi" aria-label="Copy"></span>

You can apply a [pivot table style](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”:

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-16n1vl6">

<div data-type="file" data-node-type="media" data-width="763" data-height="752" data-id="1862b45e-51e2-4688-a1a9-a942628bf6da" data-collection="contentId-3428352165" data-file-name="09-react.png?width=500&amp;height=492.7916120576671" data-file-size="128599" data-file-mime-type="image/png" data-alt="React Pivot Tables" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-rmmcwm" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="09-react.png?width=500&amp;height=492.7916120576671" data-test-status="complete" data-test-progress="1">![JavaScript Pivot Table](//cdn.mescius.io/umb/media/zk4nn21v/006-js.png?rmode=max&width=646&height=637)</div>

</div>

</div>

</div>

</div>

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

## Pivot Table AutofitColumn<span class="css-1afrefi" aria-label="Copy"></span>

SpreadJS’s 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 Panel Autofit](//cdn.mescius.io/umb/media/j1llz4ij/pivottable-panel-autofit.gif?rmode=max&width=754&height=396)

## Pivot Table Slicers<span class="css-1afrefi" aria-label="Copy"></span>

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. Users can quickly analyze and explore data subsets using slicers without modifying the underlying pivot table structure. SpreadJS supports both the [Item Slicer](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**

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-11ajxxg">

<div data-type="file" data-node-type="media" data-width="832" data-height="596" data-id="3e93a708-2b32-4769-8ae6-2abec0c45bc5" data-collection="contentId-3428352165" data-file-name="untitled-design-26.png?width=500&amp;height=358.1730769230769" data-file-size="400820" data-file-mime-type="image/png" data-alt="React Pivot Table - Item Slicers" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-1e1cs2j" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="untitled-design-26.png?width=500&amp;height=358.1730769230769" data-test-status="complete" data-test-progress="1">![Item Slicer](//cdn.mescius.io/umb/media/rdkft245/007-js.png?rmode=max&width=582&height=286)</div>

</div>

</div>

</div>

</div>

**PivotTable Timeline Slicer**

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-11ajxxg">

<div data-type="file" data-node-type="media" data-width="832" data-height="596" data-id="babe64ba-fd0c-4196-898c-cfa4296b4f60" data-collection="contentId-3428352165" data-file-name="12-react.png?width=419&amp;height=300&amp;mode=max" data-file-size="157948" data-file-mime-type="image/png" data-alt="React Pivot Table - Timeline slicers" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-1e1cs2j" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="12-react.png?width=419&amp;height=300&amp;mode=max" data-test-status="complete" data-test-progress="1">![Timeline Slicer](//cdn.mescius.io/umb/media/ocwp0dsl/008-js.png?rmode=max&width=586&height=420)</div>

</div>

</div>

</div>

</div>

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

## Pivot ContextMenu<span class="css-1afrefi" aria-label="Copy"></span>

SpreadJS offers a [Pivot ContextMenu](https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-context-menu/purejs "https://developer.mescius.com/spreadjs/demos/features/pivot-table/pivot-context-menu/purejs") 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](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 JavaScript Pivot Table Context Menus:

**The page area**

![React Pivot Table](//cdn.mescius.io/umb/media/pegd5pte/13-pt-page-area-cm.png?width=500&height=332.03559510567294)

**The header area**

![React Pivot Table](//cdn.mescius.io/umb/media/ugtcwshu/14-pt-header-area-cm.png?width=500&height=332.03559510567294)

**The data area**

![React Pivot Table](//cdn.mescius.io/umb/media/5wsftvj4/15-pt-data-area-cm.png?width=500&height=332.03559510567294)

**The Grand Total area**

![React Pivot Table](//cdn.mescius.io/umb/media/krjkktj5/16-pt-grand-total-area-cm.png?width=500&height=332.03559510567294)

[Users can also format values with given formats or customized ones](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.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-hnwjf0">

<div data-type="file" data-node-type="media" data-width="1280" data-height="720" data-id="29b80985-c95d-40f1-b69a-4e2299538e3d" data-collection="contentId-3428352165" data-file-name="17-pivottable-value-field-settings.gif?width=500&amp;height=281.25" data-file-size="290150" data-file-mime-type="image/gif" data-alt="React Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-1we96m5" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="17-pivottable-value-field-settings.gif?width=500&amp;height=281.25" data-test-status="complete" data-test-progress="1">![Value Field Settings](//cdn.mescius.io/umb/media/jfcna0sz/17-pivottable-value-field-settings.gif?rmode=max&width=764&height=430)</div>

</div>

</div>

</div>

</div>

## Pivot Conditional Formatting<span class="css-1afrefi" aria-label="Copy"></span>

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

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-p04dph">

<div data-type="file" data-node-type="media" data-width="1506" data-height="851" data-id="ff9f28f8-fbdf-4628-904b-e796c8c64524" data-collection="contentId-3428352165" data-file-name="18-react.png?width=500&amp;height=282.5365205843293" data-file-size="160050" data-file-mime-type="image/png" data-alt="React Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-4xklbd" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="18-react.png?width=500&amp;height=282.5365205843293" data-test-status="complete" data-test-progress="1">![JavaScript Pivot Table](//cdn.mescius.io/umb/media/a5yogyvs/18-react.png?rmode=max&width=757&height=428)</div>

</div>

</div>

</div>

</div>

# Benefits<span class="css-1afrefi" aria-label="Copy"></span>

Now that you have seen how SpreadJS can be used to add PivotTables to your application, we can go through some of the benefits of doing so:

## Interactive Data Analysis<span class="css-1afrefi" aria-label="Copy"></span>

With a few lines of code or a couple of clicks in the Designer, a SpreadJS Pivot Table can reduce hours of work to only a few minutes. Decrease potential errors by manually creating calculated fields, groups, and filters–then let SpreadJS Pivot Tables do the rest. Focus more time on interpreting and analyzing data efficiently rather than manually creating your data breakdowns. You can use the pivot table panel to seamlessly drag-and-drop fields between the different areas and customize how the pivot table displays your data.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-1ubgqda">

<div data-type="file" data-node-type="media" data-width="825" data-height="475" data-id="9a829c56-fa64-4054-a6e7-76b17a5864e4" data-collection="contentId-3428352165" data-file-name="01-interactivedataanalysis.png?width=500&amp;height=287.8787878787879" data-file-size="48023" data-file-mime-type="image/png" data-alt="Interative Data Analysis" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-s94s9n" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="01-interactivedataanalysis.png?width=500&amp;height=287.8787878787879" data-test-status="complete" data-test-progress="1">![Interactive Data Analysis](//cdn.mescius.io/umb/media/3uvj1ldh/01-interactivedataanalysis.png?rmode=max&width=695&height=400)</div>

</div>

</div>

</div>

</div>

## Reviewing Product Sales<span class="css-1afrefi" aria-label="Copy"></span>

Reporting sales numbers can be daunting, especially with thousands of records, products, offices, and employees, and that's where SpreadJS Pivot Tables help. A pivot table can summarize a large amount of raw data in more understandable terms. For example, SpreadJS Pivot Tables would allow you to see the sales of a particular salesperson during a specific period of time. Easily report actual sales numbers against a target, analyze employee commission levels, and view reseller transactions.

You can instantly aggregate sales numbers by different fields and filters, giving you a clear and concise view of the data you need. In this case, you can import sales data for multiple stores, filter by promotions, and separate them into different sales channels to get a breakdown of your sales data.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-1ubgqda">

<div data-type="file" data-node-type="media" data-width="825" data-height="475" data-id="322639a9-1a5b-48e0-be2d-b0bb012e7d7f" data-collection="contentId-3428352165" data-file-name="02-salespivottable.png?width=500&amp;height=287.8787878787879" data-file-size="63100" data-file-mime-type="image/png" data-alt="Sales Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-s94s9n" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="02-salespivottable.png?width=500&amp;height=287.8787878787879" data-test-status="complete" data-test-progress="1">![Sales Pivot Table](//cdn.mescius.io/umb/media/rezlgziw/02-salespivottable.png?rmode=max&width=625&height=360)</div>

</div>

</div>

</div>

</div>

## FinTech<span class="css-1afrefi" aria-label="Copy"></span>

Create income statements, balance sheets, and profit and loss statements easily with SpreadJS Pivot Tables. You can also emphasize profit subtotals, including gross and operating subtotals. Create custom groupings that might not be available in your source data to provide the exact data breakdown you need. Include calculated fields to summarize large amounts of data in concise, customizable tables.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-1ubgqda">

<div data-type="file" data-node-type="media" data-width="825" data-height="475" data-id="44ea7325-89b0-4c04-9b35-c58b09136155" data-collection="contentId-3428352165" data-file-name="03-financialpivottable.png?width=500&amp;height=287.8787878787879" data-file-size="49823" data-file-mime-type="image/png" data-alt="Financial Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-s94s9n" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="03-financialpivottable.png?width=500&amp;height=287.8787878787879" data-test-status="complete" data-test-progress="1">![Financial Pivot Table](//cdn.mescius.io/umb/media/h4ulogse/03-financialpivottable.png?rmode=max&width=665&height=383)</div>

</div>

</div>

</div>

</div>

## Marketing<span class="css-1afrefi" aria-label="Copy"></span>

With SpreadJS Pivot Tables, you can track your company's growth with various KPIs. You can also create a table focusing on multiple marketing strategies and inputs, including paid advertising campaigns, social media engagement, click-through, and conversion rates.

Visualize the analysis of advertising campaigns by geography, date ranges, and channels, and provide a breakdown of the results in an informative pivot table. For example, you could check product categories and see which categories customers purchase the most. Filter those orders by the corresponding promotion to help report on the promotion's effectiveness.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-1ubgqda">

<div data-type="file" data-node-type="media" data-width="825" data-height="475" data-id="d79cca10-46d9-4d02-8ebc-350620ac89ae" data-collection="contentId-3428352165" data-file-name="04-marketingpivottable.png?width=500&amp;height=287.8787878787879" data-file-size="107162" data-file-mime-type="image/png" data-alt="Marketing Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-s94s9n" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="04-marketingpivottable.png?width=500&amp;height=287.8787878787879" data-test-status="complete" data-test-progress="1">![Marketing Pivot Table](//cdn.mescius.io/umb/media/br3p4f4h/04-marketingpivottable.png?rmode=max&width=696&height=401)</div>

</div>

</div>

</div>

</div>

## Budgeting<span class="css-1afrefi" aria-label="Copy"></span>

SpreadJS Pivot Tables make creating budgets simple and straightforward. Create detailed pivot tables to compare budgets for the unique aspects of your business, such as tracking actual expenses compared to projected values. Summarize expenditures for different stores and product lines by months, categories, or any other fields with a simple interface–easily dragging and dropping fields to fit your requirements. Analyze and categorize the store spending and compare the year-over-year values.

<div class="rich-media-item mediaSingleView-content-wrap image-center css-oqqg55" data-layout="center" data-width-type="percentage" data-node-type="mediaSingle">

<div class="css-1ubgqda">

<div data-type="file" data-node-type="media" data-width="825" data-height="475" data-id="9798ce3e-16fd-4b07-ae0e-fc0fc0f5e46a" data-collection="contentId-3428352165" data-file-name="05-budgetpivottable.png?width=500&amp;height=287.8787878787879" data-file-size="81139" data-file-mime-type="image/png" data-alt="Budget Pivot Table" data-context-id="3428352165">

<div id="newFileExperienceWrapper" class="new-file-experience-wrapper css-s94s9n" data-testid="media-card-view">

<div class="media-file-card-view css-1yn77bd" data-testid="media-file-card-view" data-test-media-name="05-budgetpivottable.png?width=500&amp;height=287.8787878787879" data-test-status="complete" data-test-progress="1">![Budget Pivot Table](//cdn.mescius.io/umb/media/cizkjna5/05-budgetpivottable.png?rmode=max&width=695&height=400)</div>

</div>

</div>

</div>

</div>

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

Review the [documentation](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 JavaScript applications allows you to customize your users' experience and provide them with familiar spreadsheet functionality.