Editable Cell
Betav1.0.0셀 클릭 시 input/select/switch 로 인라인 편집.
Loading…
Installation
pnpm dlx @groudit/cli@latest add editable-cellTypes
| Type | 렌더링 | 사용 케이스 |
|---|---|---|
| text | Input | 이름·설명·코드 등 |
| number | Input type=number | 가격·수량·점수 |
| select | Select dropdown | 카테고리·상태·플랜 |
| switch | Switch (즉시 토글) | 활성/비활성, 재고 유무 |
| badge | Badge (읽기 전용) | 변경 불가 상태 표시 |
Dependencies
설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.
npm packages
| Package | Version |
|---|---|
| clsx | 2.1.1 |
| tailwind-merge | 3.6.0 |
Accessibility
Keyboard interactions
| Key | Description |
|---|---|
EnterSpace | 셀 편집 시작. |
Enter | 변경 저장 + 편집 종료. |
Esc | 변경 취소 + 편집 종료. |
Tab | 다음 셀로 이동 (편집 저장). |
Notes
- •click 모드 — hover 시 시각적으로 편집 가능함을 표시.
- •always 모드 — 항상 input 노출. 컬럼 단위로 일관성 유지.
- •에러 검증 시 aria-invalid + FormMessage 권장.