Pantoia Design
Components

Table

사용 예시

표 하나 만들기

헤더 행은 한 줄만 만들 수 있어서 열마다 이름을 하나씩 적어요.

강남점 재고
상품 이름재고 수갱신 시각
무선 이어폰1,24009:40
보온 텀블러86009:38
캔버스 가방1209:41
tsx
<Table label="강남점 재고">  <TableHeader>    <TableHeadCell>상품 이름</TableHeadCell>    <TableHeadCell>재고 수</TableHeadCell>    <TableHeadCell>갱신 시각</TableHeadCell>  </TableHeader>  <TableBody>    <TableRow>      <TableCell>무선 이어폰</TableCell>      <TableCell mono>1,240</TableCell>      <TableCell mono>09:40</TableCell>    </TableRow>  </TableBody></Table>
무선 이어폰 매장별 재고
매장재고 수갱신 시각
강남점1,24009:40
홍대점86009:38
판교점009:41
판교점 재고
이름값
상품 번호8802350118472
재고 수1,080
갱신 시각09:41

자릿수가 맞아야 읽히는 값

상품 번호, 재고 수처럼 자릿수를 세로로 맞춰 읽는 값에 셀마다 mono를 줘요.

강남점 상품 번호와 재고 수
상품 이름상품 번호재고 수
무선 이어폰88012470931551,240
보온 텀블러8801247093162860
캔버스 가방880235011847212
tsx
<Table label="강남점 상품 번호와 재고 수">  <TableHeader>    <TableHeadCell>상품 이름</TableHeadCell>    <TableHeadCell>상품 번호</TableHeadCell>    <TableHeadCell>재고 수</TableHeadCell>  </TableHeader>  <TableBody>    <TableRow>      <TableCell>무선 이어폰</TableCell>      <TableCell mono>8801247093155</TableCell>      <TableCell mono>1,240</TableCell>    </TableRow>  </TableBody></Table>
강남점 상품 번호와 이름
상품 번호상품 이름
8801247093179무선 노이즈 캔슬링 이어폰 3세대 화이트
8801247093186보온 텀블러 500ml
판교점 상품 번호와 이름
상품 번호상품 이름
8801247093179무선 노이즈 캔슬링 이어폰 3세대 화이트
8801247093186보온 텀블러 500ml

가로 스크롤

표가 부모 요소보다 넓으면 표 안에서만 가로로 스크롤돼요. 아래 표를 스크롤해 보세요.

매장별 재고
상품 번호강남점홍대점판교점수원점대전점광주점부산점대구점제주점일산점합계갱신 시각
88012470931551,2408600312954801,120640582105,01509:40
88012470931628601,24042096310250880140320764,59209:38
88023501184721201,0801,240640903151,0201801,0445,62109:41
8802350118489420961,120581,8801,240623051,9401307,25109:35
tsx
<Table label="매장별 재고">  <TableHeader>    <TableHeadCell>상품 번호</TableHeadCell>    <TableHeadCell>강남점</TableHeadCell>    <TableHeadCell>홍대점</TableHeadCell>    <TableHeadCell>판교점</TableHeadCell>    <TableHeadCell>수원점</TableHeadCell>    <TableHeadCell>대전점</TableHeadCell>    <TableHeadCell>광주점</TableHeadCell>    <TableHeadCell>부산점</TableHeadCell>    <TableHeadCell>대구점</TableHeadCell>    <TableHeadCell>제주점</TableHeadCell>    <TableHeadCell>일산점</TableHeadCell>    <TableHeadCell>합계</TableHeadCell>    <TableHeadCell>갱신 시각</TableHeadCell>  </TableHeader>  <TableBody>    <TableRow>      <TableCell mono>8801247093155</TableCell>      <TableCell mono>1,240</TableCell>      <TableCell mono>860</TableCell>      <TableCell mono>0</TableCell>      <TableCell mono>312</TableCell>      <TableCell mono>95</TableCell>      <TableCell mono>480</TableCell>      <TableCell mono>1,120</TableCell>      <TableCell mono>640</TableCell>      <TableCell mono>58</TableCell>      <TableCell mono>210</TableCell>      <TableCell mono>5,015</TableCell>      <TableCell mono>09:40</TableCell>    </TableRow>  </TableBody></Table>

열 너비 고정

열 너비를 내용에 맞추지 않고 정해 둘 때 써요. 잘리는 셀에는 title에 전체 값을 적어요.

강남점 상품 이름
상품 이름재고 수
무선 이어폰1,240
무선 이어폰 블루투스 오버이어 화이트 한정판 예약 상품860
tsx
<Table label="강남점 상품 이름" fixed>  <TableHeader>    <TableHeadCell className="w-40">상품 이름</TableHeadCell>    <TableHeadCell>재고 수</TableHeadCell>  </TableHeader>  <TableBody>    <TableRow>      <TableCell title="무선 이어폰 블루투스 오버이어 화이트 한정판 예약 상품">        무선 이어폰 블루투스 오버이어 화이트 한정판 예약 상품      </TableCell>      <TableCell mono>860</TableCell>    </TableRow>  </TableBody></Table>
강남점 주문 내역
주문 번호상품 번호수량주문 시각
2026083000487155128801247093179209:40
판교점 주문 내역
주문 번호상품 번호수량주문 시각
2026…55128801…3179209:40

셀 안의 Button

행마다 동작이 있으면 버튼을 마지막 열에 모으고, 그 열의 헤더 셀과 함께 오른쪽으로 정렬해요.

강남점 상품 번호
상품 이름상품 번호복사
무선 이어폰8801247093155
보온 텀블러8801247093162
캔버스 가방8802350118472
tsx
<Table label="강남점 상품 번호">  <TableHeader>    <TableHeadCell>상품 이름</TableHeadCell>    <TableHeadCell>상품 번호</TableHeadCell>    <TableHeadCell className="text-right">복사</TableHeadCell>  </TableHeader>  <TableBody>    <TableRow>      <TableCell>무선 이어폰</TableCell>      <TableCell mono>8801247093155</TableCell>      <TableCell className="text-right">        <CopyButton          value="8801247093155"          color="neutral" emphasis="ghost" size="sm"          shape="square"          aria-label="복사"        />      </TableCell>    </TableRow>  </TableBody></Table>

행 강조하기

행을 눌러 자세히 보는 표처럼 마우스가 어느 행에 있는지 보여야 할 때 써요. 읽기만 하는 표에는 두지 않아요.

강남점 주문
주문 번호수량주문 시각
202608300048715512209:40
202608300048715513109:42
202608300048715514409:45
tsx
<Table label="강남점 주문">  <TableHeader>    <TableHeadCell>주문 번호</TableHeadCell>    <TableHeadCell>수량</TableHeadCell>    <TableHeadCell>주문 시각</TableHeadCell>  </TableHeader>  <TableBody>    <TableRow className="transition-state hover:bg-bg-neutral-hover">      <TableCell mono>202608300048715512</TableCell>      <TableCell mono>2</TableCell>      <TableCell mono>09:40</TableCell>    </TableRow>  </TableBody></Table>

컨트롤

강남점 상품 목록
상품 이름상품 번호
무선 이어폰8801247093155
보온 텀블러8801247093162
캔버스 가방8802350118472
tsx
<Table label="강남점 상품 목록">  <TableHeader>    <TableHeadCell>상품 이름</TableHeadCell>    <TableHeadCell>상품 번호</TableHeadCell>  </TableHeader>  <TableBody>    <TableRow>      <TableCell>무선 이어폰</TableCell>      <TableCell mono>8801247093155</TableCell>    </TableRow>  </TableBody></Table>

명세

이름
이름값기본
Table
labelstring필수
화면에는 보이지 않고 스크린 리더가 읽는 표의 이름이에요.
fixedbooleanfalse
열 너비를 헤더 행에 적은 값으로 고정해요.
classNamestring-
모든 하위 컴포넌트에 쓸 수 있어요. Table에 주면 표를 감싼 frame에 적용돼요.
TableCell
monobooleanfalse
고정폭 글꼴로 보여요.
clampbooleanTable의 fixed
내용이 2줄을 넘으면 나머지를 잘라요.
titlestring-
마우스를 올리면 보이는 글자예요.