Table

BillingLast 30 days

Invoices

Recent payments and outstanding balances.

Four invoices in this period.

Invoice	Customer	Status	Method	Amount
INV-001	Acme Studio	Paid	Card	$1,250.00
INV-002	Northwind	Pending	Transfer	$890.00
INV-003	Contoso	Paid	Card	$420.50
INV-004	Fabrikam	Failed	Invoice	$64.00
Total				$2,624.50

계약

Overview

Machine-readable contract from Component Spec.

component: tableexport: Tableversion: 1attributes: data-refineui=table

Anatomy

Part	data-refineui
root	table
row	table-row

Layout

Property	Value
direction	logical
rtl	true

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

import {
  Table,
  TableHeader,
  TableBody,
  TableFooter,
  TableRow,
  TableHead,
  TableCell,
  TableCaption
} from "@refineui/react";

<Table>
  <TableCaption>Product inventory</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Product</TableHead>
      <TableHead>Price</TableHead>
      <TableHead>Stock</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Widget A</TableCell>
      <TableCell>$19.99</TableCell>
      <TableCell>52</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Widget B</TableCell>
      <TableCell>$29.99</TableCell>
      <TableCell>12</TableCell>
    </TableRow>
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total Items</TableCell>
      <TableCell>64</TableCell>
    </TableRow>
  </TableFooter>
</Table>

스크롤

Table은 overflow를 직접 소유하지 않습니다. 너비가 제한될 때(문서 열, 패널) 또는 높이가 제한될 때(다이얼로그, 고정 레이아웃) ScrollArea와 조합하세요. 스테이지에 맞는 표본 프리뷰는 보통 ScrollArea를 생략합니다.

import {
  ScrollArea,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@refineui/react";

<ScrollArea type="hover" className="w-full min-w-0">
  <ScrollAreaViewport>
    <Table>
      <TableHeader>{/* … */}</TableHeader>
      <TableBody>{/* … */}</TableBody>
    </Table>
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="horizontal">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollArea>

API 레퍼런스

Table

루트 테이블 요소.

TableHeader

테이블 헤더 섹션(<thead>).

TableBody

테이블 본문 섹션(<tbody>).

TableFooter

테이블 푸터 섹션(<tfoot>).

TableRow

테이블 행(<tr>).

TableHead

헤더 셀(<th>).

TableCell

데이터 셀(<td>).

TableCaption

접근성용 테이블 캡션.