# PivotGrid

## Content

**PivotGrid**는 **PivotEngine** 구성 요소에서 생성된 데이터 요약을 표시합니다. **FlexGrid** 컨트롤을 확장하여 다음 기능을 제공합니다:

* 계층적인 행 및 열 헤더
* 접을 수 있는 행 및 열 그룹
* 값을 계산하는 데 사용된 데이터를 보기 위해 셀을 드릴다운
* 필드 속성을 편집할 수 있는 컨텍스트 메뉴

**PivotGrid** 컨트롤을 시작하려면 **PivotGrid.itemsSource** 속성을 **PivotEngine**의 인스턴스로 설정하여 두 구성 요소를 연결해주세요.

먼저, 그리드를 위한 호스트 요소가 필요합니다.

```HTML
<div id="pivotGrid"></div>
```


그 다음 코드로 PivotGrid를 생성할 수 있습니다.

```javascript
let ng = new wjOlap.PivotEngine({
    autoGenerateFields: false,
    itemsSource: data
});

let pivotGrid = new wjOlap.PivotGrid("#pivotGrid", {
    itemsSource = ng
});
```

## 소계

**PivotEngine**이 행 또는 열 소계를 표시하도록 설정되면, **PivotGrid**는 자동으로 접을 수 있는 행 및 열 그룹을 생성합니다.

총계를 데이터 앞에 또는 뒤에 표시하려면, **PivotEngine** 의 **totalsBeforeData** 속성을 사용하여 구성할 수 있습니다.

```javascript
ng.totalsBeforeData = true;
```


**PivotGrid** 의 **collapsibleSubtotals** 속성을 사용하여 행 및 열 그룹을 접을 수 있도록 구성할 수 있습니다.

```javascript
pivotGrid.collapsibleSubtotals = true;
```


두 가지를 모두 활성화하면 다음과 같은 그리드를 얻을 수 있습니다

![pivot-grid-collapsible-subtotals](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/pivot-grid-collapsible-subtotals.7cebb0.png?width=400)

**참고:**
'Grand Totals(총계)' 행도 데이터 앞에 이동되었습니다.

## 소계와 고정 행

**PivotEngine** 을 설정하여 데이터를 위에 총계를 표시하는 것은 **PivotGrid** 에 고정된 행이 있을 때 편리합니다. 이를 통해 그리드가 스크롤될 때 총계가 항상 보이도록 보장할 수 있습니다.

이 예제에서는 사용자가 스크롤할 때 *Grand Total* 행을 그리드 상단에 고정시킵니다.
![pivot-grid-subtotals-frozen-rows](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4153b498-0e9e-452c-b1b8-6a8130043972/pivot-grid-subtotals-frozen-rows.d0dd9b.png?width=700)

**PivotGrid** 에서 행을 고정하는 방법은 **FlexGrid**와 동일합니다. 고정하고자 하는 행의 수를 **frozenRows** 속성에 설정하면 됩니다. 아래 예제는 **PivotGrid**에서 첫 번째 행을 고정합니다.

```javascript
pivotGrid.frozenRows = 1;
```