SimulationTable

A ready-to-use table component for displaying simulations with timing information, activity status, project filtering, and template management. Features a sophisticated Activity filter with time-based presets for quickly finding active, ended, future, or booking-opened simulations.

Usage

Basic Table

Display simulations with default columns and filters.

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

Hide Columns

Customize which columns are visible using the hideColumns prop.

<SimulationTable
  collection={api?.collections.simulation ?? null}
  hideColumns={['booking_start_time', 'booking_end_time', 'created_at']}
/>

Template Simulations Only

Filter to show only template simulations using defaultFilters.

<SimulationTable
  collection={api?.collections.simulation ?? null}
  defaultFilters={{ simulation_mode: 'template' }}
  hideColumns={['start_time', 'end_time', 'booking_start_time', 'booking_end_time']}
  initialOrderBy="name"
/>

Features

• Columns: ID, Name, Start Time, End Time, Booking Start Time, Booking End Time, Created At
• Filters:
  • Activity (preset-based time filter with Active Now, Ended, Future, Booking Opened)
  • Project (autocomplete dropdown with search)
  • Template (multiselect for filtering by template simulations)
  • Mode (select dropdown for real_operations vs template)
• Sorting: All columns except booking times
• Default Sort: -id (newest first)
• Page Size: 20 items per page

Props

Column Details

ID

Unique simulation identifier. Sortable.

Name

Simulation display name. Sortable.

Start Time

When the simulation starts. Displayed in local time format. Sortable. Shows "N/A" if not set.

End Time

When the simulation ends. Displayed in local time format. Sortable. Shows "N/A" if not set.

Booking Start Time

When booking opens for this simulation. Displayed in local time format. Shows "N/A" if not set.

Booking End Time

When booking closes for this simulation. Displayed in local time format. Shows "N/A" if not set.

Created At

When the simulation was created. Displayed in local time format. Sortable.

Filtering

Activity Filter (Time-Based Presets)

The Activity filter provides quick presets for common time-based queries:

• All - No filter, shows all simulations
• Active Now - Simulations currently running
  • Query: start_time__lte=now&end_time__gte=now
  • Shows simulations where current time is between start and end time
• Ended - Simulations that have finished
  • Query: end_time__lte=now
  • Shows simulations where end time is in the past
• Future - Simulations not yet started
  • Query: start_time__gte=now
  • Shows simulations where start time is in the future
• Booking Opened - Simulations accepting bookings
  • Query: booking_start_time__lte=now&booking_end_time__gte=now&start_time__gte=now
  • Shows simulations where booking window is open and simulation hasn't started yet

Implementation Details:

• Type: Select dropdown
• Mode: Server-side (via defaultFilters)
• Width: 200px
• The preset values are automatically converted to the appropriate query parameters

Project Filter

• Type: Autocomplete dropdown
• Mode: Server-side
• Parameter: project_id
• Features:
  • Live search through all projects
  • Displays project name
  • Clears filter when selection is removed
  • Width: 250px

Template Filter

• Type: Multiselect dropdown
• Mode: Server-side
• Parameter: template
• Features:
  • Shows only template simulations (simulation_mode="template")
  • Select multiple templates to filter by
  • Width: 250px

Mode Filter

• Type: Select dropdown
• Mode: Server-side
• Parameter: simulation_mode
• Options:
  • Real Operations (real_operations)
  • Template (template)

Customization

Custom Columns

Override the default columns by providing your own columns prop:

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

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

  const customColumns: ColumnDef<Simulation>[] = [
    { key: 'id', label: 'ID', width: '80px', sortable: true },
    { key: 'name', label: 'Name', sortable: true },
    {
      key: 'start_time',
      label: 'Starts',
      render: (value) => value ? new Date(value).toLocaleDateString() : 'N/A',
      sortable: true
    },
    // Add only the columns you need
  ];

  return (
    <SimulationTable
      collection={api?.collections.simulation ?? null}
      columns={customColumns}
    />
  );
}

Custom Filters

Override the default filters:

import type { FilterDef } from '@/components/sgerp/sgerp-table';

const customFilters: FilterDef<Simulation>[] = [
  {
    key: 'name',
    label: 'Search Name',
    type: 'text',
    mode: 'server',
    serverParam: 'name__icontains',
  },
];

<SimulationTable
  collection={api?.collections.simulation ?? null}
  filters={customFilters}
/>

Adjust Pagination

Change the number of items per page:

<SimulationTable
  collection={api?.collections.simulation ?? null}
  pageSize={50}
  initialOrderBy="-start_time"  // Sort by start time descending (newest first)
/>

Combine Filters

Use defaultFilters to combine with the Activity filter:

// Show only active template simulations
<SimulationTable
  collection={api?.collections.simulation ?? null}
  defaultFilters={{
    simulation_mode: 'template',
    project_id: 123
  }}
/>

The Activity filter will be combined with your defaultFilters - when a user selects "Active Now", it will show active simulations that are also templates in project 123.

Full Customization

For complete control, use SGERPTable directly:

import { SGERPTable } from '@/components/sgerp/sgerp-table';

<SGERPTable
  collection={api?.collections.simulation ?? null}
  columns={myCustomColumns}
  filters={myCustomFilters}
  defaultFilters={myDefaultFilters}
  // ... full control over all options
/>

See the SGERPTable documentation for all available options.

Related Components

• SGERPTable - Base table component
• SGERPAutocomplete - Used for project filter
• SGERPMultiselect - Used for template filter