Frontend

Entity List Table

Relevant source files

The following files were used as context for generating this wiki page:

The Entity List Table is the central data-grid engine of the Primebrick Frontend. It is a highly composable, reusable system designed to handle complex entity management tasks including server-side pagination, advanced filtering, multi-modal view switching, and bulk operations.

The system is built around EntityListTable.svelte src/lib/components/entity-list-table/EntityListTable.svelte:1-43, which orchestrates several specialized components and composables to provide a consistent experience across different domain modules like Customers or Organizations.

System Architecture

The architecture follows a "Smart Component / Functional Composables" pattern. The main component manages the high-level layout, while logic for selection, actions, and data formatting is delegated to dedicated modules.

Component Relationship Map

This diagram shows how the core EntityListTable orchestrates its internal subsystems.

Code
graph TD
    subgraph "Entity List Table (Core)"
        ELT["EntityListTable.svelte"]
        ELTC["EntityListTableContent"]
    end

    subgraph "View Layers"
        TV["EntityListTableTableView"]
        CV["EntityListTableCardView"]
        ELT --> TV
        ELT --> CV
    end

    subgraph "Composables (Logic)"
        RA["useRowActions"]
        RS["useRowRangeSelection"]
        BA["useBulkActions"]
        EX["useExport"]
        ELT --- RA
        ELT --- RS
        ELT --- BA
        ELT --- EX
    end

    subgraph "Panels (Side Sheets)"
        FP["FiltersPanel"]
        CP["ColumnSelectorPanel"]
        PP["PreviewPanel"]
        ELT --- FP
        ELT --- CP
        ELT --- PP
    end

    subgraph "Shared Utilities"
        DF["formatDatetimeIanaListCell"]
        MC["orderedColumnsFromListMeta"]
    end

Sources: src/lib/components/entity-list-table/EntityListTable.svelte:24-64, src/lib/entity-list/index.ts:1-4

Data Interface & Metadata

The table is driven by a MetaColumn configuration src/lib/entity-list/types.ts:21-45 typically fetched from the backend. This metadata defines column types (text, badge, date, datetime, color), sortability, and visibility rules.

Entity Type	Description	Reference
`MetaColumn`	Defines individual column behavior and rendering type.	src/lib/entity-list/types.ts:21-45
`EntityListListMeta`	Contains the collection of columns, default sorts, and view visibility.	src/lib/entity-list/types.ts:48-75
`ViewName`	Enum for view modes: `table`, `cards`, or `cards_list`.	src/lib/entity-list/types.ts:5-5

Sources: src/lib/entity-list/types.ts:1-146

Core Subsystems

Table Rendering & View Modes

The system supports multiple rendering modes. The table mode provides a dense, spreadsheet-like interface with sticky columns and row-level interactions. The cards and cards_list modes offer responsive alternatives for mobile or visual-heavy data.

For details, see Table Rendering & View Modes. Sources: src/lib/components/entity-list-table/EntityListTable.svelte:39-42, src/lib/entity-list/types.ts:5-5

Filtering, Search & Column Management

Filtering is handled via the FiltersPanel.svelte src/lib/entity-list/sheets/panels/FiltersPanel.svelte:1-59, which supports both standard field-based filtering and "Advanced Filters" using logical operators (e.g., BETWEEN, startsWith). The system also includes a SearchBar with syntax highlighting and a ColumnSelectorPanel for drag-and-drop reordering.

For details, see Filtering, Search & Column Management. Sources: src/lib/entity-list/sheets/panels/FiltersPanel.svelte:74-81, src/lib/entity-list/types.ts:136-146

Row Actions & Bulk Operations

Logic for individual row interactions (Edit, Delete, Duplicate) is encapsulated in the useRowActions composable src/lib/components/entity-list-table/composables/useRowActions.svelte.ts:56-73. Bulk operations are managed by useBulkActions, allowing users to perform actions on multiple selected records simultaneously.

For details, see Row Actions, Selection & Bulk Operations. Sources: src/lib/components/entity-list-table/composables/useRowActions.svelte.ts:33-54, src/lib/components/entity-list-table/composables/useBulkActions.svelte.js

Export, Preview & Dialogs

The table integrates with an export system supporting XLSX, CSV, HTML, and PDF formats via useExport. It also features a PreviewPanel for quick record inspection without leaving the list view and a set of standardized confirmation dialogs.

For details, see Export, Preview Panel & Dialogs. Sources: src/lib/components/entity-list-table/composables/useExport.svelte.js, src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.js

Code-to-Concept Mapping

The following diagram maps high-level user actions to the specific code entities responsible for executing them.

Code
sequenceDiagram
    participant User
    participant ELT as "EntityListTable.svelte"
    participant URA as "useRowActions.ts"
    participant API as "apiFetch (api.ts)"

    User->>ELT: Clicks "Delete" on Row
    ELT->>URA: handleDeleteRow(row)
    Note over URA: Opens DeleteDialog
    User->>ELT: Confirms Deletion
    ELT->>URA: confirmDeleteRowImpl(row)
    URA->>API: DELETE /api/v1/entities/{entity}/{uuid}
    API-->>URA: 204 No Content
    URA->>ELT: onRefresh()

Sources: src/lib/components/entity-list-table/composables/useRowActions.svelte.ts:101-164, src/lib/components/entity-list-table/EntityListTable.svelte:61-61

Key Utility Functions

orderedColumnsFromListMeta: Merges sticky, data, and auditing columns into a single flat array for rendering src/lib/entity-list/types.ts:78-84.
formatDatetimeIanaListCell: Handles complex timezone rendering, switching between browser-local time and the specific IANA timezone stored in the record src/lib/entity-list/format-datetime-iana-cell.ts:6-24.
useToolbarMode: A reactive composable that switches the top toolbar between "Filter Mode" and "Bulk Action Mode" based on user selection state src/lib/components/entity-list-table/composables/useToolbarMode.svelte.ts:5-47.

Last modified on July 13, 2026

Entity Forms & Audit System Error Handling System