# 테이블 시트 상호작용 동작
## Content
테이블 시트는 가능한 많은 사람들이 사용할 수 있도록 다양한 **상호작용 기능**을 제공합니다.
## 확대 및 축소
테이블 시트는 **Ctrl 키 + 마우스 휠**을 사용하여 확대 및 축소를 지원합니다.
* **확대:** `Ctrl + 마우스 휠 위로`
* **축소:** `Ctrl + 마우스 휠 아래로`
## 열 크기 조절
테이블 시트에서는 **열 머리글 셀의 오른쪽 경계선을 드래그하여 열 너비를 조절**할 수 있습니다.
또한, **열 머리글 셀의 오른쪽 경계선을 더블 클릭**하면 해당 열 너비가 **자동 맞춤**됩니다. [AutoFitType](/spreadjs/api/enums/GC.Spread.Sheets.AutoFitType) 열거형 옵션 중 `cellWithHeader` 값을 사용하여 자동 맞춤 방식을 설정할 수 있습니다.
선택한 열의 크기를 조절할 때 **인접한 열의 너비도 함께 조절**하고 싶다면, 기본 동작을 변경하기 위해 **columnResizeMode**를 `split`으로 설정할 수 있습니다.
다음 코드 샘플은 자동 맞춤 모드를 설정하고, 열 크기 조절 모드를 `split`으로 변경하는 방법을 보여줍니다.
```javascript
// autoFitType을 cellWithHeader로 설정
spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
// ResizeMode을 Split로 설정
spread.options.columnResizeMode = GC.Spread.Sheets.ResizeMode.split;
```
`ViewOptions` 클래스의 `defaultColumnWidth` 속성을 사용하여 테이블 시트 뷰의 **기본 열 너비**를 설정할 수도 있습니다. 기본값은 **60**입니다.
```javascript
var view = customerTable.addView("myView", [
{ value: "customerKey", caption: "Customer Key" },
{ value: "customer", caption: "Customer" },
{ value: "billToCustomer", width: 200, caption: "Bill To Customer" },
{ value: "category", width: 120, caption: "Category" },
{ value: "buyingGroup", width: 180, caption: "Buying Group" },
{ value: "primaryContact", width: 170, caption: "Primary Contact" },
{ value: "validFrom", width: 150, caption: "Valid From" },
], false, {
// 기본 열 너비 설정
defaultColumnWidth: 100
});
```
## 잘라내기, 복사, 붙여넣기
테이블 시트는 **셀, 행, 열 단위의 잘라내기, 복사, 붙여넣기**를 **단축키** 또는 **마우스 오른쪽 클릭 메뉴**를 통해 지원합니다.
### 클립보드 작업을 위한 단축키
| 작업 | 윈도우 | 맥 |
| --- | --- | --- |
| 잘라내기 | Ctrl + X | Command + X |
| 복사 | Ctrl + C | Command + C |
| 붙여넣기 | Ctrl + V | Command + V |
셀, 행, 열을 선택한 상태에서 **오른쪽 클릭**하면 클립보드 관련 작업이 포함된 **컨텍스트 메뉴**가 표시됩니다.
여러 행을 새 행에 **한 번에 붙여넣기** 하려면, `allowExtendPasteRange` 옵션을 `true`로 설정해야 합니다.
다음 코드 샘플은 **SpreadJS에서 `allowExtendPasteRange` 옵션을 활성화**하는 방법을 보여줍니다:
```javascript
// 여러 행을 새 행에 붙여넣을 수 있도록 allowExtendPasteRange 옵션 활성화
spread.options.allowExtendPasteRange = true;
```
## 드래그 작업
테이블 시트는 **드래그 채우기(drag fill)**, **드래그 앤 드롭(drag-drop)**, **드래그 복사(drag copy)** 등 다양한 드래그 작업을 지원합니다.
* **드래그 채우기(Drag fill)**는 선택된 영역의 **오른쪽 아래 모서리**를 클릭한 뒤, 마우스를 아래 또는 위로 이동하여 수행됩니다.
드래그만 하면 시리즈가 복사(copy)되고, **Ctrl 키를 누른 상태로 드래그**하면 **시리즈가 채워짐(fill)** 처리됩니다. 드래그 채우기 결과는 팝업 메뉴를 통해 `"시리즈 복사"` 또는 `"시리즈 채우기"`로 변경할 수 있습니다.
* **드래그 앤 드롭(Drag-drop)** 은 선택 영역의 **테두리를 드래그하여** 목적 셀에 **드롭(drop)** 하는 방식으로 수행됩니다.
* **드래그 복사(Drag copy)** 는 **Ctrl 키를 누른 채로** 선택 영역의 테두리를 드래그하여 목적 셀에 드롭하면 수행됩니다.
## 단축키
테이블 시트는 "삽입 및 수정된 모든 행 저장”과 같은 테이블 시트 전용 기능을 포함하여 다양한 **단축키**를 지원합니다.
다음 표는 테이블 시트에서 지원하는 모든 단축키를 나열한 것입니다:
| 작업 | 단축키 |
| --- | --- |
| @cols=2:**일반 작업** |
| 복사 | Ctrl+C |
| 잘라내기 | Ctrl+X |
| 붙여넣기 | Ctrl+V |
| 편집 모드 진입 | F2 |
| 직접 입력 | Char |
| 편집 종료 | Esc |
| 삭제 | Del |
| 삭제 후 편집 모드 진입 | BackSpace |
| 입력 후 아래로 이동 | Enter |
| 입력 후 위로 이동 | Shift + Enter |
| 다음 줄 입력 | Alt+Enter, Ctrl+Enter |
| 삽입 및 수정된 모든 행 저장 | Ctrl + Shift + S |
| @cols=2:**이동** |
| 위로 이동 | Up key |
| 아래로 이동 | Down key |
| 왼쪽으로 이동 | Left key |
| 오른쪽으로 이동 | Right key |
| 아래로 이동 | Enter |
| 오른쪽으로 이동 | Tab |
| 왼쪽으로 이동 | Shift + Tab |
| 최상/최하/좌측/우측 셀로 이동 | Ctrl + Arrow |
| 다음 페이지로 이동 | PageDown |
| 이전 페이지로 이동 | PageUp |
| @cols=2:**선택** |
| 마우스 클릭 위치까지 범위 확장 | Shift + Mouse click |
| 셀 선택 영역 확장 | Shift + Arrow |