BookingTable

A ready-to-use table component for displaying bookings with pickup/dropoff times, status, and related entities.

Usage

Display bookings in a table with filtering and sorting capabilities.

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

function MyComponent() {
  const api = useSGERP();

  return (
    <BookingTable
      collection={api?.collections.booking ?? null}
      onRowClick={(row) => console.log('Clicked:', row)}
    />
  );
}

Features

• Columns: ID, Status, Pickup Time, Dropoff Time, Simulation ID, Vehicle ID, Created date
• Filters: Status (text), Simulation ID (number), Vehicle ID (number)
• Sorting: ID, Status, Pickup Time, Dropoff Time, Simulation ID, Vehicle ID, Created date
• Default Sort: -id (newest first)
• Page Size: 20 items per page

Props

Column Details

Pickup Time / Dropoff Time

Formatted as locale date and time strings. Shows 'N/A' if not set.

Status

Current booking status (e.g., pending, confirmed, completed, cancelled).

Filtering

• Status: Exact match filter for booking status
• Simulation ID: Numeric filter for specific simulation
• Vehicle ID: Numeric filter for specific vehicle