# 그리드 옵션 (options)

data-grist는 다양한 옵션을 통해 그리드의 동작, UI, 데이터 처리 방식을 세밀하게 제어할 수 있습니다.

## 1. 그리드 전체 옵션

| 옵션명       | 타입           | 기본값    | 설명                                     |
| ------------ | -------------- | --------- | ---------------------------------------- |
| data         | Array          | []        | 표시할 데이터 배열                       |
| columns      | Array          | []        | 컬럼 정의 배열                           |
| options      | Object         | {}        | 그리드 동작/스타일/기능 옵션             |
| editable     | Boolean        | false     | 전체 편집 가능 여부                      |
| selectable   | Boolean/String | false     | 행 선택 기능 (`true`, "multi", "single") |
| pageable     | Boolean        | false     | 페이징 기능                              |
| pageSize     | Number         | 20        | 페이지당 행 수                           |
| rowHeight    | Number         | 32        | 행 높이(px)                              |
| headerHeight | Number         | 32        | 헤더 높이(px)                            |
| theme        | String         | "default" | 테마명                                   |
| loading      | Boolean        | false     | 로딩 상태 표시                           |
| emptyMessage | String         | "No data" | 데이터 없을 때 표시할 메시지             |

## 2. 동작/기능 옵션

| 옵션명      | 타입     | 설명                    |
| ----------- | -------- | ----------------------- |
| sortable    | Boolean  | 전체 정렬 활성화        |
| filterable  | Boolean  | 전체 필터 활성화        |
| multiSort   | Boolean  | 다중 컬럼 정렬          |
| draggable   | Boolean  | 행 드래그/순서 변경     |
| copyable    | Boolean  | 셀 복사/붙여넣기        |
| rowNumber   | Boolean  | 행 번호 표시            |
| rowClass    | Function | 행별 커스텀 클래스 지정 |
| cellClass   | Function | 셀별 커스텀 클래스 지정 |
| rowStyle    | Function | 행별 스타일 지정        |
| cellStyle   | Function | 셀별 스타일 지정        |
| onRowClick  | Function | 행 클릭 이벤트 핸들러   |
| onCellClick | Function | 셀 클릭 이벤트 핸들러   |
| onEditStart | Function | 셀 편집 시작 이벤트     |
| onEditEnd   | Function | 셀 편집 종료 이벤트     |

## 3. 고급/확장 옵션

| 옵션명        | 타입          | 설명                              |
| ------------- | ------------- | --------------------------------- |
| virtualScroll | Boolean       | 가상 스크롤(대용량 데이터 최적화) |
| groupable     | Boolean       | 그룹핑 기능                       |
| summary       | Object        | 합계/평균 등 요약행 설정          |
| exportable    | Boolean       | 엑셀 등 내보내기 기능             |
| importable    | Boolean       | 엑셀 등 가져오기 기능             |
| contextMenu   | Boolean/Array | 우클릭 컨텍스트 메뉴              |
| keyboard      | Boolean       | 키보드 네비게이션 지원            |
| autoFit       | Boolean       | 컬럼 자동 너비 맞춤               |
| rowSpan       | Boolean       | 행 병합                           |
| colSpan       | Boolean       | 컬럼 병합                         |

## 4. 예시: 전체 옵션 적용

```js
const options = {
  sortable: true,
  filterable: true,
  selectable: 'multi',
  pageable: true,
  pageSize: 50,
  rowHeight: 36,
  headerHeight: 40,
  theme: 'dark',
  loading: false,
  emptyMessage: '데이터가 없습니다',
  virtualScroll: true,
  groupable: true,
  summary: { sum: true },
  exportable: true,
  importable: true,
  contextMenu: true,
  keyboard: true,
  autoFit: true
}
```

```html
<data-grist .data="${data}" .columns="${columns}" .options="${options}"></data-grist>
```

---

## 5. 실무 팁

- 컬럼별 옵션은 `columns` 배열 내 각 컬럼 객체에 직접 지정
- 그리드 전체 옵션은 `options` 객체로 전달
- 이벤트 핸들러는 속성 또는 addEventListener로 등록 가능
- 스타일/테마는 CSS 변수 또는 theme 옵션으로 커스터마이즈
- 대용량 데이터는 `virtualScroll` 옵션을 적극 활용

---

## 6. 참고

- 더 많은 고급 옵션, 커스텀 렌더러/에디터, 이벤트, 스타일 확장 등은 공식 문서 및 소스코드를 참고하세요.
- 실사용 예제와 Storybook, demo 폴더의 샘플을 참고하면 빠르게 익힐 수 있습니다.