Copy page

Frontend

Export, Preview Panel & Dialogs

Export, Preview Panel & Dialogs

Relevant source files

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

• src/lib/components/entity-list-table/components/CellRenderer.svelte
• src/lib/components/entity-list-table/components/EntityListTableDialogs.svelte
• src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte
• src/lib/components/entity-list-table/composables/useClientSelection.svelte.ts
• src/lib/components/entity-list-table/composables/useDeletionFilter.svelte.ts
• src/lib/components/entity-list-table/composables/useExport.svelte.ts
• src/lib/components/entity-list-table/composables/useFilterPersistence.svelte.ts
• src/lib/components/entity-list-table/composables/useFilters.svelte.ts
• src/lib/components/entity-list-table/composables/useKeyboardNavigation.svelte.ts
• src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts
• src/lib/components/entity-list-table/composables/useScrollPreservation.svelte.ts
• src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts
• src/lib/components/entity-list-table/dialogs/DeleteDialog.svelte
• src/lib/components/entity-list-table/dialogs/DuplicateDialog.svelte
• src/lib/components/entity-list-table/dialogs/ExportDialog.svelte
• src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte
• src/lib/components/entity-list-table/dialogs/HtmlExportDialog.svelte
• src/lib/components/entity-list-table/dialogs/RestoreDialog.svelte
• src/lib/components/entity-list-table/dialogs/index.ts
• src/lib/components/entity-list-table/panels/index.ts
• src/lib/components/entity-list-table/toolbar/FilterBar.svelte
• src/lib/components/entity-list-table/toolbar/SelectionCounter.svelte
• src/lib/components/entity-list-table/toolbar/index.ts
• src/lib/components/entity-list-table/types.ts

This section details the auxiliary systems of the EntityListTable that handle data extraction, record-level inspection, and confirmation workflows. These features are implemented using Svelte 5 runes for reactive state management and are decoupled into composables for maintainability.

Export System

The export system provides a multi-modal interface for extracting data from the backend in various formats (XLSX, CSV, HTML, PDF, Email). It is driven by the useExport composable.

useExport Composable

The useExport composable manages the state and logic for both file-based exports and HTML-based previews. It constructs complex query parameters for the backend, including search terms, sorting, and serialized filters src/lib/components/entity-list-table/composables/useExport.svelte.ts:145-215.

Key Export Modes:

1. File Export (XLSX/CSV): Triggers a direct download from the backend API.
2. HTML Preview: Fetches an HTML representation of the selected data for viewing in a full-screen dialog src/lib/components/entity-list-table/composables/useExport.svelte.ts:285-300.
3. PDF Generation: Converts the HTML preview into a PDF blob for browser viewing src/lib/components/entity-list-table/composables/useExport.svelte.ts:317-340.
4. Email Preparation: Formats the data for email clients and provides a "Copy to Clipboard" function for the HTML content src/lib/components/entity-list-table/composables/useExport.svelte.ts:342-365.

Export UI Components

• ExportDialog: The initial entry point where users select the file type (XLSX/CSV) and the scope (Selected vs. All) src/lib/components/entity-list-table/dialogs/ExportDialog.svelte:1-106.
• HtmlExportDialog: A confirmation dialog specifically for HTML-based exports, typically used when generating reports src/lib/components/entity-list-table/dialogs/HtmlExportDialog.svelte:35-67.
• ExportPreviewDialog: A full-screen DialogBordered component containing a Dock for switching between HTML, PDF, and Email views src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte:51-81. It uses an iframe with the srcdoc attribute to render the raw HTML returned by the server src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte:86-91.

Sources: src/lib/components/entity-list-table/composables/useExport.svelte.ts:6-53, src/lib/components/entity-list-table/dialogs/ExportPreviewDialog.svelte:16-48, src/lib/components/entity-list-table/dialogs/HtmlExportDialog.svelte:12-32.

---

Record Preview Panel

The Preview Panel allows users to inspect a specific record's details without navigating away from the list. It supports side-by-side viewing with the table and keyboard-driven navigation.

usePreviewPanel Composable

This composable tracks the currently active record (previewRow) and its index within the visible set src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts:30-34. It provides navigatePreview('next' | 'prev') logic to cycle through rows src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts:64-85.

PreviewPanelWrapper

This component manages the layout transition when the preview is opened. It includes a resizable handle that allows users to adjust the split between the table and the preview panel src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:205-210.

• Persistence: The panel's width and the last opened rowKey are persisted in sessionStorage per entity src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:102-111.
• Navigation: It automatically handles page changes. If a user is at the last record of page 1 and navigates "Next", the wrapper triggers onPageChange and resets the preview to the first record of page 2 src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:183-198.

Natural Language to Code Entity Space: Preview Logic

System Name	Code Entity	File
Preview State	previewPanelOpen	usePreviewPanel.svelte.ts:33
Row Selection	openPreview(row)	usePreviewPanel.svelte.ts:36
Panel Resizing	startResize(e)	PreviewPanelWrapper.svelte:124
Version History	loadVersionHistory(row)	PreviewPanelWrapper.svelte:144
Navigation Guard	canNavigateNext	usePreviewPanel.svelte.ts:87

Sources: src/lib/components/entity-list-table/composables/usePreviewPanel.svelte.ts:10-23, src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:52-84.

---

Entity Dialogs

The EntityListTableDialogs component serves as a registry for all confirmation dialogs used by the table. It centralizes the binding between composable states (e.g., rowActionsComposable.isDeleting) and the UI src/lib/components/entity-list-table/components/EntityListTableDialogs.svelte:59-146.

Standard Dialog Types

• DeleteDialog / BulkDeleteDialog: Confirmations for single or multiple record deletions.
• RestoreDialog / BulkRestoreDialog: Used when the deletion filter is active to recover soft-deleted records.
• DuplicateDialog: Confirms the duplication of a record, often used in CRM or Product modules.

Implementation Pattern

All dialogs follow a consistent pattern using the DialogBordered primitive, accepting an open bindable and onConfirm/onCancel callbacks.

Code
graph TD
    subgraph "Composables"
        A["useRowActions"]
        B["useBulkActions"]
        C["useExport"]
    end

    subgraph "EntityListTableDialogs.svelte"
        D["DeleteDialog"]
        E["BulkDeleteDialog"]
        F["ExportDialog"]
        G["DuplicateDialog"]
    end

    A -- "isDeleting" --> D
    B -- "isDeleting" --> E
    C -- "exportOpen" --> F
    A -- "isDuplicating" --> G

Sources: src/lib/components/entity-list-table/components/EntityListTableDialogs.svelte:4-29, src/lib/components/entity-list-table/dialogs/index.ts:1-9.

---

Table Footer & Pagination

The EntityListTableFooter (referenced via props in PreviewPanelWrapper) manages the pagination state and selection summaries.

• Pagination: Controlled via page and pageSize props. It interacts with the PreviewPanelWrapper to ensure navigation remains seamless across page boundaries src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:183-198.
• Selection Summary: When rows are selected, the SelectionCounter component (usually in the toolbar but synced with the footer's data) displays the count and provides a toggle for "Show Selected Only" mode.

Sticky Columns Support

The footer and table body utilize useStickyColumns to ensure that action columns and checkboxes remain visible during horizontal scrolling src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts:4-8. The updateStickyOffsets function calculates the left CSS property for each sticky cell based on the width of preceding columns src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts:54-91.

Sources: src/lib/components/entity-list-table/composables/useStickyColumns.svelte.ts:132-141, src/lib/components/entity-list-table/components/PreviewPanelWrapper.svelte:36-40.

---