TicketTable

A ready-to-use table component for displaying ticket information with payment details.

Usage

Display tickets in a table with filtering and sorting capabilities.

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

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

Features

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

Props

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

Column Details

Amount

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

Payment Status

Current payment status (e.g., pending, success, failed).

Payment Method

Payment method type (e.g., cash, card, wallet).

Filtering

Payment Status: Exact match filter
Payment Method: Exact match filter
Simulation ID: Numeric filter for specific simulation

Ticket Table

Live Example

Tickets Table