Table

설치 확인

행·열 데이터, 행 선택

1. 목적과 출처

행·열 데이터, 행 선택

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/table.tsx
Registry: @adcapsule/table

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

구성

모양

기본

제품팀 이슈 4개
번호	제목	상태	마감
ADX-101	로그인 화면의 오류 메시지 개선	진행 중	11/12
ADX-104	모바일 사이드바 인터랙션 검토	검토 중	11/11
ADX-106	워크스페이스 멤버 초대 화면	예정	11/16
ADX-110	컬러 토큰의 의미 체계 정의	완료	11/6

3. 속성 바꿔 보기

제품팀 이슈 4개
번호	제목	상태	마감
ADX-101	로그인 화면의 오류 메시지 개선	진행 중	11/12
ADX-104	모바일 사이드바 인터랙션 검토	검토 중	11/11
ADX-106	워크스페이스 멤버 초대 화면	예정	11/16
ADX-110	컬러 토큰의 의미 체계 정의	완료	11/6

표 설명(TableCaption)행 선택줄무늬

<Table>
  <TableCaption>제품팀 이슈 4개</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>번호</TableHead>
      <TableHead>제목</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>…</TableRow>
  </TableBody>
</Table>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/table

npm 패키지: 없음
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

<Table>
  <TableHeader><TableRow><TableHead>제목</TableHead></TableRow></TableHeader>
  <TableBody><TableRow><TableCell>로그인 오류 개선</TableCell></TableRow></TableBody>
</Table>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

TableCaption으로 표 설명(화면 낭독기)
data-state="selected"로 선택한 행
정렬·필터·페이지는 데이터 테이블 패턴(P05)에서

공통으로 유지할 토큰

border.default (행 구분선)
surface.hover (가리킨 행)
surface.raised (선택한 행, --muted)
text.secondary (머리글)

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

구성

모양

기본

제품팀 이슈 4개
번호	제목	상태	마감
ADX-101	로그인 화면의 오류 메시지 개선	진행 중	11/12
ADX-104	모바일 사이드바 인터랙션 검토	검토 중	11/11
ADX-106	워크스페이스 멤버 초대 화면	예정	11/16
ADX-110	컬러 토큰의 의미 체계 정의	완료	11/6

3. 속성 바꿔 보기

제품팀 이슈 4개
번호	제목	상태	마감
ADX-101	로그인 화면의 오류 메시지 개선	진행 중	11/12
ADX-104	모바일 사이드바 인터랙션 검토	검토 중	11/11
ADX-106	워크스페이스 멤버 초대 화면	예정	11/16
ADX-110	컬러 토큰의 의미 체계 정의	완료	11/6

표 설명(TableCaption)행 선택줄무늬

<Table>
  <TableCaption>제품팀 이슈 4개</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>번호</TableHead>
      <TableHead>제목</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>…</TableRow>
  </TableBody>
</Table>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/table

npm 패키지: 없음
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"

<Table>
  <TableHeader><TableRow><TableHead>제목</TableHead></TableRow></TableHeader>
  <TableBody><TableRow><TableCell>로그인 오류 개선</TableCell></TableRow></TableBody>
</Table>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

TableCaption으로 표 설명(화면 낭독기)
data-state="selected"로 선택한 행
정렬·필터·페이지는 데이터 테이블 패턴(P05)에서

공통으로 유지할 토큰

border.default (행 구분선)
surface.hover (가리킨 행)
surface.raised (선택한 행, --muted)
text.secondary (머리글)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿