# 이벤트(Event)

data-grist는 다양한 커스텀 이벤트를 지원하여, 그리드의 동작을 외부에서 제어하거나 반응할 수 있습니다.

## 1. 주요 지원 이벤트

| 이벤트명       | 설명                   | detail 구조 예시                         |
| -------------- | ---------------------- | ---------------------------------------- |
| cell-click     | 셀 클릭 시 발생        | `{ row, column, value }`                 |
| row-selected   | 행 선택 시 발생        | `{ row, selectedRows }`                  |
| edit-start     | 셀 편집 시작 시 발생   | `{ row, column, value }`                 |
| edit-end       | 셀 편집 종료 시 발생   | `{ row, column, value, oldValue }`       |
| field-change   | 에디터 값 변경 시 발생 | `{ before, after, record, column, row }` |
| data-changed   | 데이터 전체 변경 시    | `{ data }`                               |
| sort-changed   | 정렬 상태 변경 시      | `{ sorters }`                            |
| filter-changed | 필터 상태 변경 시      | `{ filters }`                            |
| page-changed   | 페이지 이동 시         | `{ page, pageSize }`                     |

## 2. 이벤트 핸들러 등록법

### addEventListener 방식

```js
grist.addEventListener('cell-click', e => {
  console.log('Clicked cell:', e.detail)
})
```

### 속성 바인딩 방식 (Lit 등)

```html
<data-grist @cell-click="${onCellClick}"></data-grist>
```

## 3. 커스텀 이벤트 활용 팁

- `field-change` 이벤트는 에디터 팝업에서 값이 바뀔 때 발생하며, undo/redo 구현에도 활용 가능
- `row-selected` 이벤트로 선택된 행의 데이터 추출 가능
- `edit-start`/`edit-end`로 편집 상태 UI 제어 가능

## 4. 참고

- 이벤트 detail 구조는 상황에 따라 확장될 수 있으니, 실제 e.detail을 콘솔로 확인하는 것이 좋습니다.
- Storybook, demo 폴더에서 다양한 이벤트 활용 예시를 참고하세요.