SGERP Frontend

Services Table

Pre-configured table for real operation simulations with Activity filter

Live Example

Services Table (Real Operations Only)

Displays only real operation simulations (simulation_mode=real_operations) with Activity filter and Project filter

This table automatically filters to show only real operation services. The simulation_mode filter is hidden and set to "real_operations".

Loading...

ServicesTable

A specialized table component for displaying real operation simulations (simulation_mode=real_operations). This table extends SimulationTable with a pre-applied filter for real operations and hides the simulation mode selector.

Usage

Basic Table

Display real operation simulations with automatic filtering.

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

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

Features

  • Pre-filtered: Automatically shows only simulation_mode=real_operations
  • Activity Filter: Quick presets for Active Now, Ended, Future, Booking Started
  • Project Filter: Autocomplete dropdown for filtering by project
  • Status Columns: Visual indicators for operational time and booking status
  • All SimulationTable columns: Includes all time-related columns and status indicators

Props

Same as SimulationTable. The simulation_mode filter is automatically applied via defaultFilters.

PropTypeRequiredDescription
collectionSimulationCollection | nullYesThe simulation collection to display
columnsColumnDef<Simulation>[]NoCustom column definitions
hideColumnsstring[]NoArray of column keys to hide
filtersFilterDef[]NoCustom filter definitions
defaultFiltersRecord<string, any>NoAdditional filters (merged with simulation_mode)
initialOrderBystringNoInitial sort order (default: -id)
pageSizenumberNoItems per page (default: 20)
onRowClick(row: Simulation) => voidNoCallback when a row is clicked

Differences from SimulationTable

  1. Pre-filtered to real operations: simulation_mode=real_operations is automatically applied
  2. No mode filter: The simulation_mode filter is hidden from the UI
  3. Focused on active services: Perfect for monitoring live operations

Examples

Active Services Only

Combine with project filter and hide less relevant columns.

<ServicesTable 
  collection={api?.collections.simulation ?? null}
  defaultFilters={{ project_id: 123 }}
  hideColumns={['created_at', 'booking_start_time', 'booking_end_time']}
/>

This shows only active services for project 123, hiding less relevant columns.

Related Components