표 (Table)

표는 여러 항목의 데이터를 행과 열로 정렬해 한눈에 비교하고 탐색하도록 돕는 요소로, 목록·내역·관리 화면처럼 구조화된 정보를 일정한 규칙으로 나열해 사용자가 원하는 값을 빠르게 찾고 서로 비교할 수 있어요.

Usage

주문상품금액
#1024포도 한 상자32,000원
#1025샤인머스캣45,000원
#1026캠벨 포도즙18,000원
#1027거봉 세트27,000원
import { Table } from "podo-ui/react";import "podo-ui/styles.css";
{/* 기본 타입은 horizon. checkbox: 선택 열 자동 주입 — 헤더는 전체 선택/해제 */}<Table checkbox>  <thead>    <tr><th>주문</th><th>상품</th><th>금액</th></tr>  </thead>  <tbody>    <tr><td>#1024</td><td>포도 한 상자</td><td>32,000원</td></tr>  </tbody></Table>

상태 (state)

표 상태는 사용자의 상호작용에 따라 normal, hover, pressed, disabled로 구분해 표현해요. hover와 pressed는 지금 조작이 일어나고 있음을 즉각적인 피드백으로 알려주고, disabled는 현재 사용할 수 없는 행임을 시각적으로 구분해 혼란을 줄이며, 일관된 상태 체계를 통해 모든 행이 예측 가능하게 반응하도록 해요.

주문상품금액
#1024포도 한 상자32,000원
#1025샤인머스캣45,000원
#1026캠벨 포도즙18,000원
#1027거봉 세트27,000원
propertiesnormalhoverpresseddisabled

타입 (type)

표는 horizon, grid 2가지로 horizon은 회원 목록, 주문내역, 게시판과 같이 시각적 부담을 줄이고 행 단위로 읽는 리스트성 데이터, grid는 정산, 재무제표, 요금표와 같이 데이터가 많고 각 데이터끼리 정밀한 확인이 필요한 상황에서 활용돼요.

주문상품금액
#1024포도 한 상자32,000원
#1025샤인머스캣45,000원
#1026캠벨 포도즙18,000원
#1027거봉 세트27,000원
base
주문상품금액
#1024포도 한 상자32,000원
#1025샤인머스캣45,000원
#1026캠벨 포도즙18,000원
#1027거봉 세트27,000원
propertieshorizongrid

정렬 (align)

셀 정렬은 내용 성격에 따라 세 가지로 나눠요. 단일 텍스트(전화번호·이메일·생년월일 포함)와 텍스트+칩은 좌측, 버튼(상태에 따라 나타나는 경우 포함)·단일 칩·음성파일은 중앙, 수량·날짜·건수·금액·퍼센트·n명은 우측 정렬이 기준이에요. 기본은 좌측이고 th/td에 data-align을 붙여 지정하며, 우측 정렬 셀은 숫자 폭이 고정(tabular numbers)되어 자릿수가 세로로 나란히 맞아요.

이름상태주문 수금액
김포도3건32,000원
이머루12건145,000원
박캠벨1건8,500원
propertiesleftcenterright

속성 (props)

podo-ui/react의 Table이 받는 속성이에요. 내용은 표준 thead·tbody·tr·th·td 마크업을 그대로 사용해 표 시맨틱과 접근성이 플랫폼에서 나와요. hover·pressed 행 상태는 브라우저 상호작용으로 표현돼요. 행·셀 단위 설정은 마크업에 data-* 속성으로 표시해요 — 아래 표의 data-align, data-disabled 항목을 참고하세요. React Native에는 표 레이아웃이 없어 FlatList 사용을 권장해요.

PropTypeDefault설명
type"horizon" | "grid""horizon"horizon(기본)은 행 구분선만(리스트성), grid는 테두리 프레임+셀 구분선(정밀 비교)
checkboxbooleanfalse체크박스 선택 열을 자동 주입해요. 헤더는 전체 선택/해제(일부 선택 시 indeterminate), 행을 클릭해도 그 행이 토글되고, 체크박스 열을 누른 채 끌면 연속 구간이 한 번에 선택/해제돼요(마우스·펜). 선택된 행은 data-selected로 표시돼요
defaultSelectednumber[][]checkbox 사용 시 초기 선택 행 인덱스 (tbody 순서, 0부터)
onSelectionChange(selected: number[]) => void—선택이 바뀔 때 선택된 행 인덱스 목록과 함께 호출돼요
childrenReactNode— (필수)표준 thead/tbody/tr/th/td 마크업
data-align (th·td 속성)"center" | "right"— (좌측)셀 정렬 기준: 텍스트는 좌측(기본), 버튼·단일 칩·음성파일은 center, 수량·날짜·금액·퍼센트는 right (숫자 폭 고정)
data-disabled (tr 속성)"true"—사용할 수 없는 행 표시. checkbox 사용 시 선택 대상에서도 제외돼요