TransactionsTable

A feature-rich table component for displaying transaction data.

Usage

Transaction	Amount	Status	Date	Channel	Category
Coffee Shop	-$5.75	Processing	Tue, Aug 4, 9:07 PM
Salary Deposit	$2,500.00	Processing	Tue, Aug 4, 9:07 PM	transfer	Income

import { TransactionsTable } from "@/components/bank/transactions-table"

export default function TransactionsPage() {
  const transactions = [
    {
      id: "1",
      name: "Coffee Shop",
      amount: 5.75,
      type: "debit", 
      date: "2024-03-20T10:30:00",
      paymentChannel: "in_store",
      category: "Food & Dining"
    }
  ]

  return <TransactionsTable transactions={transactions} />
}

Props

transactions

Array of transaction objects to display in the table.

Type: {id: string; name: string; amount: number; type?: string; date: string; paymentChannel?: string; category?: string}[]

Features

Category Badges

Visual category indicators with custom colors and styling for different transaction types.

Amount Formatting

Automatic currency formatting with color coding for debit and credit transactions.

Responsive Design

Responsive layout with collapsible columns on mobile devices.

Status Indicators

Visual status badges that automatically update based on transaction date.