Skip to content
Docs
Back to Components

DataTable

@hua-labs/ui/data
v1.0.0

A comprehensive table component for displaying transaction data with built-in status badges, amount formatting, date formatting, and row click interactions.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { DataTable } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

거래 ID가맹점금액상태결제수단거래 일시
tx_001
Merchant AJohn Doe
₩150,000수수료 4,500
승인Credit Card2026. 4. 18. AM 4:45
tx_002
Merchant B
₩85,000
대기Bank Transfer2026. 4. 18. AM 3:45
tx_003REF-123
Merchant C
₩320,000
실패Credit Card2026. 4. 18. AM 2:45
tx_004
Merchant D
₩45,000
환불Quick Pay2026. 4. 17. AM 4:45

상태 유형

거래 ID가맹점금액상태결제수단거래 일시
1
Test
₩10,000
승인Card2026. 4. 18. AM 4:45
2
Test
₩10,000
대기Card2026. 4. 18. AM 4:45
3
Test
₩10,000
실패Card2026. 4. 18. AM 4:45
4
Test
₩10,000
환불Card2026. 4. 18. AM 4:45
5
Test
₩10,000
취소Card2026. 4. 18. AM 4:45
6
Test
₩10,000
검토중Card2026. 4. 18. AM 4:45

로딩 상태

거래 ID가맹점금액상태결제수단거래 일시

빈 상태

거래 ID가맹점금액상태결제수단거래 일시

거래 데이터가 없습니다

필터를 조정하거나 날짜 범위를 변경해보세요.

Props

이름타입기본값설명
rows*TransactionRow[]-Array of transaction data rows
columnsTransactionColumnConfig[]Default columnsColumn configuration array
isLoadingbooleanfalseShow loading skeleton
captionReact.ReactNode-Table caption
filtersReact.ReactNode-Filter components
emptyStateReact.ReactNode-Custom empty state component
onRowClick(row: TransactionRow) => void-클릭 핸들러
highlightRow(row: TransactionRow) => boolean-Row highlight condition function
statusLabelsPartial<Record<TransactionStatus, string>>-Custom status labels
localestring"ko-KR"Locale for formatting
defaultCurrencystring"KRW"Default currency
footerReact.ReactNode-Footer content
loadingRowsnumber5Number of skeleton rows when loading
statusRenderer(status: TransactionStatus, row: TransactionRow) => ReactNode-Custom status renderer
amountFormatter(row: TransactionRow) => ReactNode-Custom amount formatter
methodFormatter(row: TransactionRow) => ReactNode-Custom payment method formatter
dateFormatter(row: TransactionRow) => ReactNode-Custom date formatter
rowActionLabel(row: TransactionRow) => string-Custom row action button label
rowActionHintstring-Tooltip hint for row action

TransactionRow

Props

이름타입기본값설명
id*string-Transaction ID
merchant*string-Merchant name
amount*number-Transaction amount
currencystring-Currency code
status*"approved" | "pending" | "failed" | "refunded" | "cancelled" | "review"-Transaction status
methodstring-Payment method
date*string | Date-Transaction date
customerstring-Customer information
feenumber-Transaction fee
referencestring-Reference number

코드 예시

기본 사용법

BasicTransactionsTable.tsxtsx
import { DataTable } from "@hua-labs/ui/data";

export function BasicTransactionsTable() {
  const transactions = [
    {
      id: "tx_001",
      merchant: "Merchant A",
      amount: 150000,
      status: "approved" as const,
      method: "Credit Card",
      date: new Date()
    },
    {
      id: "tx_002",
      merchant: "Merchant B",
      amount: 85000,
      status: "pending" as const,
      method: "Bank Transfer",
      date: new Date(Date.now() - 3600000)
    }
  ];

  return (
    <TransactionsTable
      rows={transactions}
      onRowClick={(row) => console.log(row)}
    />
  );
}