SGERP Frontend

OperationsLocation Table

Pre-configured table component for displaying operations locations

Live Example

Operations Location Table

A table displaying operations locations with filtering by project, name, external ID, code, and address. Includes an integrated map with 3 layout modes: hide, split (50/50), and full map.

Loading...

Overview

The OperationsLocationTable is a pre-configured table component for displaying operations locations from the SGERP API. It extends the base SGERPTable with sensible defaults for operations location data.

Usage

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

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

  return (
    <OperationsLocationTable
      collection={api?.collections.operationslocation ?? null}
    />
  );
}

Props

All props from SGERPTable are supported. See the SGERPTable documentation for details.

PropTypeDefaultDescription
collectionOperationsLocationCollection | null-Required. The operations location collection instance
columnsColumnDef<OperationsLocation>[]Default columnsOptional. Custom column definitions
filtersFilterDef<OperationsLocation>[]Default filtersOptional. Custom filter definitions
defaultFiltersRecord<string, any>{}Optional. Initial filter values
initialOrderBystring"-created_at"Optional. Initial sort order
pageSizenumber20Optional. Number of rows per page
onRowClick(row: OperationsLocation) => void-Optional. Callback when row is clicked
fullscreenHeightbooleanfalseOptional. Use full viewport height

Default Columns

  • ID: Unique identifier
  • Name: Location name
  • External ID: External system identifier
  • Code: Location code
  • Address: Full address
  • Postal Code: Postal/ZIP code
  • Coordinates: Geographic coordinates (lat, lon)
  • Project: Associated project name

Default Filters

  • Name: Filter by location name (contains)
  • External ID: Filter by external ID (contains)
  • Code: Filter by location code (contains)
  • Address: Filter by address (contains)
  • Project: Filter by project (autocomplete)

Customization

Custom Columns

import { defaultOperationsLocationColumns } from '@/components/sgerp/tables/operationslocation-table';

const columns = [
  ...defaultOperationsLocationColumns.slice(0, 3),
  {
    key: "time_windows",
    label: "Time Windows",
    render: (value) => value?.length || 0
  },
];

<OperationsLocationTable
  collection={api?.collections.operationslocation ?? null}
  columns={columns}
/>

Hide Columns

<OperationsLocationTable
  collection={api?.collections.operationslocation ?? null}
  hideColumns={['postal_code', 'external_id']}
/>

Filter by Project

<OperationsLocationTable
  collection={api?.collections.operationslocation ?? null}
  defaultFilters={{ project_id: 759 }}
/>

Related