@efa-one/sdk 1.20.0 → 1.21.0

package/README.md

@@ -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,13 @@ 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.
+
 ## License
 
 [Apache-2.0](./LICENSE) — permissive with a patent grant, so customers and partners

package/frontend/ui/DataTable.d.ts

@@ -56,9 +56,12 @@ interface DataTableProps<T, K extends string | number> {
     selection?: DataTableSelectionProps<K>;
     initialPrefs?: Partial<ViewPrefs>;
     footer?: React.ReactNode;
+    groupsDefaultExpanded?: boolean;
     persistence?: ViewPreferencesAdapter;
 }
 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 const MIN_COLUMN_WIDTH = 60;
 export declare const MAX_COLUMN_WIDTH = 1600;
@@ -76,5 +79,6 @@ interface RenderItem<T> {
     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 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, }: DataTableProps<T, K>): React.ReactElement;
 export {};

package/frontend/ui/DataTable.js

@@ -1,5 +1,5 @@
 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 { Button } from './Button.js';
@@ -23,6 +23,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);
 }
@@ -76,6 +91,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 +119,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);
@@ -134,7 +154,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, }) {
     const defaultPrefs = useMemo(() => defaultPrefsFor(columns, initialPrefs), [columns, initialPrefs]);
     const [prefs, setPrefs, reset] = useViewPreferences(listId, defaultPrefs, persistence);
     const isMobile = useIsMobile();
@@ -155,12 +199,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 +310,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 +321,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 });
         }
@@ -515,7 +574,7 @@ function ColumnInventoryButton({ columns, prefs, setColumnVisible, moveColumn, r
     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 +585,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"] }) })] })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@efa-one/sdk",
-  "version": "1.20.0",
+  "version": "1.21.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",