표

표는 데이터를 하나 이상의 행과 열로 조직화하여 표현하는 형식으로 사용자가 빠르게 많은 양의 정보를 확인하고 비교할 수 있도록 도와준다.

표는 데이터를 하나 이상의 행과 열로 조직화하여 표현하는 형식으로 사용자가 빠르게 많은 양의 정보를 확인하고 비교할 수 있도록 도와준다.

사용 지침

공시·통계·접수 내역처럼 정량 데이터를 비교해야 할 때 사용하고, 캡션·열 헤더·스코프 속성을 갖춰 스크린 리더가 데이터 관계를 정확히 읽을 수 있도록 합니다.

예제

Default

제목1제목2
제목1-1내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다.
제목1-2내용이 들어갑니다.
제목1-3내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다. 내용이 들어갑니다.
examples/table/TableDefault.tsx
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "@/components/ui/dynamic/table"

export default function TableDefault() {

Mobile Scroll

접수번호민원명담당기관신청일상태수수료
2024-001주민등록등본 발급주민센터2024.03.15완료무료
2024-002건강보험료 납부확인건강보험공단2024.03.14처리중무료
2024-003자동차세 조회세무서2024.03.13완료무료
examples/table/TableMobileScroll.tsx
import {
  Table,
  TableScroll,

Multiple Columns

항목설명상태날짜
항목1첫 번째 항목에 대한 설명입니다.완료2024-01-01
항목2두 번째 항목에 대한 설명입니다.진행중2024-01-15
항목3세 번째 항목에 대한 설명입니다.대기2024-02-01
examples/table/TableMultipleColumns.tsx
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "@/components/ui/dynamic/table"

export default function TableMultipleColumns() {

With Scroll

접수번호민원명담당기관신청일상태
2024-001주민등록등본주민센터2024.03.01처리중
2024-002건강보험확인서건강보험공단2024.03.02완료
2024-003소득확인서세무서2024.03.03완료
2024-004납세완납증명국세청2024.03.04처리중
2024-005주민등록등본주민센터2024.03.05완료
2024-006건강보험확인서건강보험공단2024.03.06완료
2024-007소득확인서세무서2024.03.07처리중
2024-008납세완납증명국세청2024.03.08완료
2024-009주민등록등본주민센터2024.03.09완료
2024-010건강보험확인서건강보험공단2024.03.10처리중
2024-011소득확인서세무서2024.03.11완료
2024-012납세완납증명국세청2024.03.12완료
2024-013주민등록등본주민센터2024.03.13처리중
2024-014건강보험확인서건강보험공단2024.03.14완료
2024-015소득확인서세무서2024.03.15완료
examples/table/TableWithScroll.tsx
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "@/components/ui/dynamic/table"

const ALL_ROWS = Array.from({ length: 15 }, (_, i) => ({

Without Caption

접수번호민원명담당기관신청일상태
2024-001주민등록등본 발급주민센터2024.03.15완료
2024-002건강보험료 납부확인건강보험공단2024.03.14처리중
2024-003자동차세 조회세무서2024.03.13완료
examples/table/TableWithoutCaption.tsx
import { Table, TableHeader, TableBody, TableHead, TableRow, TableCell } from "@/components/ui/dynamic/table"

const ROWS = [

속성

이름타입기본값설명
aria-labelstring—Defines a string value that labels the current element. @see aria-labelledby.
classNamestring——
idstring——
onClickMouseEventHandler<HTMLTableElement>——
styleCSSProperties——
tabIndexnumber——