# Data-Grist & Grist-Editor Configuration Manual

**data-grist**는 Lit 기반의 웹 컴포넌트 데이터 그리드입니다. **grist-editor**는 data-grist 컬럼의 editor/renderer 확장(커스텀 엘리먼트) 구현체를 제공합니다.

---

## 1. 주요 속성 및 구조 (코드 근거)

- `.data`: 배열. 각 객체가 한 행(row)에 해당합니다.
- `.columns`: 배열. 각 객체가 한 컬럼(column)에 해당합니다.
  - 컬럼 객체의 주요 속성:
    - `type`: string, number, boolean, select, date, text, object 등
    - `name`: 데이터 키
    - `header`: 컬럼 헤더명
    - `editor`: editor 타입(예: 'input', 'value-map', 'parameters' 등)
    - `renderer`: renderer 타입(예: 'text', 'custom' 등)
    - `sortable`, `filterable`, `resizable`, `frozen`, `hidden`, `options`, `align`, `tooltip` 등
- `.options`: 객체. 그리드 전체 동작/스타일/기능 제어
  - 지원 옵션(코드/문서 근거):
    - `sortable`, `filterable`, `selectable`, `pageable`, `pageSize`, `rowHeight`, `headerHeight`, `theme`, `loading`, `emptyMessage`, `virtualScroll`, `groupable`, `summary`, `exportable`, `importable`, `contextMenu`, `keyboard`, `autoFit`, `rowSpan`, `colSpan` 등

---

## 2. 이벤트 (코드 근거)

- addEventListener 또는 @event로 등록 가능
- 주요 이벤트:
  - `cell-click`, `row-selected`, `edit-start`, `edit-end`, `field-change`, `data-changed`, `sort-changed`, `filter-changed`, `page-changed` 등
- 이벤트 detail 구조는 `{ row, column, value }`, `{ before, after, record, column, row }` 등

---

## 3. 스타일/테마/다국어 (코드 근거)

- CSS 변수(`--grist-row-height`, `--grist-header-bg` 등)와 `theme` 옵션 지원
- 다국어(i18n)는 JSON 번역 파일, setLocale, i18n-label 컬럼 등으로 지원

---

## 4. 실제 코드 예시

```js
const columns = [
  { type: 'string', name: 'name', header: '이름', sortable: true },
  { type: 'value-map', name: 'meta', header: '메타정보', editor: 'value-map' }
]
const data = [{ name: '홍길동', meta: { key: 'value' } }]
const options = { sortable: true, theme: 'dark' }
```

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

---

## 5. 문서별 실제 역할

- [columns.md] 컬럼 타입, editor/renderer, 컬럼별 옵션, 예시
- [editors.md] grist-editor에서 구현된 editor별 옵션, 팝업 동작, 사용법
- [options.md] 실제 지원 옵션 목록, 타입, 예시
- [events.md] 코드에서 발생하는 이벤트, detail 구조, 등록/활용법
- [theme.md] CSS 변수, theme 옵션, 스타일 적용법
- [i18n.md] 번역 파일 구조, setLocale, i18n-label 컬럼

---

**위 내용은 실제 구현 코드와 공식 문서에 근거한 사실만을 정리한 것입니다.**