# 행 동작

## Content

테이블 시트는 행 머리글에 상태를 표시하고 UI에서 행 작업(row operations)을 수행할 수 있는 특별한 열을 제공합니다.
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-rowaction.png)
아래는 [ableSheet.rowActionOptions](/spreadjs/api/v18/classes/GC.Spread.Sheets.TableSheet.TableSheet#rowActionOptions) 메서드를 통해 활성화할 수 있는 **BuiltInRowActions** 클래스의 기본 제공 행 작업입니다:

| 이름 | 설명 |
| --- | --- |
| pinRow | 행을 고정합니다. |
| dirtyStatus | 행의 데이터 변경 사항을 표시합니다. |
| warningInfo | 행에 경고 정보를 표시합니다. |
| removeRow | 행을 삭제합니다. |
| saveRow | 행의 데이터 변경 사항을 저장합니다. |
| resetRow | 행의 데이터 변경 사항을 초기화합니다. |

아래 코드 샘플은 테이블 시트에서 행 작업을 활성화하는 방법을 보여줍니다:

```javascript
//테이블 시트 초기화
var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet);

//행 동작 초기화
var rowActions = GC.Spread.Sheets.TableSheet.BuiltInRowActions;
let options = sheet.rowActionOptions();
options.push(
    rowActions.removeRow,
    rowActions.saveRow,
    rowActions.resetRow,
);
sheet.rowActionOptions(options);
```

## 사용자 지정 작업

사용자 정의 옵션을 `rowActionOptions` 메서드에 전달하여 행 작업을 커스터마이즈할 수 있습니다. 예를 들어, 체크박스 및 댓글 팝업과 같은 사용자 정의 행 작업을 다음과 같이 추가할 수 있습니다:
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/ts-rowaction-custom.gif)
다음 속성을 사용하여 행 작업을 사용자 정의할 수 있습니다:

| 속성 | 설명 |
| --- | --- |
| name<br>*string* | 옵션의 이름 |
| icons<br>*\(string \| GC\.Spread\.Sheets\.ButtonImageType\)* | 상태를 나타내는 아이콘들 |
| iconSelector<br>*\(item: any\, index: number\) =\> number \| boolean* | 상태에 따라 아이콘을 선택하는 함수 |
| tooltip<br>*String* | 행 작업에 대한 툴팁 |
| command<br>*string* | 행 작업 클릭 시 실행할 명령 이름 |
| shortcutKey<br>*GC.Spread.Sheets.TableSheet.IShortcutKey* | 행 작업을 실행할 단축키 |

다음은 테이블 시트에서 사용자 정의 행 작업을 생성하는 코드 샘플입니다:

```javascript
function addCustomActions(sheet){
   var options = sheet.rowActionOptions();

   // 체크/해제 작업 추가
   options.push({
       name: 'check',
       icons: ["data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8L3N2Zz4K", "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBmaWxsPSJ0cmFuc3BhcmVudCIvPgo8cmVjdCB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIGZpbGw9InRyYW5zcGFyZW50Ii8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTIgMEgwVjEySDEyVjBaTTEgMTFWMUgxMVYxMUgxWiIgZmlsbD0iIzY2NjY2NiIvPgo8cGF0aCBkPSJNNS4yNSA5TDIgNS42MTI5TDMuMDA3MTQgNC41NjMyOEw1LjI1IDYuODkzM0w4Ljk4NTcxIDNMMTAgNC4wNDk2M0w1LjI1IDlINS4yNVoiIGZpbGw9IiM2NjY2NjYiLz4KPC9zdmc+Cg=="],
       tooltip: "Check/Uncheck",
       iconSelector: function (item) {
           return !!checkMap[item.id];
       },
       command: CheckRow
   });

   // 데이터에 댓글이 있으면 댓글 플래그 표시
   options.push({
       name: 'comment',
       icons: ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABmJLR0QA/wD/AP+gvaeTAAAAqklEQVQokZWPLQ7CUBCEv759lkMggAMQPAKN5QLNpj0BZ+gJ2tSiuAUag4ZKEi6ApW8xUAhJfxi3m29mMpGqpkAGjOjWHdh6IBORRZ7n5y46TdNZXddHVNV6khupqvmv4wJMWtiqLMspQGN4P/rU11D9Bv3d4IZAL0XAZ3Qcx3MRWbXRZjYGTh4gSZJlCGFvZjsze7R4biKy9gAhhL1zblMUxWHIhutQGOAJuws9bfdnMH0AAAAASUVORK5CYII="],
       tooltip: "Show the comment",
       iconSelector: function (item) {
           return item.notes ? item.notes.length > 0 : false;
       },
       shortcutKey: { key: 65 /* A */, ctrl: true, alt: true },
       command: ShowComment
   });

   // 데이터에 첨부파일이 있으면 첨부 플래그 표시
   options.push({
       name: 'attachment',
       icons: ["data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAAmJLR0QA/4ePzL8AAADYSURBVBgZVcEtS4NhGIbha7KyGZZMZifIDA4/GCgWP7pYRQTv834MhoFhYnmwW4ZJmEwQRCxaDIaBNs268b4q6j9xKmPuODTI13nli5oGeeApjJK3xzCrPtvzBwrq4sZW1UO0OytuL0i+y33M6lfGjuzaJ2j7su3TsqKdqStjdS6YJLElIrc74zz7muKQn/uJzZB6xep2FUp0WJFEjVOvkFKmQTNMkTCvH7xvDJNS9kuOmSP1af3ho5qjxSfRFklCST0c0qjmyLNJx8fUF7Mc8MIbza0R/fMNfN1QmAjSSbsAAAAASUVORK5CYII="],
       tooltip: "Attachment",
       iconSelector: function (item) {
           return item.photoUrl ? item.photoUrl.length > 0 : false;
       }
   });

   sheet.rowActionOptions(options);
}
```