# 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.

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

## 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)

## 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:

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

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.

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

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.

![ResizablePivotTableSidePanel](https://cdn.mescius.io/document-site-files/images/ef9b66d1-0ae2-4e94-b8cb-f9f893aacc8d/ResizablePivotTableSidePanel.e46f0f.png?width=330)

To get a resizable pivot panel, you need to change the default configuration settings of the SpreadJS designer in the [DefaultConfig](/spreadjs/api/v18/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.

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

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

### 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/v18/features/pivot-table/pivot-view-manager) topic.