Editable Cell

Betav1.0.0

엔터프라이즈 Analytical Table 의 셀 편집 패턴 (SAP UI5 ALV 참고). 셀 클릭 → input/select/switch 로 전환 → Enter / blur 로 저장. Table 안에 넣어 쓰는 게 일반적이지만 단독으로도 사용 가능.

Loading…

import { EditableCell } from "@/components/ui/editable-cell";

// text / number
<EditableCell
  type="text"
  value={name}
  onChange={setName}
/>

// select
<EditableCell
  type="select"
  value={category}
  onChange={setCategory}
  options={[
    { value: "books", label: "Books" },
    { value: "electronics", label: "Electronics" },
  ]}
/>

// switch (즉시 토글)
<EditableCell
  type="switch"
  value={inStock}
  onChange={setInStock}
/>

// badge (읽기 전용)
<EditableCell type="badge" value="Paid" variant="secondary" />

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/editable-cell.json

Types

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`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

Accessibility

Keyboard interactions

Key	Description
`EnterSpace`	셀 편집 시작.
`Enter`	변경 저장 + 편집 종료.
`Esc`	변경 취소 + 편집 종료.
`Tab`	다음 셀로 이동 (편집 저장).

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.1 3.3.1

Notes

•click 모드 — hover 시 시각적으로 편집 가능함을 표시.
•always 모드 — 항상 input 노출. 컬럼 단위로 일관성 유지.
•에러 검증 시 aria-invalid + FormMessage 권장.