# 그룹 패널과 드래그 앤 드롭

## Content

**wijmo.grid.grouppanel** 모듈은 그리드에 Outlook 스타일의 그룹화 UI를 추가하는 **GroupPanel** 컨트롤을 제공합니다.

**그룹 패널** 컨트롤을 사용하려면 열 헤더를 패널로 드래그하여 그룹을 만듭니다. 그룹을 새 위치로 드래그하거나 그룹을 제거할 수도 있습니다.

먼저 FlexGrid를 만듭니다:

```javascript
import * as wjGrid from '@mescius/wijmo.grid';
import * as wjGridGroupPanel from '@mescius/wijmo.grid.grouppanel';

  // 그룹 패널 그리드 생성 
  var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: data
  });
```

그런 다음 그룹 패널을 만들고 FlexGrid 인스턴스에 대한 참조를 전달합니다.

```javascript
// 그룹 패널 생성 및 그리드에 전달
var theGroupPanel = new wjGridGroupPanel.GroupPanel('#theGroupPanel', {
	placeholder: 'Drag columns here to create groups',
	grid: theGrid
});
```

GroupPanel 컨트롤은 다음과 같은 키보드 명령을 지원합니다:

| **키 조합** | **동작** |
| ---- | --- |
| **←(왼쪽 화살표)** | 이전 그룹으로 포커스를 이동합니다. |
| **→(오른쪽 화살표)** | 다음 그룹으로 포커스를 이동합니다. |
| **Home** | 첫 번째 그룹으로 포커스를 이동합니다. |
| **End** | 마지막 그룹으로 포커스를 이동합니다. |
| **Ctrl + ←** | 현재 그룹을 왼쪽으로 이동합니다. |
| **Ctrl + →** | 현재 그룹을 오른쪽으로 이동합니다. |
| **Delete** | 현재 그룹을 삭제합니다. |
| **Alt + G** | 활성 셀이 위치한 열을 그룹화합니다. (그리드에 포커스가 있는 경우에만 작동) |