인라인 편집 · 선택 · ref API
셀 더블클릭 → 인라인 편집. selectable, getSavedData/getChangedData/getDeletedData ref API.
셀 더블클릭으로 편집, 체크박스로 선택:
| ID | 상품명 (편집) | 카테고리 (편집) | 가격 (편집) | 재고 (편집) | |
|---|---|---|---|---|---|
| 1 | 사과 | 과일 | 3,500원 | 120개 | |
| 2 | 바나나 | 과일 | 2,800원 | 85개 | |
| 3 | 체리 | 과일 | 12,000원 | 30개 | |
| 4 | 당근 | 채소 | 1,500원 | 200개 | |
| 5 | 브로콜리 | 채소 | 2,400원 | 60개 | |
| 6 | 감자 | 채소 | 900원 | 500개 | |
| 7 | 쌀 | 곡물 | 45,000원 | 25개 | |
| 8 | 귀리 | 곡물 | 9,800원 | 40개 |
API
GridProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| getRowId | (row, idx) => string | number | - | 행 키 추출. 편집/선택/트리 사용 시 필수 권장 |
| selectable | boolean | false | 첫 컬럼에 체크박스 자동 추가 |
| onRowChange | (row, id) => void | - | 편집 commit 시 콜백 |
GridColumn
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| editable | boolean | false | 더블클릭 인라인 편집 활성 |
| editor | 'text' | 'number' | 'date' | 'dropdown' | 'text' | 편집 모드 input 종류 |
GridHandle
| 메서드 | 반환 | 설명 |
|---|---|---|
| getSavedData() | TRow[] | 편집 반영, 삭제 제외한 현재 데이터 |
| getChangedData() | TRow[] | 편집된 행만 (PATCH 페이로드) |
| getDeletedData() | TRow[] | 삭제된 행의 원본 스냅샷 |
| deleteSelected() | void | 체크박스 선택 행을 모두 삭제 bucket으로 |
| reset() | void | 편집·삭제·추가 내역 폐기, 원본 복원 |