Predefined Tables

The library provides ready-to-use table components for common SGERP collections. These components are built on top of SGERPTable with pre-configured columns and filters.

Live Examples

Try the interactive examples below to see each table in action with real data from your SGERP instance.

Available Tables

VehicleTypeTable

Displays vehicle types with their names, codes, and capacity information.

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

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

Columns:

• ID
• Name
• Code
• Capacity (JSON)
• Created date

Filters:

• Name (text search)
• Code (text search)

VehicleTable

Displays vehicles with their registration, location, status, and simulation information.

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

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

Columns:

• ID
• Registration Number
• Type ID
• Latitude
• Longitude
• Status
• Simulation ID

Filters:

• Registration (text search)
• Status (text search)
• Simulation ID (number)

BookingTable

Displays bookings with pickup/dropoff times, status, and related entities.

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)}
    />
  );
}

Columns:

• ID
• Status
• Pickup Time
• Dropoff Time
• Simulation ID
• Vehicle ID
• Created date

Filters:

• Status (text search)
• Simulation ID (number)
• Vehicle ID (number)

PassengerTable

Displays passenger information including contact details and organization.

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

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

Columns:

• ID (UUID)
• Name
• Username
• Email
• Phone
• Active status
• Organization
• Created date

Filters:

• Name (text search)
• Email (text search)
• Username (text search)

TicketTable

Displays ticket information with payment details.

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)}
    />
  );
}

Columns:

• ID (UUID)
• Passenger ID
• Amount (formatted with currency)
• Payment Status
• Payment Method
• Booking ID
• Simulation ID
• Created timestamp

Filters:

• Payment Status (text search)
• Payment Method (text search)
• Simulation ID (number)

DriverTable

Displays driver information with names and external IDs.

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

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

Columns:

• ID
• First Name
• Last Name
• External ID
• User ID
• Project ID
• Created date
• Modified date

Filters:

• First Name (text search)
• Last Name (text search)
• External ID (text search)
• Project ID (number)

NodeTable

Displays simulation nodes with location and type information.

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

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

Columns:

• ID
• Name
• Latitude
• Longitude
• Type
• Simulation ID
• Booking ID
• Created date

Filters:

• Name (text search)
• Type (text search)
• Simulation ID (number)

TransactionTable

Displays financial transactions with amount, status, and refund information.

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)}
    />
  );
}

Columns:

• ID (UUID)
• Type
• Passenger ID
• Amount (formatted with currency)
• Status
• Refunded flag
• Booking ID
• Simulation ID
• Created timestamp

Filters:

• Type (text search)
• Status (text search)
• Simulation ID (number)

Notifications Table (SMSScheduledTable)

Displays scheduled notifications (SMS and push notifications) with delivery status and recipient information.

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

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

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

Columns:

• ID
• Scheduled At
• Status
• Recipient
• Recipient Type
• Template Type
• Delivery Type
• Content (truncated)
• Error Count
• Created date

Filters:

• Status (text search)
• Recipient Type (text search)
• Template Type (text search)
• Project ID (number)

SimulationTable

Displays simulations with timing information and sophisticated Activity filter for time-based queries.

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

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

Columns:

• ID
• Name
• Start Time
• End Time
• Booking Start Time
• Booking End Time
• Created date

Filters:

• Activity (preset-based: Active Now, Ended, Future, Booking Opened)
• Project (autocomplete dropdown)
• Template (multiselect)
• Mode (select: Real Operations / Template)

Special Features:

• Activity filter provides quick time-based presets
• "Active Now" shows currently running simulations
• "Ended" shows finished simulations
• "Future" shows not-yet-started simulations
• "Booking Opened" shows simulations accepting bookings

Common Props

All predefined tables accept these props:

Features

All predefined tables include:

• ✅ Infinite scrolling - Automatically loads more data as you scroll
• ✅ Server-side filtering - Efficient filtering via API parameters
• ✅ Sorting - Click column headers to sort (where enabled)
• ✅ Column visibility - Show/hide columns as needed
• ✅ Responsive design - Works on all screen sizes
• ✅ Loading states - Visual feedback during data fetching
• ✅ Empty states - Clear messaging when no data is available

Customization

These predefined tables are built on SGERPTable. If you need more customization, you can:

1. Copy the component and modify it for your needs
2. Use SGERPTable directly with custom column and filter configurations

See the SGERPTable documentation for more details on customization options.