Components/Transaction List

Transaction List

A ready-made list view for financial activity. Groups transactions by date by default, renders category icons + status badges, and ships with a filter bar and search. Each row is a single transaction with merchant, category, status, and a signed amount.

Today
- Salary
  ACME Corp
  $8,400.00
- Spotify Premium
  Subscription
  $21.90
- Uber
  Pending
  Ride to SFO
  $42.10
Yesterday
- Whole Foods
  Groceries
  $167.43
- Pix to Maria
  Lunch split
  $38.00
2 days ago
- Refund: Amazon
  Order #482
  $24.00
3 days ago
- Netflix
  Subscription
  $55.90
5 days ago
- Electricity
  Light bill
  $184.10
May 13, 2026
- Failed transfer
  Failed
  To savings
  $500.00
May 11, 2026
- Cashback
  Visa rewards
  $14.20

Installation

npx ajaxui add transaction-list

Filters & search

Pass an array of filters to render a chip toolbar. The list filters by type or status matching the filter value.searchable adds a debounced search input that matches title and subtitle. Both can be controlled.

Today
- Salary
  ACME Corp
  $8,400.00
- Spotify Premium
  Subscription
  $21.90
- Uber
  Pending
  Ride to SFO
  $42.10
Yesterday
- Whole Foods
  Groceries
  $167.43
- Pix to Maria
  Lunch split
  $38.00
2 days ago
- Refund: Amazon
  Order #482
  $24.00
3 days ago
- Netflix
  Subscription
  $55.90
5 days ago
- Electricity
  Light bill
  $184.10
May 13, 2026
- Failed transfer
  Failed
  To savings
  $500.00
May 11, 2026
- Cashback
  Visa rewards
  $14.20

Grouping

Group by date (default — "Today", "Yesterday", "3 days ago"…), category, status, or none.

Income
- Salary
  ACME Corp
  $8,400.00
Streaming
- Spotify Premium
  Subscription
  $21.90
- Netflix
  Subscription
  $55.90
Transit
- Uber
  Pending
  Ride to SFO
  $42.10
Food
- Whole Foods
  Groceries
  $167.43
Transfer
- Pix to Maria
  Lunch split
  $38.00
- Failed transfer
  Failed
  To savings
  $500.00
Refund
- Refund: Amazon
  Order #482
  $24.00
- Cashback
  Visa rewards
  $14.20
Bills
- Electricity
  Light bill
  $184.10

Compact

Hide subtitles and tighten row padding for dense views (sidebars, summary cards).

Today
- Salary
  $8,400.00
- Spotify Premium
  $21.90
- Uber
  Pending
  $42.10
Yesterday
- Whole Foods
  $167.43
- Pix to Maria
  $38.00

Empty state

No transactions in this period.

Item shape

type TransactionType   = "credit" | "debit" | "pending" | "failed" | "reversed"
type TransactionStatus = "completed" | "pending" | "scheduled" | "failed" | "reversed"

interface TransactionListItem {
  id:        string
  title:     string
  subtitle?: string
  amount:    number          // absolute; sign derives from `type`
  type:      TransactionType
  status?:   TransactionStatus
  date:      Date
  category?: string          // matched against the built-in category-icon map
  icon?:     ReactNode       // overrides the category icon
  tags?:     string[]
}

Props

Prop	Type	Default	Description
transactions	TransactionListItem[]	—	The list to render. Required.
groupBy	"date" \| "category" \| "status" \| "none"	"date"	Header strategy for the visible rows.
locale	string	"en-US"	Locale for currency + date formatting.
currency	string	"USD"	ISO 4217 currency code.
searchable	boolean	false	Renders a search input that matches title + subtitle.
searchPlaceholder	string	"Search transactions…"	Placeholder for the search input.
filters	FilterOption[]	—	Chip toolbar. Values match `type` or `status`.
selectedFilters	string[]	—	Controlled selected filters.
onFilterChange	(values: string[]) => void	—	Called when the user toggles a chip.
onSelect	(tx) => void	—	Makes rows clickable buttons.
empty	ReactNode	"No transactions match your filters."	Rendered when the visible list is empty.
loading	boolean	false	Renders 3 skeleton rows.
compact	boolean	false	Tighter rows, hides subtitle.

Accessibility

The list is a real <ul> with <li> rows; date headers are <p> visually styled as section labels.
When onSelect is set, rows become <button>s with a visible focus ring.
Status colors are paired with text labels ("Pending", "Failed") — never color-only.
Amounts use Intl.NumberFormat so screen readers announce them as currency phrases.