ReplacementList

데이터 배열을 테두리가 있는 테이블 형태로 렌더링하는 읽기 전용 컴포넌트

개요

ReplacementList는 데이터 배열을 테두리가 있는 테이블 형태로 렌더링하는 읽기 전용 컴포넌트입니다. 컬럼을 명시적으로 정의하거나 데이터의 필드 구성에서 자동 생성할 수 있습니다.

주요 특징

• ✅ 읽기 전용 테이블: 데이터 배열을 테두리 테이블로 단순 렌더링
• ✅ 동적 컬럼 생성: columns 미지정 시 data[0]의 키 기반 자동 생성
• ✅ 명시적 컬럼 정의: field/title 구성으로 컬럼 순서와 헤더 제목 지정
• ✅ 빈 상태: emptyMessage로 데이터 없음 메시지 지정
• ✅ 표시 제어: visible prop으로 전체 표시/숨김

기본 사용

columns에 컬럼 정의를, data에 행 데이터를 전달합니다.

import { ReplacementList } from "@vortex/ui-cals"
 
const columns = [
  { field: "code", title: "코드" },
  { field: "before", title: "교체 전" },
  { field: "after", title: "교체 후" },
  { field: "date", title: "교체일" },
]
 
const data = [
  { code: "A001", before: "구형 부품 A", after: "신형 부품 A", date: "2025-01-10" },
  { code: "A002", before: "구형 부품 B", after: "신형 부품 B", date: "2025-01-15" },
]
 
<ReplacementList columns={columns} data={data} />

컬럼 자동 생성

columns를 지정하지 않으면 첫 번째 데이터 항목의 키를 기반으로 컬럼이 자동 생성됩니다.

<ReplacementList
  data={[
    { 제품명: "모니터", 수량: 3, 상태: "교체 완료" },
    { 제품명: "키보드", 수량: 5, 상태: "대기" },
  ]}
/>

빈 상태

데이터가 없으면 emptyMessage를 표시합니다.

<ReplacementList
  columns={columns}
  data={[]}
  emptyMessage="교체 이력이 없습니다."
/>

스타일 지정

className과 style로 컨테이너 크기를 조절할 수 있습니다. 내용이 넘치면 컨테이너가 스크롤됩니다.

<ReplacementList
  columns={columns}
  data={data}
  className="max-w-lg"
  style={{ maxHeight: 160 }}
/>

API Reference

Props

ReplacementListColumn

접근성

권장 사항

• ✅ 시맨틱 <table>/<th>/<td> 구조로 렌더링되어 스크린 리더가 표 구조를 인식함
• ✅ 헤더 제목은 데이터의 의미를 알 수 있는 명확한 문구 사용
• ❌ 편집/정렬 등 인터랙션이 필요한 경우 Grid 컴포넌트 사용 (ReplacementList는 읽기 전용)

관련 컴포넌트

• Grid: 선언적 데이터 그리드 컴포넌트
• List: Grid + InlineEditToolbar 조합 데이터 목록 컴포넌트