v0.10.0

ComponentsP3 본문

Table

컬럼 정의 기반 정적 데이터 테이블 — 빈 상태 내장, 정렬·페이지네이션은 소비자 책임(YAGNI)입니다.

마지막 업데이트 2026-06-11

한눈에#

컬럼 정의 + 데이터 + rowKey만으로 가볍게 렌더하는 읽기 전용 정적 테이블입니다 — 빈 상태가 내장돼 있고, 정렬·페이징은 소비자 책임(YAGNI)입니다.

에이전트 실행 현황
에이전트역할작업 수
플래너작업 분해12
코더구현34
리뷰어코드 리뷰21
  • 컬럼 정의 기반 정적 표
  • 빈 상태 내장
  • 정렬·페이징은 소비자
  • 시맨틱 table

좁은 화면은 가로 스크롤 래퍼가 표 구조를 깨지 않고 보호 — 인터랙션이 필요하면 DataGrid

사용 시점#

읽기 전용으로 데이터를 정적으로 표시하면 Table — 정렬·선택·편집·페이징 중 하나라도 필요하면 DataGrid입니다.

쓴다
작업 현황
에이전트작업
플래너12
코더34

정렬·선택·편집·페이징이 필요 없는 읽기 전용 표(가벼운 마크업·작은 번들)

대신 DataGrid
DataGrid

인라인 편집·헤더 정렬·행 선택·페이징 중 하나라도 필요할 때

플레이그라운드#

컨트롤로 props를 조작하면 미리보기와 코드가 실시간 갱신됩니다.

팀 멤버
이름역할
김위즈플래너
이코드코더
박리뷰리뷰어
import { Table } from '@wds/ui-web';

<Table columns={columns} data={members} rowKey={(row) => row.id} />

해부#

셀(td)의 패딩이 표의 측정 단위입니다 — 1열 표본 위에 실측을 핀으로 얹습니다.

셀(td) — space.3 × space.4 단일 밀도
에이전트
플래너
padding-block
12pxspace-3
padding-inline
16pxspace-4
font
14pxbody-2
border-bottom
1pxcolor.border

변형 — 커스텀 셀#

render로 셀 내용을 자유 구성합니다 — 기본 렌더는 row[key]의 문자/숫자만 표시합니다.

에이전트상태
플래너실행 중
리뷰어대기
render — 상태 강조

크기#

폭은 부모 100%, 좁은 화면에서는 래퍼가 가로 스크롤로 보호합니다. 셀 패딩은 space.3×space.4 단일 밀도 — compact 밀도는 수요 시 추가.

상태#

에이전트작업 수
아직 실행된 에이전트가 없습니다
빈 상태 — emptyContent

행 hover는 surface-hover 배경 — 의사클래스로 처리됩니다.

Props#

Prop타입기본값설명
columnsTableColumn<T>[]—컬럼 정의 배열 (아래 표)
dataT[]—행 데이터 — 비어 있으면 emptyContent 표시
rowKey(row, index) => string—행 고유 키 — index 키 금지라 명시 강제
captionReactNode—표 설명 — 접근 가능한 이름이 됨
emptyContentReactNode'데이터가 없습니다'0건 표시 내용

TableColumn<T>:

Prop타입기본값설명
keystring—데이터 키 또는 컬럼 id — render 미지정 시 row[key] 표시
headerReactNode—헤더 셀 내용
align'left' | 'center' | 'right''left'정렬 — 숫자는 right 권장
widthstring—컬럼 폭 (CSS 값)
render(row, rowIndex) => ReactNode—커스텀 셀 렌더

접근성#

  • 시맨틱 <table> 렌더 — <th scope="col"> 헤더, caption이 표 이름
  • 좁은 화면 가로 스크롤 래퍼 — 표 구조를 깨지 않고 유지
  • 정렬/선택 같은 인터랙션을 더할 때는 aria-sort·행 선택 ARIA를 소비자가 함께 설계

토큰#

component 토큰 없이 semantic을 직접 소비합니다(신설 기준 §4 미충족).

속성토큰
헤더 배경/글자color.surface-muted · color.text-muted
구분선color.border (헤더 하단은 border-strong)
행 hovercolor.surface-hover
셀 패딩space.3 × space.4

관련#