# Entity List Table # Entity List Table
Relevant source files The following files were used as context for generating this wiki page: - [src/lib/browser-iana-timezone.ts](src/lib/browser-iana-timezone.ts) - [src/lib/components/entity-list-table/EntityListTable.svelte](src/lib/components/entity-list-table/EntityListTable.svelte) - [src/lib/components/entity-list-table/composables/useRowActions.svelte.ts](src/lib/components/entity-list-table/composables/useRowActions.svelte.ts) - [src/lib/components/entity-list-table/composables/useRowRangeSelection.svelte.ts](src/lib/components/entity-list-table/composables/useRowRangeSelection.svelte.ts) - [src/lib/components/entity-list-table/composables/useToolbarMode.svelte.ts](src/lib/components/entity-list-table/composables/useToolbarMode.svelte.ts) - [src/lib/entity-list/format-datetime-iana-cell.ts](src/lib/entity-list/format-datetime-iana-cell.ts) - [src/lib/entity-list/index.ts](src/lib/entity-list/index.ts) - [src/lib/entity-list/sheets/panels/FiltersPanel.svelte](src/lib/entity-list/sheets/panels/FiltersPanel.svelte) - [src/lib/entity-list/types.ts](src/lib/entity-list/types.ts) - [src/lib/i18n/date-format.ts](src/lib/i18n/date-format.ts) - [src/routes/(app)/customers/+page.svelte](src/routes/(app)/customers/+page.svelte)
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. ```mermaid 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](#4.1). **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](#4.2). **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](#4.3). **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](#4.4). **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. ```mermaid 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](). ---