From 4e2dd3e3eb75736b9527a53b56c7d4d8a46e7de3 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Sun, 16 Aug 2026 22:31:40 +0200 Subject: [PATCH] DataTable: neue Spalten ruecken in die gespeicherte Reihenfolge nach Die Gruppen-Spalte fehlte im Spalten-Menue - aus zwei Gruenden, und der zweite ist der ernstere. 1) order wurde EINMAL beim Mounten berechnet: gespeicherte Reihenfolge plus alles, was zu dem Zeitpunkt in columns stand. Aendert eine Seite ihre Spalten danach - die Artikelliste zeigt "Verwaltung" nur bei Gegenstaenden -, fehlt die neue Spalte in order und faellt damit aus allOrdered heraus. Sie ist dann nicht bloss aus dem Menue verschwunden, sondern aus der TABELLE. Ein useEffect zieht fehlende Schluessel jetzt nach; angehaengt, nicht einsortiert, damit eine selbst gewaehlte Reihenfolge nicht umspringt. 2) Die Liste im Menue war fest auf 240px begrenzt. Bei zehn Spalten stand der letzte Eintrag ausserhalb, und weil macOS die Bildlaufleiste ausblendet, sah es aus, als gaebe es ihn nicht. Die Hoehe richtet sich jetzt nach dem freien Platz bis zum unteren Bildrand. Co-Authored-By: Claude Opus 5 --- web/src/components/DataTable.jsx | 27 +++++++++++++++++++++++++-- web/src/styles.css | 4 +++- 2 files changed, 28 insertions(+), 3 deletions(-) diff --git a/web/src/components/DataTable.jsx b/web/src/components/DataTable.jsx index c5108e9..7d84b52 100644 --- a/web/src/components/DataTable.jsx +++ b/web/src/components/DataTable.jsx @@ -40,6 +40,22 @@ export default function DataTable({ const rest = columns.map((c) => c.key).filter((k) => !saved.includes(k)); return [...saved, ...rest]; }); + // `order` ist eine Momentaufnahme vom Mounten. Seiten duerfen ihre Spalten + // aber danach aendern (die Artikelliste zeigt „Verwaltung" nur bei + // Gegenstaenden), und eine neu hinzugefuegte Spalte steht ohnehin nie in der + // gespeicherten Reihenfolge. Fehlt sie dort, faellt sie aus allOrdered heraus + // und ist WEG – nicht nur aus dem Spalten-Menue, sondern aus der Tabelle. + // Deshalb hier nachziehen. Angehaengt, nicht einsortiert: eine selbst + // gewaehlte Reihenfolge soll nicht umspringen. + const schluessel = columns.map((c) => c.key).join("|"); + useEffect(() => { + setOrder((alt) => { + const fehlend = columns.map((c) => c.key).filter((k) => !alt.includes(k)); + return fehlend.length ? [...alt, ...fehlend] : alt; + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [schluessel]); + const [widths, setWidths] = useState(() => loadPersisted(id).widths || {}); // Filter + Sortierung bleiben erhalten (localStorage je Tabelle), bis man // „Filter löschen" drückt oder anders sortiert – auch nach Navigieren/Neuladen. @@ -98,7 +114,14 @@ export default function DataTable({ useLayoutEffect(() => { if (chooserOpen && chooserBtn.current) { const r = chooserBtn.current.getBoundingClientRect(); - setChooserPos({ left: Math.min(r.left, window.innerWidth - 240), top: r.bottom + 4 }); + // Hoehe an den freien Platz koppeln. Eine feste Obergrenze schnitt die + // letzten Eintraege ab, ohne dass man es sah – auf macOS blendet das + // System die Bildlaufleiste aus, und dann fehlt die Spalte scheinbar. + setChooserPos({ + left: Math.min(r.left, window.innerWidth - 240), + top: r.bottom + 4, + maxHeight: Math.max(180, window.innerHeight - r.bottom - 24), + }); } }, [chooserOpen]); useEffect(() => { @@ -316,7 +339,7 @@ export default function DataTable({ {chooserOpen && chooserPos && createPortal(
-
+
{allOrdered.map((c) => (