본문으로 건너뛰기

테이블

여러 항목의 값을 열로 맞춰 보여 주는 데이터 표입니다. 목록 마크업이 아닌 실제 table 요소로 그립니다.

표는 카드 면 위에 바로 놓습니다. 머리는 한 단계 파인 띠이고, 행은 헤어라인으로만 나눕니다. 세로선 · 행마다의 상자는 쓰지 않습니다. 행은 솟지 않고 움직이지 않습니다. 손을 올리면 글자색 4% 틴트가 깔리고, 고른 행은 primary 틴트가 거듭니다.

ID 는 Td mono(고정폭 12.5 · 보조 색), 숫자 · 금액 · 날짜는 Td num(오른쪽 정렬 · 고정폭 숫자)입니다. 행은 44px, density="compact" 는 34px 입니다. 상태는 알약 배지보다 상태 아이콘 + 글자가 차분합니다.

columns 를 넘기면 40rem 보다 좁은 화면에서 같은 표가 카드 목록으로 바뀝니다. 머리 행이 사라지고 각 셀 앞에 열 이름이 붙습니다. 행마다 상자를 두지 않고 헤어라인으로만 나눕니다. columns 는 여섯 열까지 지원하고, 열 수가 실행 중에 바뀌는 표는 head 를 씁니다.

import
import { Table, Th, Tr, Td } from "@uyoolabs/ui/ui";
쓰는 경우
ID · 이름 · 상태 · 날짜처럼 여러 항목의 같은 속성을 열로 맞춰 비교해야 하는 목록에 씁니다.
쓰지 않는 경우
열 정렬이 필요 없는 단순 목록에는 표 대신 rowClass 행을 씁니다. 행을 카드처럼 솟게 하거나 행마다 상자를 두지 않습니다. 표 안의 상태를 빨강으로만 말하지 않습니다(아이콘 · 글자와 함께).

Table · Th · Tr · Td

columns 를 넘긴 표입니다. 창 너비를 40rem 보다 좁히면 카드 목록으로 바뀝니다.

ID이름상태금액갱신
prj_01HZX결제 대시보드활성1,200,000원
prj_02KQD고객 포털온보딩48,000원
prj_03MWA사내 위키보관—

촘촘하게

감사 로그 · 대량 데이터는 행 34px 로 둡니다.

시각사람동작
14:30:12한서윤역할 변경 → 관리자
14:28:40이도현API 키 다시 만들기

키보드

키동작
Tab행 안의 컨트롤(체크박스 · 링크 · 행 메뉴)로 차례로 옮깁니다. 표 · 행 자체는 포커스를 받지 않습니다.
Space포커스된 체크박스로 행을 고릅니다. 고른 행은 primary 틴트가 거듭니다.

props

소스의 타입과 JSDoc 에서 생성한 표입니다. 컴포넌트를 고치면 pnpm gen 으로 다시 만듭니다.

Table

prop타입기본값설명
columnsreadonly TableColumn[]—열 목록. 주면 이 컴포넌트가 머리 행을 그리고 좁은 화면에서 카드 목록이 된다.
headReactNode—머리 행을 직접 구성할 때(열 수가 동적인 표). columns 가 있으면 무시된다.
cardsboolean—기본값은 columns 가 있으면 true. 좁은 화면에서도 표로 두려면 false.
density"default" | "compact""default"compact 는 행 34px(감사 로그 · 대량 데이터). 기본은 행 44px
lang"ko" | "en" | "ja"—내장 문구의 언어. 기본값은 ko 다
labelsPartial<TableLabels>—
children필수ReactNode—

이 밖에 <table> props(children 제외)를 그대로 받습니다.

Th

prop타입기본값설명
align"right" | "center"—글 정렬. 숫자 열은 num 을 쓴다
numboolean—숫자 · 금액 · 날짜: 오른쪽 정렬 · 고정폭 숫자

이 밖에 <th> props를 그대로 받습니다.

Tr

prop타입기본값설명
selectedboolean—고른 행. 체크박스가 상태를 말하고 행은 primary 틴트로 거든다
disabledboolean—권한이 없어 다룰 수 없는 행. aria-disabled 로 보조기술에 알리고 글자를 비활성 색으로 바꾼다. 비활성 글자는 대비 기준에서 빠지므로(WCAG 1.4.3 예외) 상태를 속성으로 함께 알려야 한다

이 밖에 <tr> props를 그대로 받습니다.

Td

prop타입기본값설명
align"right" | "center"—글 정렬. 숫자 열은 num 을 쓴다
numboolean—숫자 · 금액 · 날짜: 오른쪽 정렬 · 고정폭 숫자
monoboolean—ID · 해시 같은 값. 고정폭 12.5 · 보조 색

이 밖에 <td> props를 그대로 받습니다.

링크형 행

열이 없는 목록입니다. rowClass 는 파인 면 위의 행이라 솟지도 움직이지도 않고, 손을 올리면 면이 한 단계 짙어집니다.

결제 대시보드prj_01HZX고객 포털prj_02KQD사내 위키prj_03MWA