TransactionsTable

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { TransactionsTable } from "@hua-labs/ui/advanced/dashboard";

거래 ID	가맹점	금액	상태	결제수단	거래 일시
tx_001	Merchant AJohn Doe	₩150,000수수료 4,500	승인	Credit Card	2026. 2. 20. 오후 5:36
tx_002	Merchant B	₩85,000	대기	Bank Transfer	2026. 2. 20. 오후 4:36
tx_003REF-123	Merchant C	₩320,000	실패	Credit Card	2026. 2. 20. 오후 3:36
tx_004	Merchant D	₩45,000	환불	Quick Pay	2026. 2. 19. 오후 5:36

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

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

거래 ID	가맹점	금액	상태	결제수단	거래 일시
거래 데이터가 없습니다 필터를 조정하거나 날짜 범위를 변경해보세요.

Props


`rows*`	`TransactionRow[]`	-	Array of transaction data rows
`columns`	`TransactionColumnConfig[]`	`Default columns`	Column configuration array
`isLoading`	`boolean`	`false`	Show loading skeleton
`caption`	`React.ReactNode`	-	Table caption
`filters`	`React.ReactNode`	-	Filter components
`emptyState`	`React.ReactNode`	-	Custom empty state component
`onRowClick`	`(row: TransactionRow) => void`	-	Row click handler
`highlightRow`	`(row: TransactionRow) => boolean`	-	Row highlight condition function
`statusLabels`	`Partial<Record<TransactionStatus, string>>`	-	Custom status labels
`locale`	`string`	`"ko-KR"`	Locale for formatting
`defaultCurrency`	`string`	`"KRW"`	Default currency
`footer`	`React.ReactNode`	-	Footer content
`loadingRows`	`number`	`5`	Number 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
`rowActionHint`	`string`	-	Tooltip hint for row action

TransactionRow


`id*`	`string`	-	Transaction ID
`merchant*`	`string`	-	Merchant name
`amount*`	`number`	-	Transaction amount
`currency`	`string`	-	Currency code
`status*`	`"approved" \| "pending" \| "failed" \| "refunded" \| "cancelled" \| "review"`	-	Transaction status
`method`	`string`	-	Payment method
`date*`	`string \| Date`	-	Transaction date
`customer`	`string`	-	Customer information
`fee`	`number`	-	Transaction fee
`reference`	`string`	-	Reference number

BasicTransactionsTable.tsxtsx

import { TransactionsTable } from "@hua-labs/ui/advanced/dashboard";

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)}
    />
  );
}

DashboardToolbarPro TransactionDetailDrawerPro

TransactionsTable

거래 데이터가 없습니다

Props

TransactionRow