SGERP Frontend

Vehicle Table

Pre-configured table component for displaying vehicles

Live Example

Vehicles Table

Browse vehicles with their service numbers, types, and status. Click a row to see the data.

Loading...

VehicleTable

A ready-to-use table component for displaying vehicles with their registration, location, status, and simulation information.

Usage

Display vehicles in a table with filtering and sorting capabilities.

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

Features

  • Columns: ID, Registration Number, Type ID, Latitude, Longitude, Status, Simulation ID
  • Filters: Registration (text), Status (text), Simulation ID (number)
  • Sorting: ID, Registration, Status, Simulation ID
  • Default Sort: -id (newest first)
  • Page Size: 20 items per page

Props

PropTypeRequiredDescription
collectionVehicleCollection | nullYesThe vehicle collection to display
onRowClick(row: Vehicle) => voidNoCallback when a row is clicked

Column Details

Latitude / Longitude

Geographic coordinates displayed with 6 decimal places for precision.

Status

Current vehicle status (e.g., idle, en_route, offline).

Filtering

  • Registration: Case-insensitive text search (registration_number__icontains)
  • Status: Exact match filter
  • Simulation ID: Numeric filter for specific simulation