본문으로 건너뛰기
패턴

테이블

읽기 위주 데이터를 시맨틱 table 로 보여주는 단순 표다. 편집·고정 헤더·스프레드시트형 스크롤이 필요한 목록은 DataGrid 를 쓰고, 요약·리포트처럼 읽는 것이 목적이면 Table 을 쓴다.

활용 방법

읽기 전용 표

columns 에 헤더와 셀 렌더러를 넘겨 표를 구성한다.

Preview
이름상태담당자수량
항목 A완료김민준12건
항목 B대기이서연3건
항목 C보류박지호7건
tsx
<Table
  rows={rows}
  getRowKey={(row) => row.name}
  columns={[{ key: "name", header: "이름", cell: (row) => row.name }]}
/>

빈 표

rows 가 비어 있으면 emptyText 를 한 줄로 표시한다.

Preview
이름
표시할 항목이 없습니다.
tsx
<Table rows={[]} emptyText="표시할 항목이 없습니다." ... />

사용 지침

  • · 읽기 전용 요약·리포트 표에 쓴다.
  • · 인라인 편집·sticky 헤더·큰 데이터 스크롤은 DataGrid 를 쓴다.
  • · 페이지 이동이 필요하면 Table 아래에 Pagination 을 조합한다.

속성

이름타입기본값설명
columnsTableColumn<T>[]-헤더·셀 렌더러·정렬 정의
rowsT[]-표 데이터
getRowKey(row: T) => string-행 key
captionReactNode-스크린리더용 표 설명
emptyTextReactNode"데이터가 없습니다."빈 표 문구
minWidthstring"36rem"가로 스크롤 기준 최소 너비