TransactionTable

A ready-to-use table component for displaying financial transactions with amount, status, and refund information.

Usage

Display transactions in a table with filtering and sorting capabilities.

import { useSGERP } from 'sgerp-frontend-lib';
import { TransactionTable } from '@/components/sgerp/tables/transaction-table';

function MyComponent() {
  const api = useSGERP();
  
  return (
    <TransactionTable 
      collection={api?.collections.transaction ?? null}
      onRowClick={(row) => console.log('Clicked:', row)}
    />
  );
}

Features

Columns: ID (UUID), Type, Passenger ID, Amount, Status, Refunded flag, Booking ID, Simulation ID, Created timestamp
Filters: Type (text), Status (text), Simulation ID (number)
Sorting: ID, Type, Passenger ID, Amount, Status, Refunded, Booking ID, Simulation ID, Created timestamp
Default Sort: -created_at (newest first)
Page Size: 20 items per page

Props

Prop	Type	Required	Description
`collection`	`TransactionCollection \| null`	Yes	The transaction collection to display
`onRowClick`	`(row: Transaction) => void`	No	Callback when a row is clicked

Column Details

Amount

Automatically formatted with currency (e.g., "8.00 SGD"). The amount is stored in cents and divided by 100 for display.

Type

Transaction type (e.g., payment, refund, adjustment).

Status

Transaction status (e.g., success, pending, failed).

Refunded

Displays ✓ if refunded, ✗ if not refunded.

Filtering

Type: Exact match filter for transaction type
Status: Exact match filter for transaction status
Simulation ID: Numeric filter for specific simulation

Transaction Table

Live Example

Transactions Table