SGERP Frontend

Project Table

Pre-configured table component for displaying projects with edit actions

Live Example

Integrated Editor (Recommended)

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

Loading...

Custom onEdit Handler

For advanced use cases, provide your own onEdit handler for full control.

See code example above for custom implementation

ProjectTable

A ready-to-use table component for displaying projects with their name, timezone, location, and status information. Supports inline edit actions via drawer.

Usage

Basic Table

Display projects in a table with sorting and filtering.

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

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

  return (
    <ProjectTable
      collection={api?.collections.project ?? 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 { ProjectTable } from '@/components/sgerp/tables/project-table';

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

  return (
    <ProjectTable
      collection={api?.collections.project ?? null}
      api={api}
      enableEditor={true}
      onEditSuccess={(project) => {
        console.log('Project updated:', project);
      }}
    />
  );
}

The table will automatically:

  • Add an "Actions" column with Edit buttons
  • Open a drawer with the ProjectEditor
  • 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 { ProjectTable } from '@/components/sgerp/tables/project-table';
import { ProjectEditor } from '@/components/sgerp/editors/project-editor';

function MyComponent() {
  const api = useSGERP();
  const [editingProject, setEditingProject] = useState<Project | null>(null);

  return (
    <>
      <ProjectTable
        collection={api?.collections.project ?? null}
        onEdit={(project) => setEditingProject(project)}
      />

      {/* Drawer */}
      {editingProject && (
        <div className="fixed inset-0 z-50">
          <div
            className="absolute inset-0 bg-black/50"
            onClick={() => setEditingProject(null)}
          />
          <div className="absolute right-0 top-0 bottom-0 w-full max-w-md bg-background shadow-lg">
            <div className="flex items-center justify-between p-4 border-b">
              <h2 className="text-lg font-semibold">Edit Project</h2>
              <button onClick={() => setEditingProject(null)}>×</button>
            </div>
            <div className="overflow-y-auto p-4" style={{ height: 'calc(100vh - 73px)' }}>
              <ProjectEditor
                projectId={editingProject.id}
                onSuccess={() => setEditingProject(null)}
              />
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Features

  • Columns: ID, Name, Timezone, Latitude, Longitude, Status, Created At
  • Filters: Name (text), Timezone (text)
  • Sorting: ID, Name, Timezone, Created
  • Default Sort: -id (newest first)
  • Page Size: 20 items per page
  • Actions: Optional Edit button per row

Props

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

Column Details

Name

Project display name, required field.

Timezone

Geographic timezone (e.g., "America/New_York", "Asia/Tokyo").

Latitude / Longitude

Geographic coordinates displayed with 6 decimal places for precision.

Status

Shows "Active" if not invalidated, "Invalidated" otherwise.

Created At

Formatted date/time string showing when the project was created.

Filtering

  • Name: Case-insensitive text search (name__icontains)
  • Timezone: Case-insensitive text search (timezone__icontains)

Edit Actions

When 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)
  • Calls onEdit with the project data
  • Typically used to open a drawer or modal with ProjectEditor