Table

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

최근 청구서 목록입니다.
청구서	상태	결제 방법	금액
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00
INV006	Pending	Bank Transfer	$200.00
INV007	Unpaid	Credit Card	$300.00
합계			$2,500.00

<script lang="ts">
  import * as Table from "$lib/components/ui/table/index.js";
 
  const invoices = [
    {
      invoice: "INV001",
      paymentStatus: "Paid",
      totalAmount: "$250.00",
      paymentMethod: "Credit Card"
    },
    {
      invoice: "INV002",
      paymentStatus: "Pending",
      totalAmount: "$150.00",
      paymentMethod: "PayPal"
    },
    {
      invoice: "INV003",
      paymentStatus: "Unpaid",
      totalAmount: "$350.00",
      paymentMethod: "Bank Transfer"
    },
    {
      invoice: "INV004",
      paymentStatus: "Paid",
      totalAmount: "$450.00",
      paymentMethod: "Credit Card"
    },
    {
      invoice: "INV005",
      paymentStatus: "Paid",
      totalAmount: "$550.00",
      paymentMethod: "PayPal"
    },
    {
      invoice: "INV006",
      paymentStatus: "Pending",
      totalAmount: "$200.00",
      paymentMethod: "Bank Transfer"
    },
    {
      invoice: "INV007",
      paymentStatus: "Unpaid",
      totalAmount: "$300.00",
      paymentMethod: "Credit Card"
    }
  ];
</script>
 
<Table.Root>
  <Table.Caption>최근 청구서 목록입니다.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head class="w-[100px]">청구서</Table.Head>
      <Table.Head>상태</Table.Head>
      <Table.Head>결제 방법</Table.Head>
      <Table.Head class="text-end">금액</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    {#each invoices as invoice (invoice)}
      <Table.Row>
        <Table.Cell class="font-medium">{invoice.invoice}</Table.Cell>
        <Table.Cell>{invoice.paymentStatus}</Table.Cell>
        <Table.Cell>{invoice.paymentMethod}</Table.Cell>
        <Table.Cell class="text-end">{invoice.totalAmount}</Table.Cell>
      </Table.Row>
    {/each}
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell colspan={3}>합계</Table.Cell>
      <Table.Cell class="text-end">$2,500.00</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table.Root>

설치

pnpm dlx shadcn-svelte@latest add table

npx shadcn-svelte@latest add table

npx shadcn-svelte@latest add table

bun x shadcn-svelte@latest add table

다음 코드를 복사하여 프로젝트에 붙여넣으세요.

import Root from "./table.svelte";
import Body from "./table-body.svelte";
import Caption from "./table-caption.svelte";
import Cell from "./table-cell.svelte";
import Footer from "./table-footer.svelte";
import Head from "./table-head.svelte";
import Header from "./table-header.svelte";
import Row from "./table-row.svelte";

export {
  Root,
  Body,
  Caption,
  Cell,
  Footer,
  Head,
  Header,
  Row,
  //
  Root as Table,
  Body as TableBody,
  Caption as TableCaption,
  Cell as TableCell,
  Footer as TableFooter,
  Head as TableHead,
  Header as TableHeader,
  Row as TableRow,
};

사용법

<script lang="ts">
  import * as Table from "$lib/components/ui/table/index.js";
</script>

<Table.Root>
  <Table.Caption>최근 인보이스 목록입니다.</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head class="w-[100px]">인보이스</Table.Head>
      <Table.Head>상태</Table.Head>
      <Table.Head>결제 방법</Table.Head>
      <Table.Head class="text-end">금액</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell class="font-medium">INV001</Table.Cell>
      <Table.Cell>결제 완료</Table.Cell>
      <Table.Cell>신용카드</Table.Cell>
      <Table.Cell class="text-end">$250.00</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

데이터 테이블

<Table /> 컴포넌트를 사용하여 더 복잡한 데이터 테이블을 만들 수 있습니다. @tanstack/table과 결합하면 정렬, 필터링, 페이지네이션 기능이 있는 테이블을 만들 수 있습니다.

자세한 내용은 데이터 테이블 문서를 참조하세요.

Tasks 데모에서도 데이터 테이블 예제를 볼 수 있습니다.

Switch Tabs