diff --git a/web/src/components/DataTable.jsx b/web/src/components/DataTable.jsx index 61824e9..475da13 100644 --- a/web/src/components/DataTable.jsx +++ b/web/src/components/DataTable.jsx @@ -39,8 +39,22 @@ export default function DataTable({ return [...saved, ...rest]; }); const [widths, setWidths] = useState(() => loadPersisted(id).widths || {}); - const [filters, setFilters] = useState({}); // { key: { text, values:Set|null } } - const [sort, setSort] = useState(null); // { key, dir } + // Filter + Sortierung bleiben erhalten (localStorage je Tabelle), bis man + // „Filter löschen" drückt oder anders sortiert – auch nach Navigieren/Neuladen. + // Beim Speichern werden Sets zu Arrays; beim Laden zurück zu Sets. + const [filters, setFilters] = useState(() => { + const saved = loadPersisted(id).filters || {}; + const out = {}; + for (const [k, v] of Object.entries(saved)) { + if (!colByKey[k] || !v) continue; + out[k] = { text: v.text || "", values: Array.isArray(v.values) ? new Set(v.values) : null }; + } + return out; + }); // { key: { text, values:Set|null } } + const [sort, setSort] = useState(() => { + const s = loadPersisted(id).sort; + return s && s.key && colByKey[s.key] ? s : null; + }); // { key, dir } const [filterShown, setFilterShown] = useState(true); const [openFilter, setOpenFilter] = useState(null); const [collapsed, setCollapsed] = useState(() => new Set()); @@ -50,8 +64,15 @@ export default function DataTable({ const [chooserOpen, setChooserOpen] = useState(false); useEffect(() => { - savePersisted(id, { order, widths, hidden: [...hidden] }); - }, [id, order, widths, hidden]); + // Nur echte Einschränkungen sichern (leerer Text + values=null = kein Filter); + // Sets werden zu Arrays serialisiert. + const filtersSer = {}; + for (const [k, v] of Object.entries(filters)) { + if (!v || (!v.text && v.values == null)) continue; + filtersSer[k] = { text: v.text || "", values: v.values ? [...v.values] : null }; + } + savePersisted(id, { order, widths, hidden: [...hidden], filters: filtersSer, sort }); + }, [id, order, widths, hidden, filters, sort]); // Containerbreite messen, damit die grow-Spalte den Rest füllt. const wrapRef = useRef(null); @@ -260,10 +281,11 @@ export default function DataTable({ } function resetColumns() { + // Nur Spalten (Reihenfolge/Breiten/Sichtbarkeit) zurücksetzen – Filter und + // Sortierung bleiben; der Speicher-Effekt schreibt den neuen Stand. setOrder(columns.map((c) => c.key)); setWidths({}); setHidden(new Set()); - savePersisted(id, {}); } return (