@efa-one/sdk 1.20.0 → 1.22.0

package/README.md

@@ -14,7 +14,7 @@ sub-paths — this keeps `express` out of the frontend and `react` out of the ba
 |---|---|---|
 | `@efa-one/sdk/backend` | Node/Express | Auth + token exchange (`requireAuth`, `createExchangeRouter`, `requireInternalOrAuth` …), health router, service discovery + gateway client (`serviceClient`, `resolveService`), clients for audit/reporting/mail/notifications, permission resolution/registration (`getUserPermissions`, `registerPermissions`, `checkPermission`), capability registry (`registerApiMetadata`), backend i18n |
 | `@efa-one/sdk/frontend` | Browser/React | postMessage IPC (`registerAppInfo`, `sendAtStart`, `navigateToApp`, `notifyRouteChange` …), react-i18next factory (`initI18n`), `DevHeader` |
-| `@efa-one/sdk/frontend/ui` | Browser/React | The efa-one design-system kit: `Button`, `Input`, `Badge`, `Alert`, `Dialog`, `DropdownMenu`, `Tooltip`, `EmptyState`, `Skeleton`, `RecordDialog`, and the **`DataTable`** (sortable/filterable/groupable list with draggable, resizable columns and a per-user persisted view; reflows to stacked cards below 640px). Also exports `useIsMobile` — the platform-wide 640px breakpoint hook. Ship its companion CSS once: `import '@efa-one/sdk/frontend/ui/styles.css'` |
+| `@efa-one/sdk/frontend/ui` | Browser/React | The efa-one design-system kit: `Button`, `Input`, `Badge`, `Alert`, `Dialog`, `DropdownMenu`, `Tooltip`, `EmptyState`, `Skeleton`, `RecordDialog`, and the **`DataTable`** (sortable/filterable/groupable list with draggable, resizable columns, a per-user persisted view and CSV/Excel export of the current view; reflows to stacked cards below 640px). Also exports `useIsMobile` — the platform-wide 640px breakpoint hook. Ship its companion CSS once: `import '@efa-one/sdk/frontend/ui/styles.css'` |
 | `@efa-one/sdk/frontend/format` | Browser | Platform-wide date/time display — `formatDate` (`01.09.2026`), `formatDateTime` (`01.09.2026, 11:05`), `formatTime`, `formatFileStamp`, `localeForLanguage`. Always use these instead of `toLocaleDateString`/`toLocaleString`: without an options object those render `1.9.2026`, and without a locale argument they follow the browser language (`9/1/2026`) |
 | `@efa-one/sdk/frontend/viewPreferences` | Browser/React | Persistence seam for `DataTable` — `createViewPreferencesClient()` (standard `/api/view-preferences/:listId` adapter) + `useViewPreferences()` |
 
@@ -105,6 +105,11 @@ const columns: ColumnDef<Item>[] = [
 <DataTable listId="items.list" rows={items} columns={columns} rowKey={(r) => r.id} persistence={viewPrefs} />
 ```
 
+Columns added later show up in views users saved before (at their natural position) — no
+need to bump `DEFAULT_VIEW_VERSION` and reset everyone's view. Grouped lists open collapsed;
+pass `groupsDefaultExpanded` (e.g. with `initialPrefs={{ groupBy: ['category'] }}`) to start
+with every group expanded while keeping groups the user collapses closed.
+
 ## Build your first app
 
 This repo ships a ready-to-copy app scaffold under [`template/`](./template) — the fastest
@@ -211,6 +216,29 @@ chronologically, groups by day and lets the text filter match the displayed form
 the app's job: use `formatDate`/`formatDateTime`, never `toLocaleDateString` (that is
 where `7.10.2026` comes from). No backend or kernel change.
 
+**1.21.0 — new columns in old views, groups that start open.** A column added to
+`columns` after a user saved their view now appears in that view at its natural position
+(and stays hidden if it has `defaultVisible: false`), and can be dragged like any other —
+before, it was missing until the user reset the view. New prop `groupsDefaultExpanded`:
+groups start expanded; groups the user collapses stay collapsed. No backend or kernel
+change.
+
+**1.22.0 — export the current view.** The DataTable's gear menu now has „Excel" and
+„CSV" buttons. Both export exactly what the user sees: filtered and sorted rows (in
+group order when grouped, collapsed groups included), visible columns in their order.
+CSV uses `;` as separator, `,` as decimal mark and a UTF-8 BOM, so German Excel opens
+it by double-click; text that starts like a formula is prefixed with `'`. The .xlsx is
+written without a dependency (stored ZIP): bold, light-grey header row with thin
+borders, frozen, with autofilter; numbers and dates are real Excel values
+(`dd.mm.yyyy`). Values come from `accessor`, not from `cell`; multi-select filter
+codes are exported as their labels. New `ColumnDef` fields `exportValue` (own export
+value) and `exportable: false` (leave out, e.g. action columns), new props
+`exportFileName` (default: `listId`, plus a timestamp) and `exportable={false}` (hide
+the export, e.g. without an export permission). `toCsv`/`toXlsx`/`downloadFile` are
+exported for app-side use. CSV is CSV: Excel turns `01067` into `1067` and long digit
+strings into `1,23E+18`, and shows the `'` in front of `+49 …` — point users to the
+Excel export for such data. No backend or kernel change.
+
 ## License
 
 [Apache-2.0](./LICENSE) — permissive with a patent grant, so customers and partners

package/frontend/ui/DataTable.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewPreferencesAdapter } from '../viewPreferences.js';
+import { type ExportCell, type ExportTable } from './tableExport.js';
 export type FilterDef = {
     type: 'text';
 } | {
@@ -23,6 +24,8 @@ export interface ColumnDef<T> {
     sortable?: boolean;
     width?: string;
     defaultVisible?: boolean;
+    exportValue?: (row: T) => string | number | boolean | Date | null | undefined;
+    exportable?: boolean;
 }
 interface FilterValue {
     text?: string;
@@ -56,10 +59,18 @@ interface DataTableProps<T, K extends string | number> {
     selection?: DataTableSelectionProps<K>;
     initialPrefs?: Partial<ViewPrefs>;
     footer?: React.ReactNode;
+    groupsDefaultExpanded?: boolean;
     persistence?: ViewPreferencesAdapter;
+    exportable?: boolean;
+    exportFileName?: string;
 }
 export declare function defaultPrefsFor<T>(columns: ColumnDef<T>[], overrides?: Partial<ViewPrefs>): ViewPrefs;
+export declare function reconcileOrder<T>(columns: ColumnDef<T>[], order: string[]): string[];
+export declare function isColumnVisible<T>(column: ColumnDef<T>, visibility: Record<string, boolean>): boolean;
 export declare function formatCellValue<T>(col: ColumnDef<T>, row: T): string;
+export declare function exportCellOf<T>(col: ColumnDef<T>, row: T): ExportCell;
+export declare function buildExportTable<T>(rows: T[], visibleColumns: ColumnDef<T>[]): ExportTable;
+export declare function exportFileBase(name: string, now?: Date): string;
 export declare const MIN_COLUMN_WIDTH = 60;
 export declare const MAX_COLUMN_WIDTH = 1600;
 export declare function clampColumnWidth(px: number): number;
@@ -75,6 +86,7 @@ interface RenderItem<T> {
     expanded?: boolean;
     row?: T;
 }
-export declare function buildRenderItems<T>(rows: T[], groupBy: string[], columnsById: Map<string, ColumnDef<T>>, expandedGroups: Set<string>): RenderItem<T>[];
-export declare function DataTable<T, K extends string | number>({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, persistence, }: DataTableProps<T, K>): React.ReactElement;
+export declare function buildRenderItems<T>(rows: T[], groupBy: string[], columnsById: Map<string, ColumnDef<T>>, expandedGroups: Set<string> | 'all'): RenderItem<T>[];
+export declare function collectAllGroupKeys<T>(rows: T[], groupBy: string[], columnsById: Map<string, ColumnDef<T>>): string[];
+export declare function DataTable<T, K extends string | number>({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, groupsDefaultExpanded, persistence, exportable, exportFileName, }: DataTableProps<T, K>): React.ReactElement;
 export {};

package/frontend/ui/DataTable.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import * as DropdownMenu from './DropdownMenu.js';
-import { ChevronDown, ChevronUp, ChevronRight, Settings, EyeOff, Filter, RotateCcw, ArrowUp, ArrowDown, Layers, X, GripVertical } from 'lucide-react';
+import { ChevronDown, ChevronUp, ChevronRight, Settings, EyeOff, Filter, RotateCcw, ArrowUp, ArrowDown, Layers, X, GripVertical, Download } from 'lucide-react';
 import { Button } from './Button.js';
 import { useViewPreferences } from '../viewPreferences.js';
 import { useIsMobile } from '../useIsMobile.js';
-import { formatDate, formatDateTime } from '../format.js';
+import { formatDate, formatDateTime, formatFileStamp } from '../format.js';
+import { downloadFile, toCsv, toXlsx, trimChar, XLSX_MIME } from './tableExport.js';
 const GROUP_KEY_SEP = '\x1f';
 const EMPTY_GROUP_LABEL = '– ohne –';
 export const DEFAULT_VIEW_VERSION = 2;
@@ -23,6 +24,21 @@ export function defaultPrefsFor(columns, overrides) {
         ...(overrides ?? {}),
     };
 }
+export function reconcileOrder(columns, order) {
+    const known = new Set(columns.map((c) => c.id));
+    const result = order.filter((id) => known.has(id));
+    const present = new Set(result);
+    columns.forEach((c, idx) => {
+        if (present.has(c.id))
+            return;
+        result.splice(Math.min(idx, result.length), 0, c.id);
+        present.add(c.id);
+    });
+    return result;
+}
+export function isColumnVisible(column, visibility) {
+    return visibility[column.id] ?? column.defaultVisible !== false;
+}
 function isDateColumn(col, value) {
     return col.type === 'date' || col.type === 'datetime' || (col.type == null && value instanceof Date);
 }
@@ -39,6 +55,47 @@ export function formatCellValue(col, row) {
     }
     return String(v ?? '');
 }
+export function exportCellOf(col, row) {
+    const v = col.exportValue ? col.exportValue(row) : col.accessor(row);
+    if (v == null || v === '')
+        return null;
+    if (isDateColumn(col, v)) {
+        const t = timeOf(v);
+        if (t != null)
+            return { date: new Date(t), withTime: col.type === 'datetime' };
+        return col.exportValue ? String(v) : null;
+    }
+    const f = col.exportValue ? undefined : col.filter;
+    if (typeof v === 'boolean') {
+        if (f?.type === 'boolean')
+            return v ? (f.labelTrue ?? 'Ja') : (f.labelFalse ?? 'Nein');
+        return v ? 'Ja' : 'Nein';
+    }
+    if (typeof v === 'number') {
+        if (!Number.isFinite(v))
+            return null;
+        const opt = f?.type === 'multi-select' ? f.options.find((o) => o.value === String(v)) : undefined;
+        return opt ? opt.label : v;
+    }
+    const labelOf = (x) => {
+        const s = String(x);
+        return f?.type === 'multi-select' ? (f.options.find((o) => o.value === s)?.label ?? s) : s;
+    };
+    if (Array.isArray(v))
+        return v.map(labelOf).join(', ');
+    return labelOf(v);
+}
+export function buildExportTable(rows, visibleColumns) {
+    const cols = visibleColumns.filter((c) => c.exportable !== false);
+    return {
+        headers: cols.map((c) => c.label),
+        rows: rows.map((r) => cols.map((c) => exportCellOf(c, r))),
+    };
+}
+export function exportFileBase(name, now = new Date()) {
+    const base = trimChar(name.trim().replace(/[\\/:*?"<>|\s]+/g, '_'), '_') || 'export';
+    return `${base}_${formatFileStamp(now)}`;
+}
 export const MIN_COLUMN_WIDTH = 60;
 export const MAX_COLUMN_WIDTH = 1600;
 const KEYBOARD_RESIZE_STEP = 16;
@@ -76,6 +133,12 @@ export function groupLabelOf(value) {
     const s = String(value).trim();
     return s;
 }
+function groupBucketLabel(col, raw) {
+    const lbl = isDateColumn(col, raw)
+        ? (timeOf(raw) == null ? '' : formatDate(raw))
+        : groupLabelOf(raw);
+    return lbl || EMPTY_GROUP_LABEL;
+}
 export function buildRenderItems(rows, groupBy, columnsById, expandedGroups) {
     if (groupBy.length === 0)
         return rows.map((row) => ({ kind: 'row', row }));
@@ -98,8 +161,7 @@ export function buildRenderItems(rows, groupBy, columnsById, expandedGroups) {
             const isDate = isDateColumn(col, raw);
             if (isDate)
                 chronological = true;
-            const lbl = isDate ? (timeOf(raw) == null ? '' : formatDate(raw)) : groupLabelOf(raw);
-            const bucketLabel = lbl || EMPTY_GROUP_LABEL;
+            const bucketLabel = groupBucketLabel(col, raw);
             const arr = buckets.get(bucketLabel) ?? [];
             arr.push(r);
             buckets.set(bucketLabel, arr);
@@ -118,7 +180,7 @@ export function buildRenderItems(rows, groupBy, columnsById, expandedGroups) {
         for (const label of labels) {
             const childRows = buckets.get(label);
             const key = parentKey ? `${parentKey}${GROUP_KEY_SEP}${label}` : label;
-            const expanded = expandedGroups.has(key);
+            const expanded = expandedGroups === 'all' || expandedGroups.has(key);
             out.push({
                 kind: 'group',
                 key,
@@ -134,7 +196,31 @@ export function buildRenderItems(rows, groupBy, columnsById, expandedGroups) {
     recurse(rows, 0, '');
     return out;
 }
-export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, persistence, }) {
+export function collectAllGroupKeys(rows, groupBy, columnsById) {
+    const keys = [];
+    const recurse = (subset, depth, parentKey) => {
+        if (depth >= groupBy.length)
+            return;
+        const col = columnsById.get(groupBy[depth]);
+        if (!col)
+            return;
+        const buckets = new Map();
+        for (const r of subset) {
+            const lbl = groupBucketLabel(col, col.accessor(r));
+            const arr = buckets.get(lbl) ?? [];
+            arr.push(r);
+            buckets.set(lbl, arr);
+        }
+        for (const [label, childRows] of buckets) {
+            const key = parentKey ? `${parentKey}${GROUP_KEY_SEP}${label}` : label;
+            keys.push(key);
+            recurse(childRows, depth + 1, key);
+        }
+    };
+    recurse(rows, 0, '');
+    return keys;
+}
+export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection, initialPrefs, footer, groupsDefaultExpanded, persistence, exportable = true, exportFileName, }) {
     const defaultPrefs = useMemo(() => defaultPrefsFor(columns, initialPrefs), [columns, initialPrefs]);
     const [prefs, setPrefs, reset] = useViewPreferences(listId, defaultPrefs, persistence);
     const isMobile = useIsMobile();
@@ -155,12 +241,27 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
     const [dragColumnId, setDragColumnId] = useState(null);
     const [dropTarget, setDropTarget] = useState(null);
     const containerRef = useRef(null);
+    const effectiveOrder = useMemo(() => reconcileOrder(columns, prefs.columnOrder), [columns, prefs.columnOrder]);
+    const seenGroupKeysRef = useRef(new Set());
+    useEffect(() => {
+        if (!groupsDefaultExpanded || groupBy.length === 0)
+            return;
+        const fresh = collectAllGroupKeys(rows, groupBy, columnsById).filter((k) => !seenGroupKeysRef.current.has(k));
+        if (fresh.length === 0)
+            return;
+        fresh.forEach((k) => seenGroupKeysRef.current.add(k));
+        setExpandedGroups((prev) => {
+            const next = new Set(prev);
+            fresh.forEach((k) => next.add(k));
+            return next;
+        });
+    }, [groupsDefaultExpanded, rows, groupBy, columnsById]);
     const visibleColumns = useMemo(() => {
         const byId = new Map(columns.map((c) => [c.id, c]));
-        return prefs.columnOrder
+        return effectiveOrder
             .map((id) => byId.get(id))
-            .filter((c) => Boolean(c) && prefs.columnVisibility[c.id] !== false);
-    }, [columns, prefs.columnOrder, prefs.columnVisibility]);
+            .filter((c) => Boolean(c) && isColumnVisible(c, prefs.columnVisibility));
+    }, [columns, effectiveOrder, prefs.columnVisibility]);
     const sortedFilteredRows = useMemo(() => {
         let out = rows;
         for (const col of columns) {
@@ -251,7 +352,7 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
         });
     };
     const moveColumn = (columnId, dir) => {
-        const order = [...prefs.columnOrder];
+        const order = [...effectiveOrder];
         const idx = order.indexOf(columnId);
         if (idx < 0)
             return;
@@ -262,7 +363,7 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
         setPrefs({ ...prefs, columnOrder: order });
     };
     const dropColumn = (sourceId, targetId, side) => {
-        const order = reorderColumns(prefs.columnOrder, sourceId, targetId, side);
+        const order = reorderColumns(effectiveOrder, sourceId, targetId, side);
         if (order.join(GROUP_KEY_SEP) !== prefs.columnOrder.join(GROUP_KEY_SEP)) {
             setPrefs({ ...prefs, columnOrder: order });
         }
@@ -316,7 +417,22 @@ export function DataTable({ listId, rows, columns, rowKey, onRowClick, selection
         }
         setPrefs({ ...prefs, filters });
     };
-    const gearButton = (_jsx(ColumnInventoryButton, { columns: columns, prefs: prefs, setColumnVisible: setColumnVisible, moveColumn: moveColumn, reset: reset, groupBy: groupBy, addGroupBy: addGroupBy, removeGroupBy: removeGroupBy, moveGroupBy: moveGroupBy, clearGroupBy: clearGroupBy }));
+    const runExport = (format) => {
+        const exportRows = buildRenderItems(sortedFilteredRows, groupBy, columnsById, 'all')
+            .filter((i) => i.kind === 'row')
+            .map((i) => i.row);
+        const table = buildExportTable(exportRows, visibleColumns);
+        const base = exportFileBase(exportFileName ?? listId);
+        if (format === 'csv')
+            downloadFile(toCsv(table), `${base}.csv`, 'text/csv;charset=utf-8');
+        else
+            downloadFile(toXlsx(table, exportFileName ?? 'Export'), `${base}.xlsx`, XLSX_MIME);
+    };
+    const gearButton = (_jsx(ColumnInventoryButton, { exportInfo: exportable ? {
+            rowCount: sortedFilteredRows.length,
+            hasColumns: visibleColumns.some((c) => c.exportable !== false),
+            run: runExport,
+        } : undefined, columns: columns, prefs: prefs, setColumnVisible: setColumnVisible, moveColumn: moveColumn, reset: reset, groupBy: groupBy, addGroupBy: addGroupBy, removeGroupBy: removeGroupBy, moveGroupBy: moveGroupBy, clearGroupBy: clearGroupBy }));
     return (_jsxs("div", { ref: containerRef, className: "border border-[var(--color-border)] overflow-x-auto", style: { '--dt-cols': gridTemplate }, children: [selection && selection.selected.size > 0 && (_jsxs("div", { className: "flex items-center gap-2 px-3 py-2 text-sm border-b border-[var(--color-border)]", style: { background: 'var(--color-surface-raised)' }, children: [_jsxs("span", { children: [selection.selected.size, " ausgew\u00E4hlt"] }), _jsx("button", { type: "button", className: "text-xs underline text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]", onClick: () => selection.onChange(new Set()), children: "Auswahl l\u00F6schen" }), _jsx("div", { className: "flex-1" }), selection.bulkActions] })), isMobile ? (_jsxs("div", { className: "flex items-center gap-3 px-3 py-2 text-xs font-medium border-b border-[var(--color-border)]", style: { background: 'var(--color-surface-raised)' }, children: [selection && (_jsxs("label", { className: "flex items-center gap-2 py-2 pr-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", className: "w-5 h-5", checked: allSelected, onChange: toggleAll, "aria-label": "Alle ausw\u00E4hlen" }), _jsx("span", { className: "text-[var(--color-text-muted)]", children: "Alle" })] })), _jsx("div", { className: "flex-1" }), gearButton] })) : (_jsxs("div", { className: "grid items-center min-w-min px-3 py-2 text-xs font-medium border-b border-[var(--color-border)]", style: { gridTemplateColumns: 'var(--dt-cols)', background: 'var(--color-surface-raised)' }, children: [selection && (_jsx("input", { type: "checkbox", checked: allSelected, onChange: toggleAll, "aria-label": "Alle ausw\u00E4hlen" })), visibleColumns.map((col) => {
                         const activeSort = prefs.sort?.columnId === col.id ? prefs.sort.direction : null;
                         const filterValue = prefs.filters[col.id];
@@ -510,12 +626,12 @@ function FilterEditor({ column, value, onChange, }) {
     }
     return null;
 }
-function ColumnInventoryButton({ columns, prefs, setColumnVisible, moveColumn, reset, groupBy, addGroupBy, removeGroupBy, moveGroupBy, clearGroupBy, }) {
+function ColumnInventoryButton({ columns, prefs, setColumnVisible, moveColumn, reset, groupBy, addGroupBy, removeGroupBy, moveGroupBy, clearGroupBy, exportInfo, }) {
     const groupableCandidates = columns.filter((c) => !groupBy.includes(c.id));
     const [open, setOpen] = useState(false);
     const orderedColumns = useMemo(() => {
         const byId = new Map(columns.map((c) => [c.id, c]));
-        return prefs.columnOrder.map((id) => byId.get(id)).filter(Boolean);
+        return reconcileOrder(columns, prefs.columnOrder).map((id) => byId.get(id)).filter(Boolean);
     }, [columns, prefs.columnOrder]);
     return (_jsxs(DropdownMenu.Root, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenu.Trigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-2.5 sm:p-1 hover:bg-[var(--color-surface)] text-[var(--color-text-muted)] justify-self-end", title: "Spalten konfigurieren", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(Settings, { className: "w-4 h-4" }) }) }), _jsxs(DropdownMenu.Content, { className: "min-w-[260px] p-2", children: [_jsx("div", { className: "text-xs font-semibold mb-2 text-[var(--color-text-muted)] uppercase", children: "Gruppieren nach" }), groupBy.length === 0 ? (_jsx("div", { className: "text-xs text-[var(--color-text-muted)] italic px-1 mb-2", children: "Keine Gruppierung aktiv." })) : (_jsxs("div", { className: "mb-2 space-y-1", onClick: (e) => e.stopPropagation(), children: [groupBy.map((id, idx) => {
                                 const col = columns.find((c) => c.id === id);
@@ -526,7 +642,7 @@ function ColumnInventoryButton({ columns, prefs, setColumnVisible, moveColumn, r
                                         addGroupBy(v);
                                     e.target.value = '';
                                 }, className: "flex-1 px-1 py-0.5 text-xs border border-[var(--color-border)] bg-[var(--color-surface)]", style: { borderRadius: 'var(--border-radius-md)' }, children: [_jsx("option", { value: "", children: "\u2013 w\u00E4hlen \u2013" }), groupableCandidates.map((c) => (_jsx("option", { value: c.id, children: c.label }, c.id)))] })] })), _jsx("div", { className: "border-t border-[var(--color-border)] mb-2" }), _jsx("div", { className: "text-xs font-semibold mb-2 text-[var(--color-text-muted)] uppercase", children: "Spalten" }), orderedColumns.map((col, idx) => {
-                        const visible = prefs.columnVisibility[col.id] !== false;
+                        const visible = isColumnVisible(col, prefs.columnVisibility);
                         return (_jsxs("div", { className: "flex items-center gap-2 px-1 py-1 text-sm", onClick: (e) => e.stopPropagation(), children: [_jsx("input", { type: "checkbox", checked: visible, onChange: () => setColumnVisible(col.id, !visible), "aria-label": `Spalte ${col.label} ${visible ? 'ausblenden' : 'einblenden'}` }), _jsx("span", { className: "flex-1 text-xs", children: col.label }), _jsx("button", { type: "button", disabled: idx === 0, onClick: () => moveColumn(col.id, -1), className: "p-2 sm:p-0.5 disabled:opacity-30 hover:bg-[var(--color-surface-raised)]", title: "Nach oben", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(ArrowUp, { className: "w-3 h-3" }) }), _jsx("button", { type: "button", disabled: idx === orderedColumns.length - 1, onClick: () => moveColumn(col.id, 1), className: "p-2 sm:p-0.5 disabled:opacity-30 hover:bg-[var(--color-surface-raised)]", title: "Nach unten", style: { borderRadius: 'var(--border-radius-md)' }, children: _jsx(ArrowDown, { className: "w-3 h-3" }) })] }, col.id));
-                    }), _jsx("div", { className: "border-t border-[var(--color-border)] mt-2 pt-2", children: _jsxs(Button, { variant: "ghost", onClick: () => { reset(); setOpen(false); }, children: [_jsx(RotateCcw, { className: "w-4 h-4" }), "Zur\u00FCcksetzen"] }) })] })] }));
+                    }), exportInfo && (_jsxs("div", { className: "border-t border-[var(--color-border)] mt-2 pt-2", children: [_jsx("div", { className: "text-xs font-semibold mb-1 text-[var(--color-text-muted)] uppercase", children: "Exportieren" }), _jsxs("div", { className: "text-xs text-[var(--color-text-muted)] px-1 mb-1", children: ["Aktuelle Ansicht \u00B7 ", exportInfo.rowCount, " ", exportInfo.rowCount === 1 ? 'Zeile' : 'Zeilen'] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsxs(Button, { variant: "ghost", disabled: exportInfo.rowCount === 0 || !exportInfo.hasColumns, onClick: () => { exportInfo.run('xlsx'); setOpen(false); }, children: [_jsx(Download, { className: "w-4 h-4" }), "Excel"] }), _jsxs(Button, { variant: "ghost", disabled: exportInfo.rowCount === 0 || !exportInfo.hasColumns, title: "CSV, Trennzeichen Semikolon", onClick: () => { exportInfo.run('csv'); setOpen(false); }, children: [_jsx(Download, { className: "w-4 h-4" }), "CSV"] })] })] })), _jsx("div", { className: "border-t border-[var(--color-border)] mt-2 pt-2", children: _jsxs(Button, { variant: "ghost", onClick: () => { reset(); setOpen(false); }, children: [_jsx(RotateCcw, { className: "w-4 h-4" }), "Zur\u00FCcksetzen"] }) })] })] }));
 }

package/frontend/ui/index.d.ts

@@ -10,3 +10,4 @@ export { Skeleton, SkeletonRow } from './Skeleton.js';
 export { RecordDialog, type RecordDialogMode } from './RecordDialog.js';
 export { useIsMobile, MOBILE_QUERY } from '../useIsMobile.js';
 export { DataTable, DEFAULT_VIEW_VERSION, type ColumnDef, type FilterDef, type DataTableSelectionProps, } from './DataTable.js';
+export { toCsv, toXlsx, downloadFile, type ExportCell, type ExportTable } from './tableExport.js';

package/frontend/ui/index.js

@@ -10,3 +10,4 @@ export { Skeleton, SkeletonRow } from './Skeleton.js';
 export { RecordDialog } from './RecordDialog.js';
 export { useIsMobile, MOBILE_QUERY } from '../useIsMobile.js';
 export { DataTable, DEFAULT_VIEW_VERSION, } from './DataTable.js';
+export { toCsv, toXlsx, downloadFile } from './tableExport.js';

package/frontend/ui/tableExport.d.ts

@@ -0,0 +1,22 @@
+export type ExportCell = null | string | number | {
+    date: Date;
+    withTime: boolean;
+};
+export interface ExportTable {
+    headers: string[];
+    rows: ExportCell[][];
+}
+export declare const CSV_SEPARATOR = ";";
+export declare function toCsv(table: ExportTable): string;
+export declare function columnLetter(index: number): string;
+export declare function excelSerial(date: Date, withTime: boolean): number;
+export declare function trimChar(s: string, ch: string): string;
+export declare function sanitizeSheetName(name: string): string;
+export declare function toXlsx(table: ExportTable, sheetName?: string): Uint8Array<ArrayBuffer>;
+export declare function crc32(bytes: Uint8Array): number;
+export declare function zipStore(files: Array<{
+    name: string;
+    data: string;
+}>): Uint8Array<ArrayBuffer>;
+export declare const XLSX_MIME = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+export declare function downloadFile(data: BlobPart, fileName: string, mime: string): void;

package/frontend/ui/tableExport.js

@@ -0,0 +1,254 @@
+import { formatDate, formatDateTime } from '../format.js';
+export const CSV_SEPARATOR = ';';
+function neutralizeFormula(text) {
+    return /^[=+\-@\t\r]/.test(text) ? `'${text}` : text;
+}
+function csvField(cell) {
+    let text;
+    if (cell == null)
+        text = '';
+    else if (typeof cell === 'number')
+        text = String(cell).replace('.', ',');
+    else if (typeof cell === 'string')
+        text = neutralizeFormula(cell);
+    else
+        text = cell.withTime ? formatDateTime(cell.date) : formatDate(cell.date);
+    return /[";\r\n]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text;
+}
+export function toCsv(table) {
+    const lines = [table.headers.map(csvField), ...table.rows.map((r) => r.map(csvField))];
+    return '' + lines.map((l) => l.join(CSV_SEPARATOR)).join('\r\n') + '\r\n';
+}
+const XLSX_MAX_CELL_CHARS = 32767;
+function xmlEscape(text) {
+    return text
+        .replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, '')
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+}
+export function columnLetter(index) {
+    let n = index + 1;
+    let s = '';
+    while (n > 0) {
+        const r = (n - 1) % 26;
+        s = String.fromCharCode(65 + r) + s;
+        n = Math.floor((n - 1) / 26);
+    }
+    return s;
+}
+export function excelSerial(date, withTime) {
+    const localMs = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), withTime ? date.getHours() : 0, withTime ? date.getMinutes() : 0, withTime ? date.getSeconds() : 0);
+    return localMs / 86400000 + 25569;
+}
+const STYLE_HEADER = 1;
+const STYLE_DATE = 2;
+const STYLE_DATETIME = 3;
+const STYLES_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<styleSheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main">
+<numFmts count="2"><numFmt numFmtId="164" formatCode="dd.mm.yyyy"/><numFmt numFmtId="165" formatCode="dd.mm.yyyy hh:mm"/></numFmts>
+<fonts count="2"><font><sz val="11"/><name val="Calibri"/><family val="2"/></font><font><b/><sz val="11"/><name val="Calibri"/><family val="2"/></font></fonts>
+<fills count="3"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill><fill><patternFill patternType="solid"><fgColor rgb="FFE7E7E7"/><bgColor indexed="64"/></patternFill></fill></fills>
+<borders count="2"><border><left/><right/><top/><bottom/><diagonal/></border><border><left style="thin"><color rgb="FFBFBFBF"/></left><right style="thin"><color rgb="FFBFBFBF"/></right><top style="thin"><color rgb="FFBFBFBF"/></top><bottom style="medium"><color rgb="FF808080"/></bottom><diagonal/></border></borders>
+<cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs>
+<cellXfs count="4">
+<xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/>
+<xf numFmtId="0" fontId="1" fillId="2" borderId="1" xfId="0" applyFont="1" applyFill="1" applyBorder="1" applyAlignment="1"><alignment vertical="center"/></xf>
+<xf numFmtId="164" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/>
+<xf numFmtId="165" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/>
+</cellXfs>
+<cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles>
+</styleSheet>`;
+const CONTENT_TYPES_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types">
+<Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/>
+<Default Extension="xml" ContentType="application/xml"/>
+<Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/>
+<Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/>
+<Override PartName="/xl/styles.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml"/>
+</Types>`;
+const ROOT_RELS_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
+<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/>
+</Relationships>`;
+const WORKBOOK_RELS_XML = `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships">
+<Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/>
+<Relationship Id="rId2" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles" Target="styles.xml"/>
+</Relationships>`;
+export function trimChar(s, ch) {
+    let start = 0;
+    let end = s.length;
+    while (start < end && s[start] === ch)
+        start++;
+    while (end > start && s[end - 1] === ch)
+        end--;
+    return s.slice(start, end);
+}
+export function sanitizeSheetName(name) {
+    const cleaned = trimChar(name.replace(/[[\]:*?/\\]/g, ' '), "'").trim().slice(0, 31).trim();
+    return cleaned || 'Export';
+}
+function textCell(ref, text, style) {
+    const s = style != null ? ` s="${style}"` : '';
+    return `<c r="${ref}" t="inlineStr"${s}><is><t xml:space="preserve">${xmlEscape(text.slice(0, XLSX_MAX_CELL_CHARS))}</t></is></c>`;
+}
+function dataCell(ref, cell) {
+    if (cell == null)
+        return '';
+    if (typeof cell === 'number')
+        return `<c r="${ref}"><v>${cell}</v></c>`;
+    if (typeof cell === 'string')
+        return cell === '' ? '' : textCell(ref, cell);
+    const serial = excelSerial(cell.date, cell.withTime);
+    if (serial < 61)
+        return textCell(ref, cell.withTime ? formatDateTime(cell.date) : formatDate(cell.date));
+    return `<c r="${ref}" s="${cell.withTime ? STYLE_DATETIME : STYLE_DATE}"><v>${serial}</v></c>`;
+}
+function displayLength(cell) {
+    if (cell == null)
+        return 0;
+    if (typeof cell === 'number')
+        return String(cell).length;
+    if (typeof cell === 'string')
+        return Math.max(...cell.split('\n').map((l) => l.length));
+    return cell.withTime ? 16 : 10;
+}
+function sheetXml(table) {
+    const colCount = Math.max(table.headers.length, 1);
+    const lastCol = columnLetter(colCount - 1);
+    const lastRow = table.rows.length + 1;
+    const widths = table.headers.map((h, ci) => {
+        let max = h.length + 3;
+        for (const r of table.rows)
+            max = Math.max(max, displayLength(r[ci] ?? null));
+        return Math.min(60, Math.max(8, max + 2));
+    });
+    const header = `<row r="1">${table.headers.map((h, ci) => textCell(`${columnLetter(ci)}1`, h, STYLE_HEADER)).join('')}</row>`;
+    const body = table.rows.map((r, ri) => {
+        const rowNo = ri + 2;
+        return `<row r="${rowNo}">${r.map((c, ci) => dataCell(`${columnLetter(ci)}${rowNo}`, c)).join('')}</row>`;
+    }).join('');
+    return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">
+<dimension ref="A1:${lastCol}${lastRow}"/>
+<sheetViews><sheetView workbookViewId="0"><pane ySplit="1" topLeftCell="A2" activePane="bottomLeft" state="frozen"/></sheetView></sheetViews>
+<sheetFormatPr defaultRowHeight="15"/>
+${widths.length > 0 ? `<cols>${widths.map((w, i) => `<col min="${i + 1}" max="${i + 1}" width="${w}" customWidth="1"/>`).join('')}</cols>` : ''}
+<sheetData>${header}${body}</sheetData>
+${table.headers.length > 0 ? `<autoFilter ref="A1:${lastCol}${lastRow}"/>` : ''}
+</worksheet>`;
+}
+function workbookXml(sheetName, table) {
+    const lastCol = columnLetter(Math.max(table.headers.length, 1) - 1);
+    const quoted = `'${sheetName.replace(/'/g, "''")}'`;
+    const filterName = table.headers.length > 0
+        ? `<definedNames><definedName name="_xlnm._FilterDatabase" localSheetId="0" hidden="1">${xmlEscape(quoted)}!$A$1:$${lastCol}$${table.rows.length + 1}</definedName></definedNames>`
+        : '';
+    return `<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
+<workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">
+<sheets><sheet name="${xmlEscape(sheetName)}" sheetId="1" r:id="rId1"/></sheets>
+${filterName}
+</workbook>`;
+}
+export function toXlsx(table, sheetName = 'Export') {
+    const name = sanitizeSheetName(sheetName);
+    return zipStore([
+        { name: '[Content_Types].xml', data: CONTENT_TYPES_XML },
+        { name: '_rels/.rels', data: ROOT_RELS_XML },
+        { name: 'xl/workbook.xml', data: workbookXml(name, table) },
+        { name: 'xl/_rels/workbook.xml.rels', data: WORKBOOK_RELS_XML },
+        { name: 'xl/styles.xml', data: STYLES_XML },
+        { name: 'xl/worksheets/sheet1.xml', data: sheetXml(table) },
+    ]);
+}
+let crcTable = null;
+export function crc32(bytes) {
+    if (!crcTable) {
+        crcTable = new Uint32Array(256);
+        for (let n = 0; n < 256; n++) {
+            let c = n;
+            for (let k = 0; k < 8; k++)
+                c = c & 1 ? 0xEDB88320 ^ (c >>> 1) : c >>> 1;
+            crcTable[n] = c >>> 0;
+        }
+    }
+    let crc = 0xFFFFFFFF;
+    for (let i = 0; i < bytes.length; i++)
+        crc = crcTable[(crc ^ bytes[i]) & 0xFF] ^ (crc >>> 8);
+    return (crc ^ 0xFFFFFFFF) >>> 0;
+}
+export function zipStore(files) {
+    const enc = new TextEncoder();
+    const dosTime = 0;
+    const dosDate = ((2026 - 1980) << 9) | (1 << 5) | 1;
+    const locals = [];
+    const centrals = [];
+    let offset = 0;
+    for (const f of files) {
+        const name = enc.encode(f.name);
+        const data = enc.encode(f.data);
+        const crc = crc32(data);
+        const local = new Uint8Array(30 + name.length + data.length);
+        const lv = new DataView(local.buffer);
+        lv.setUint32(0, 0x04034B50, true);
+        lv.setUint16(4, 20, true);
+        lv.setUint16(6, 0x0800, true);
+        lv.setUint16(8, 0, true);
+        lv.setUint16(10, dosTime, true);
+        lv.setUint16(12, dosDate, true);
+        lv.setUint32(14, crc, true);
+        lv.setUint32(18, data.length, true);
+        lv.setUint32(22, data.length, true);
+        lv.setUint16(26, name.length, true);
+        lv.setUint16(28, 0, true);
+        local.set(name, 30);
+        local.set(data, 30 + name.length);
+        locals.push(local);
+        const central = new Uint8Array(46 + name.length);
+        const cv = new DataView(central.buffer);
+        cv.setUint32(0, 0x02014B50, true);
+        cv.setUint16(4, 20, true);
+        cv.setUint16(6, 20, true);
+        cv.setUint16(8, 0x0800, true);
+        cv.setUint16(10, 0, true);
+        cv.setUint16(12, dosTime, true);
+        cv.setUint16(14, dosDate, true);
+        cv.setUint32(16, crc, true);
+        cv.setUint32(20, data.length, true);
+        cv.setUint32(24, data.length, true);
+        cv.setUint16(28, name.length, true);
+        cv.setUint32(42, offset, true);
+        central.set(name, 46);
+        centrals.push(central);
+        offset += local.length;
+    }
+    const centralSize = centrals.reduce((s, c) => s + c.length, 0);
+    const end = new Uint8Array(22);
+    const ev = new DataView(end.buffer);
+    ev.setUint32(0, 0x06054B50, true);
+    ev.setUint16(8, files.length, true);
+    ev.setUint16(10, files.length, true);
+    ev.setUint32(12, centralSize, true);
+    ev.setUint32(16, offset, true);
+    const out = new Uint8Array(offset + centralSize + end.length);
+    let pos = 0;
+    for (const part of [...locals, ...centrals, end]) {
+        out.set(part, pos);
+        pos += part.length;
+    }
+    return out;
+}
+export const XLSX_MIME = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+export function downloadFile(data, fileName, mime) {
+    const url = URL.createObjectURL(new Blob([data], { type: mime }));
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = fileName;
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    window.setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@efa-one/sdk",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "description": "Offizielles SDK für efa-one-Apps: Auth/Session, Service-Discovery, Gateway-Client, Audit/Reporting/Mail/Notifications, Permission- und Capability-Registrierung sowie das Frontend-IPC-/i18n-Toolkit.",
   "license": "Apache-2.0",
   "type": "commonjs",
@@ -122,7 +122,7 @@
     "eslint-plugin-react-hooks": "^7.1.1",
     "express": "^4.19.2",
     "i18next": "^23.11.0",
-    "i18next-http-backend": "^3.0.5",
+    "i18next-http-backend": "^4.0.2",
     "jsonwebtoken": "^9.0.2",
     "lucide-react": "^0.577.0",
     "pg": "^8.12.0",