# Data-Grist 사용자 실전 가이드

이 문서는 data-grist를 실제 프로젝트에 적용하는 모든 사용자(개발자, 기획자, 디자이너 등)를 위한 **실전형 매뉴얼**입니다.

---

## 1. Quick Start (최소 예제)

```html
<data-grist id="grist"></data-grist>
```

```js
const columns = [
  {
    type: 'string',
    name: 'name',
    header: { renderer: () => '이름' },
    record: { renderer: v => v, options: {} },
    handlers: {},
    label: '이름'
  },
  {
    type: 'number',
    name: 'age',
    header: { renderer: () => '나이' },
    record: { renderer: v => v, options: {} },
    handlers: {},
    label: '나이'
  }
]
const data = {
  records: [
    { name: '홍길동', age: 30 },
    { name: '김철수', age: 25 }
  ]
}
const config = {
  columns,
  rows: {
    appendable: true,
    insertable: true,
    editable: true,
    groups: [],
    totals: [],
    classifier: () => {},
    handlers: {}
  },
  list: { fields: ['name'], details: [] },
  tree: {}
}

document.getElementById('grist').config = config
document.getElementById('grist').data = data
```

---

## 2. 실전 config 예시/패턴

- **행 선택/다중 선택**
  ```js
  config.rows.selectable = { multiple: true }
  ```
- **컬럼별 커스텀 editor/renderer**
  ```js
  columns.push({
    type: 'value-map',
    name: 'meta',
    header: { renderer: () => '메타' },
    record: { renderer: v => v, editor: 'value-map', options: {} },
    handlers: {},
    label: '메타'
  })
  ```
- **정렬/필터/페이징**
  ```js
  config.sorters = [{ name: 'age', desc: true }]
  config.filters = { header: true }
  config.pagination = { page: 1, limit: 20 }
  ```

---

## 3. 컬럼/옵션/이벤트/에디터별 실무 FAQ

- **Q. 컬럼 editor/renderer 확장은 어떻게?**
  - grist-editor에서 커스텀 editor/renderer를 등록하고, 컬럼의 `record.editor`에 타입 지정
- **Q. 행 선택이 안 될 때?**
  - config.rows.selectable 옵션 확인, data.records의 **selected** 필드 활용
- **Q. 필터/정렬이 안 먹힐 때?**
  - config.filters, config.sorters 구조와 컬럼 name 일치 여부 확인
- **Q. 값 검증/필수 입력은?**
  - 컬럼의 record.validation, record.mandatory 활용
- **Q. 집계(합계/평균 등)는?**
  - 컬럼의 accumulator: 'sum'|'avg'|'count' 등 지정

---

## 4. 트러블슈팅/실전 문제 해결

- **컬럼 렌더링이 깨질 때**: columns 배열 구조, 필수 필드(type, name, header, record 등) 누락 여부 확인
- **행 추가/삭제가 안 될 때**: config.rows.appendable/insertable 옵션 확인
- **이벤트가 동작하지 않을 때**: handlers/click 등 이벤트 핸들러 등록 위치와 함수 시그니처 확인
- **데이터 바인딩이 안 될 때**: data.records 구조, config.columns.name과 데이터 키 일치 여부 확인

---

## 5. 실전 팁/패턴

- 컬럼/행/그리드별로 스타일은 CSS 변수로 커스터마이즈
- 다국어(i18n)는 setLocale, label에 번역키 사용
- Storybook, demo 폴더에서 다양한 실전 예시 확인
- 커스텀 editor/renderer는 grist-editor 확장 구조 참고

---

## 6. 문서/데모/스토리북 링크

- [컬럼/에디터/옵션 상세](./configuration/README.md)
- [스토리북 예제](../../stories/)
- [데모 코드](../../demo/)

---

## 7. 자주 묻는 질문(FAQ)

- **Q. data-grist는 어떤 프로젝트에 적합한가?**
  - 대규모 데이터 테이블, 복잡한 편집/정렬/필터/선택/확장 기능이 필요한 엔터프라이즈 웹앱
- **Q. 커스텀 editor/renderer는 어떻게 추가?**
  - grist-editor에서 커스텀 엘리먼트 등록 후, 컬럼 record.editor에 타입 지정
- **Q. 대용량 데이터/성능 최적화는?**
  - pagination, limit, 서버사이드 fetchHandler 적극 활용

---

## 8. 실전 적용 사례/패턴

- 복합 폼, 마스터-디테일, 트리/그룹핑, 요약행, 대용량 데이터 관리 등 다양한 실전 패턴은 demo/스토리북에서 확인

---

**이 문서는 실제 사용자(개발자/기획자/디자이너)가 바로 적용할 수 있도록, 실전 예시/FAQ/문제해결/팁 중심으로 작성되었습니다.**
추가로 궁금한 점/실전 패턴/문제 상황이 있다면 언제든 문의하세요!