Table

반응형 테이블 컴포넌트입니다.

최근 민원 신청 내역입니다.
접수번호	상태	신청 방법	수수료
APP-001	접수완료	온라인 신청	무료
APP-002	처리중	방문 접수	1,000원
APP-003	보완요청	온라인 신청	무료
APP-004	발급완료	무인민원발급	500원

examples/krds/table-demo.tsx

import {
  Table,
  TableBody,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/table.json

사용법

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

<Table>
  <TableCaption>최근 민원 신청 내역입니다.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[120px]">접수번호</TableHead>
      <TableHead>상태</TableHead>
      <TableHead>신청 방법</TableHead>
      <TableHead className="text-right">수수료</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">APP-001</TableCell>
      <TableCell>접수완료</TableCell>
      <TableCell>온라인 신청</TableCell>
      <TableCell className="text-right">무료</TableCell>
    </TableRow>
  </TableBody>
</Table>

KRDS 정렬

분류: 기존 shadcn table element wrapper API를 유지하는 KRDS-styled 컴포넌트입니다. Table, TableHeader, TableBody, TableRow, TableHead, TableCell 구조는 그대로 유지됩니다.
KRDS 적용: header/body border, caption, hover, empty/row surface가 KRDS table 기준에 맞춰 조정되어 있습니다.
사용 권장: 정적/단순 표는 Table을 사용하고, sorting/filtering/pagination이 필요한 경우에는 별도 data-table composition으로 확장하세요.

구성

다음 조합으로 Table:

Table
├── TableCaption
├── TableHeader
│   └── TableRow
│       ├── TableHead
│       ├── TableHead
│       ├── TableHead
│       └── TableHead
├── TableBody
│   ├── TableRow
│   │   ├── TableCell
│   │   ├── TableCell
│   │   ├── TableCell
│   │   └── TableCell
│   └── TableRow
│       ├── TableCell
│       ├── TableCell
│       ├── TableCell
│       └── TableCell
└── TableFooter

예제

푸터

<TableFooter />로 표 하단 합계나 요약 행을 추가할 수 있습니다.

최근 민원 수수료 내역입니다.
접수번호	상태	신청 방법	수수료
APP-001	접수완료	온라인 신청	무료
APP-002	처리중	방문 접수	1,000원
APP-003	보완요청	온라인 신청	무료
합계			1,000원

examples/krds/table-footer.tsx

import {
  Table,
  TableBody,

행 작업

<DropdownMenu />를 사용해 행별 작업 메뉴를 제공하는 표 예제입니다.

신청명	수수료	작업
주민등록표 등본	무료
건축물대장	1,000원
지방세 납세증명	무료

examples/krds/table-actions.tsx

import { MoreHorizontalIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

데이터 테이블

<Table />을 검색, 필터, 페이지네이션 상태와 조합하면 데이터 테이블을 구성할 수 있습니다. 외부 의존성 없이 필요한 상태부터 직접 조합하고, 더 복잡한 정렬/가상화가 필요할 때만 별도 테이블 라이브러리를 검토하세요.

자세한 조합 예시는 Data Table 문서를 참고하세요.

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

قائمة بفواتيرك الأخيرة.
الفاتورة	الحالة	الطريقة	المبلغ
INV001	مدفوع	بطاقة ائتمانية	$250.00
INV002	قيد الانتظار	PayPal	$150.00
INV003	غير مدفوع	تحويل بنكي	$350.00
INV004	مدفوع	بطاقة ائتمانية	$450.00
INV005	مدفوع	PayPal	$550.00
INV006	قيد الانتظار	تحويل بنكي	$200.00
INV007	غير مدفوع	بطاقة ائتمانية	$300.00
المجموع			$2,500.00

examples/krds/table-rtl.tsx

"use client"

import * as React from "react"

Data Table Tabs