SGERP Frontend

OperationsLocationGroup Table

Pre-configured table component for displaying operations location groups

Live Example

Operations Location Group Table

A table displaying operations location groups with filtering by project and code.

Loading...

Overview

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

Usage

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

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

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

Props

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

PropTypeDefaultDescription
collectionOperationsLocationGroupCollection | null-Required. The location group collection instance
columnsColumnDef<OperationsLocationGroup>[]Default columnsOptional. Custom column definitions
filtersFilterDef<OperationsLocationGroup>[]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: OperationsLocationGroup) => void-Optional. Callback when row is clicked
fullscreenHeightbooleanfalseOptional. Use full viewport height

Default Columns

  • ID: Unique identifier
  • Code: Group code
  • Project: Associated project name
  • Geofence ID: Optional geofence identifier
  • Created At: Timestamp of creation

Default Filters

  • Code: Filter by group code (contains)
  • Project: Filter by project (autocomplete)

Customization

Custom Columns

import { defaultOperationsLocationGroupColumns } from '@/components/sgerp/tables/operationslocationgroup-table';

const columns = [
  ...defaultOperationsLocationGroupColumns.slice(0, 3),
  {
    key: "calculation_params",
    label: "Params",
    render: (value) => JSON.stringify(value)
  },
];

<OperationsLocationGroupTable
  collection={api?.collections.operationslocationgroup ?? null}
  columns={columns}
/>

Hide Columns

<OperationsLocationGroupTable
  collection={api?.collections.operationslocationgroup ?? null}
  hideColumns={['geofence_id', 'created_at']}
/>

Filter by Project

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

Integration with OperationsLocationTable

The OperationsLocationTable includes a group filter that uses this collection:

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

Related