Transaction History

A list of banking transactions with amount, description, date, and status.

Preview · Transaction History

Code

HTML · @primus/ui-core

<div class="table">
  <table>
    <thead><tr><th>Date</th><th>Description</th><th>Amount</th><th>Status</th></tr></thead>
    <tbody>
      <tr><td style="color:var(--muted-foreground);font-size:0.8rem">Mar 1</td><td style="font-size:0.875rem">Stripe payment received</td><td style="color:var(--success);font-weight:500">+$12,000</td><td><span class="badge success">Completed</span></td></tr>
      <tr><td style="color:var(--muted-foreground);font-size:0.8rem">Feb 28</td><td style="font-size:0.875rem">AWS infrastructure</td><td style="color:var(--danger);font-weight:500">-$3,200</td><td><span class="badge success">Completed</span></td></tr>
      <tr><td style="color:var(--muted-foreground);font-size:0.8rem">Feb 27</td><td style="font-size:0.875rem">Payroll processing</td><td style="color:var(--danger);font-weight:500">-$45,000</td><td><span class="badge warning">Pending</span></td></tr>
    </tbody>
  </table>
</div>

React

import { TransactionHistory } from 'primus-react-ui';

<TransactionHistory transactions={transactions}
  onTransactionClick={(tx) => setSelectedTx(tx)} />

Angular

<primus-transaction-history [transactions]="transactions"
  (onTransactionClick)="onTransactionClick($event)">
</primus-transaction-history>

Props

Prop	Type	Default	Description
transactions	Transaction[]	required	Transaction list
onTransactionClick	(tx)=>void	—	Row click

TypeScript interfaces

interface Transaction {
  id:          string;
  date:        string | Date;
  description: string;
  amount:      number;   // Positive = credit, negative = debit
  currency:    string;
  status:      'completed' | 'pending' | 'failed' | 'cancelled';
  type:        'credit' | 'debit';
  category?:   string;
  reference?:  string;
}

Events

Event	Type	Description
onTransactionClick	(tx: Transaction) => void	Row click handler

Version history

See the Changelog for version history and breaking changes.