SGERP Frontend

VehicleType Table

Pre-configured table component for displaying vehicle types with project filter and edit actions

Live Example

Integrated Editor with Project Filter

Vehicle type table with integrated editor and autocomplete project filter.

Loading...

Read-only Table

Vehicle type table without editing capabilities.

Loading...

VehicleTypeTable

A ready-to-use table component for displaying vehicle types with their name, project, capacity, cost, and creation information. Features integrated autocomplete project filter and optional inline edit actions via drawer.

Usage

Basic Table

Display vehicle types with default columns and filters.

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

Integrated Editor (Recommended)

Enable editing with just enableEditor={true}. The table handles the drawer and editor automatically.

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}
      api={api}
      enableEditor={true}
      onEditSuccess={(vehicleType) => {
        console.log('Vehicle type updated:', vehicleType);
      }}
    />
  );
}

The table will automatically:

  • Add an "Actions" column with Edit buttons
  • Open a drawer with the VehicleTypeEditor
  • Handle all state management
  • Update the table when save succeeds

Custom onEdit Handler

For advanced use cases, provide your own onEdit handler for full control over the editing experience.

import { useState } from 'react';
import { useSGERP } from 'sgerp-frontend-lib';
import { VehicleTypeTable } from '@/components/sgerp/tables/vehicletype-table';
import { VehicleTypeEditor } from '@/components/sgerp/editors/vehicletype-editor';

function MyComponent() {
  const api = useSGERP();
  const [editingVehicleType, setEditingVehicleType] = useState<VehicleType | null>(null);

  return (
    <>
      <VehicleTypeTable
        collection={api?.collections.vehicletype ?? null}
        onEdit={(vehicleType) => setEditingVehicleType(vehicleType)}
      />

      {/* Custom drawer implementation */}
      {editingVehicleType && (
        <div className="fixed inset-0 z-50">
          <div
            className="absolute inset-0 bg-black/50"
            onClick={() => setEditingVehicleType(null)}
          />
          <div className="absolute right-0 top-0 h-full w-full max-w-md bg-background shadow-xl">
            <div className="flex h-full flex-col">
              <div className="border-b px-6 py-4 flex items-center justify-between">
                <h2 className="text-lg font-semibold">Edit Vehicle Type</h2>
                <button onClick={() => setEditingVehicleType(null)}>āœ•</button>
              </div>
              <div className="flex-1 overflow-y-auto px-6 py-4">
                <VehicleTypeEditor
                  vehicleTypeId={editingVehicleType.id}
                  initialData={editingVehicleType}
                  api={api}
                  onSuccess={() => setEditingVehicleType(null)}
                  onCancel={() => setEditingVehicleType(null)}
                />
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Features

  • Columns: ID, Name, Project ID, Capacity, Vehicle Cost, Created At
  • Filters:
    • Name (text input with server-side search)
    • Project (autocomplete dropdown with search)
  • Sorting: ID, Name, Project ID, Vehicle Cost, Created
  • Default Sort: -id (newest first)
  • Page Size: 20 items per page
  • Actions: Optional Edit button per row

Props

PropTypeRequiredDescription
collectionVehicleTypeCollection | nullYesThe vehicle type collection to display
apiReturnType<typeof useSGERP>NoAPI instance (required when enableEditor={true})
columnsColumnDef<VehicleType>[]NoCustom column definitions (overrides defaults)
filtersFilterDef[]NoCustom filter definitions (overrides defaults)
initialOrderBystringNoInitial sort order (default: -id)
pageSizenumberNoItems per page (default: 20)
onRowClick(row: VehicleType) => voidNoCallback when a row is clicked
onEdit(row: VehicleType) => voidNoCustom callback when Edit button is clicked (overrides integrated editor)
enableEditorbooleanNoEnable integrated editor drawer (default: false)
onEditSuccess(vehicleType: VehicleType) => voidNoCallback when integrated editor saves successfully

Column Details

Name

Vehicle type display name (required, unique per project, no spaces allowed).

Project ID

ID of the project to which this vehicle type belongs.

Capacity

JSON object representing capacity constraints. Displayed as JSON string.

Vehicle Cost

Integer cost value for this vehicle type. Shows "N/A" if not set.

Created At

Formatted date showing when the vehicle type was created.

Filtering

Name Filter

  • Type: Text input
  • Mode: Server-side
  • Parameter: name__icontains (case-insensitive substring match)

Project Filter

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

Edit Actions

When enableEditor={true} or the onEdit prop is provided, an "Actions" column is automatically added with an Edit button for each row. The button click:

  • Stops event propagation (won't trigger onRowClick)
  • Opens the VehicleTypeEditor in a drawer (if enableEditor={true})
  • Calls onEdit callback (if provided, overrides integrated editor)

Related Components