# Pivot Table Components

A list of the different Pivot Table components in SpreadJS, including UI and code examples for working with each

## Content

This topic covers the basic information related to pivot table components and their terminology.
The below image shows the **Pivot Area** (containing a pivot table) and **Pivot Panel** in a spreadsheet.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260303.9d1ac5.png?width=800)

## Pivot Area

The pivot area displays the pivot table which contains various fields and label items as shown in the below image:

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/pivotarea.png?width=800)

## Pivot Panel

The pivot panel is a task pane that can be used to add, remove, drag, and move fields in a pivot table. The pivot table panel consists of **PivotTable Fields**, **PivotTable Area**, and **Pivot View Manager** section as shown in the below image:
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260303.1041df.png?width=600)
You can also customize the layout of the pivot panel by using the `panelLayout` option. The above image shows the default panel layout (stack) whereas the below image shows the 'flow' pivot panel.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260303.48bd17.png?width=290)
The following code sample sets the pivot panel layout to flow:

```javascript
var layoutType = panel.panelLayout();
panel.panelLayout(GC.Spread.Pivot.PivotPanelLayoutType.flow);
```

By default, the pivot panel has a fixed size. However, you can resize the pivot pane by hovering your mouse over the left edge until the pointer changes to a double-headed arrow, then left-click, and drag. This allows you to view the long field names, if available.
![resizePanel.gif](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/resizePanel-20260303.d66fbf.gif?width=800)
To get a resizable pivot panel, you need to change the default configuration settings of the SpreadJS designer in the [DefaultConfig](/spreadjs/api/designer/modules/GC.Spread.Sheets.Designer#defaultconfig) variable of the `Designer` namespace.
The following code sample sets the resizable pivot panel in the `DefaultConfig`:

```javascript
let designer = new GC.Spread.Sheets.Designer.Designer("designer-container");
var config = GC.Spread.Sheets.Designer.DefaultConfig;
let pivotPanelIndex = config.sidePanels.findIndex((item) => item.uiTemplate === "pivotTablePanelTemplate");
config.sidePanels[pivotPanelIndex].allowResize = true;
config.sidePanels[pivotPanelIndex].showResizeLine = true
config.sidePanels[pivotPanelIndex].minWidth = "200px";
config.sidePanels[pivotPanelIndex].maxWidth = "800px";
designer.setConfig(config);
```

### Pivot Table Fields

The Pivot Table Fields section displays the fields from the data source, which can be added to a pivot table. You can select or unselect these fields to get the desired pivot table view.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260303.29d2cb.png?width=300)
The following code sample shows how to hide the PivotTable Fields section from the pivot panel.

```javascript
// Hide the "PivotTable fields" section
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.area | GC.Spread.Pivot.PivotPanelSection.viewList);
```

#### Search Box

The Pivot Table Fields section provides a search box above the field list, allowing you to quickly locate fields in large data sources.
![image](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260303.078a71.png?width=300)

>type=note
> **Notes:**
>
> * Matching is case-insensitive and supports wildcards (`?` for a single character, `*` for any sequence of characters).
> * If no fields match the keyword, the field list displays **"No matches"**.
> * Press **Esc** to clear the search box and reset the field list.

### PivotTable Area

The Pivot Table Area is a section of the pivot panel which displays the row, column, value, and filter fields of a pivot table. You can simply drag and drop the pivot table fields across these areas to switch between different pivot table views.
![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/pivottablearea.png)
The following table describes the above areas:

| Area | Description |
| ---- | ----------- |
| Rows | Displays as rows in a pivot table with Row Labels as the values for selected fields. |
| Columns | Displays as columns in a pivot table with Column Labels as the values for selected fields. |
| Filters | Used for filter operation in a pivot table. |
| Values | Displays the statistics data for the selected field. |

The following code sample shows how to hide the Pivot Table Area section from the pivot panel.

```javascript
// Hide the "PivotTable Area" section
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields | GC.Spread.Pivot.PivotPanelSection.viewList);
```

### Pivot View Manager

The Pivot view manager can be used to manage views of the pivot table. It can quickly restore the state of the pivot table saved at a certain moment. The following image shows the different saved views of the pivot table in the view manager.
![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/viewmanager.png)
The following code sample shows how to hide the Pivot View Manager section from the pivot panel.

```javascript
// Hide the "Pivot View Manager" section
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", myPivotTable, document.getElementById("panel"));
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields | GC.Spread.Pivot.PivotPanelSection.area);
```

For more details, refer to the [Pivot View Manager](/spreadjs/docs/features/pivot-table/pivot-view-manager) topic.