# GC.Spread.Pivot.PivotPanel

## Content

# Class: PivotPanel

[Spread](../modules/GC.Spread).[Pivot](../modules/GC.Spread.Pivot).PivotPanel

## Table of contents

### Constructors

- [constructor](GC.Spread.Pivot.PivotPanel#constructor)

### Methods

- [attach](GC.Spread.Pivot.PivotPanel#attach)
- [destroy](GC.Spread.Pivot.PivotPanel#destroy)
- [detach](GC.Spread.Pivot.PivotPanel#detach)
- [panelLayout](GC.Spread.Pivot.PivotPanel#panellayout)
- [sectionVisibility](GC.Spread.Pivot.PivotPanel#sectionvisibility)
- [findControl](GC.Spread.Pivot.PivotPanel#findcontrol)

## Constructors

### <a id="constructor" name="constructor"></a> constructor

• **new PivotPanel**(`name`, `pivotTable`, `host`)

Represents the pivot panel of pivot table.

**`example`**
```javascript
//This example creates a pivot panel.
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"),{sheetCount:3});
var sourceSheet = spread.getSheet(0);
var sheet = spread.getSheet(1);
var sourceData = [["Date","Buyer","Type","Amount"],
                  ["01-Jan","Mom","Fuel",74],
                  ["15-Jan","Mom","Food",235],
                  ["17-Jan","Dad","Sports",20],
                  ["21-Jan","Kelly","Books",125]];
sourceSheet.setArray(0, 0, sourceData );
sourceSheet.tables.add('sourceData', 0, 0, 5, 4);
var layout = GC.Spread.Pivot.PivotTableLayoutType.compact;
var theme = GC.Spread.Pivot.PivotTableThemes.medium2;
var options = {showRowHeader: true, showColumnHeader: true};
var pivotTable = sheet.pivotTables.add("pivotTable_1", 'sourceData', 1, 1, layout, theme, options);
pivotTable.suspendLayout();
pivotTable.options.showRowHeader =true;
pivotTable.options.showColumnHeader =true;
pivotTable.add("Buyer", "Buyer", GC.Spread.Pivot.PivotTableFieldType.columnField);
pivotTable.add("Type", "Type", GC.Spread.Pivot.PivotTableFieldType.rowField);
pivotTable.add("Amount", "Sum of Amount",   GC.Spread.Pivot.PivotTableFieldType.valueField, GC.Pivot.SubtotalType.sum);
var panel = new GC.Spread.Pivot.PivotPanel("myPivotPanel", pivotTable, document.getElementById("panel"));
pivotTable.resumeLayout();
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `name` | `string` | Indicates the Pivot panel name. |
| `pivotTable` | [`PivotTable`](GC.Spread.Pivot.PivotTable-1) | Indicates the pivot table that is related pivot panel. |
| `host` | `HTMLDivElement` | Indicates the container html element of the pivot panel. |

## Methods

### <a id="attach" name="attach"></a> attach

▸ **attach**(`pivotTable`): `any`

**`description`** attach to a pivot table for pivot panel, then the pivot panel can control the bound pivot table.

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `pivotTable` | [`PivotTable`](GC.Spread.Pivot.PivotTable-1) | Indicates the pivot table which is attached. |

#### Returns

`any`

void

___

### <a id="destroy" name="destroy"></a> destroy

▸ **destroy**(): `any`

**`description`** destroy the PivotPanel.

#### Returns

`any`

___

### <a id="detach" name="detach"></a> detach

▸ **detach**(): `void`

**`description`** detach the pivot table for pivot panel, stop the pivot panel control bound pivot table.

#### Returns

`void`

void

___

### <a id="panellayout" name="panellayout"></a> panelLayout

▸ **panelLayout**(`value?`): `void` \| [`PivotPanelLayoutType`](../enums/GC.Spread.Pivot.PivotPanelLayoutType)

**`description`** set or get the panelLayout type.

#### Parameters

| Name | Type |
| :------ | :------ |
| `value?` | [`PivotPanelLayoutType`](../enums/GC.Spread.Pivot.PivotPanelLayoutType) |

#### Returns

`void` \| [`PivotPanelLayoutType`](../enums/GC.Spread.Pivot.PivotPanelLayoutType)

GC.Spread.Pivot.PivotPanelLayoutType | void

___

### <a id="sectionvisibility" name="sectionvisibility"></a> sectionVisibility

▸ **sectionVisibility**(`value?`): `number` \| `void`

**`description`** get or set which sections are visible.

**`example`**
```javascript
 var visibility = pivotPanel.sectionVisibility() // 7;
 visibility = visibility & ~GC.Spread.Pivot.PivotPanelSection.viewList; // 3
 pivotPanel.sectionVisibility(visibility);
```

#### Parameters

| Name | Type |
| :------ | :------ |
| `value?` | `number` |

#### Returns

`number` \| `void`

The visibility value.

___

### <a id="findcontrol" name="findcontrol"></a> findControl

▸ `Static` **findControl**(`host`): [`PivotPanel`](GC.Spread.Pivot.PivotPanel)

Gets the PivotPanel instance by the host element.

**`example`**
```javascript
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sourceSheet = spread.getSheet(0)
var sheet = spread.getSheet(1);
var sourceData = [["Date","Buyer","Type","Amount"],
                 ["01-Jan","Mom","Fuel",74],
                 ["15-Jan","Mom","Food",235],
                 ["17-Jan","Dad","Sports",20],
                 ["21-Jan","Kelly","Books",125]];
sourceSheet.setArray(0, 0, sourceData);
sourceSheet.tables.add('sourceData', 0, 0, 5, 4);
var layout = GC.Spread.Pivot.PivotTableLayoutType.compact;
var theme = GC.Spread.Pivot.PivotTableThemes.medium2;
var options = {showRowHeader: true, showColumnHeader: true};
sheet.pivotTables.add("pivotTable_1", 'sourceData', 1, 1, layout, theme, options);
var pivotTable = sheet.pivotTables.get("pivotTable_1");
var panel = new GC.Spread.Pivot.PivotPanel("sourceData", pivotTable, document.getElementById("pivotPanel"));
var pivotPanel = GC.Spread.Pivot.PivotPanel.findControl("pivotPanel");
```

#### Parameters

| Name | Type | Description |
| :------ | :------ | :------ |
| `host` | `string` \| `HTMLElement` | The host element or the host element id. |

#### Returns

[`PivotPanel`](GC.Spread.Pivot.PivotPanel)

The PivotPanel instance.