fix(treetable): Sticky-Header der Kopfzeile reparieren

Die schließende Klammer fehlte im calc() der Scroll-Container-Höhe, wodurch
die Höhe auf auto fiel und der Div nie selbst scrollte — Sticky bezog sich
damit auf keinen funktionierenden Scroll-Container. Zusätzlich das
overflow-y am table-Element entfernt (macht die Tabelle selbst zum
Scroll-Container und bricht Sticky) und w3-theme als eigener Hintergrund
auf die th gelegt, damit beim Scrollen keine Zeilen durchscheinen.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
gg committed 2026-09-24 19:02:40 +02:00
1 parent c96ed6e97d
commit 3ba9b0a07f
1 file changed
+13 -3
+13 -3
View File
@@ -107,8 +107,14 @@ export const Treetable: m.ClosureComponent<iTreetable> = (vnode) => {
: null, : null,
m("div", {style: {height: '100%'}}, m("div", {style: {height: '100%'}},
// Ohne Topbar nutzt der scrollbare Bereich die volle Höhe. // Ohne Topbar nutzt der scrollbare Bereich die volle Höhe.
m("div", {style: {height: hatTopbar ? 'calc(100% - 32px' : '100%', overflow: 'auto', width: '100%'}}, // Wichtig für den Sticky-Header: Dieser div muss selbst der
m("table.w3-table", {style: {'overflow-y': 'auto'}}, // Scroll-Container sein (feste Höhe + overflow), damit sich
// position:sticky der th-Zellen auf ihn bezieht.
m("div", {style: {height: hatTopbar ? 'calc(100% - 32px)' : '100%', overflow: 'auto', width: '100%'}},
// overflow darf hier NICHT auf dem table-Element gesetzt
// werden — sonst wird die Tabelle selbst zum Scroll-Container
// und der Sticky-Header bricht.
m("table.w3-table",
// Optionale Spaltenüberschriften: Ein Titel je // Optionale Spaltenüberschriften: Ein Titel je
// columnmapper-Spalte, 1:1 von links nach rechts // columnmapper-Spalte, 1:1 von links nach rechts
// (die Einrückung teilt sich das td mit der // (die Einrückung teilt sich das td mit der
@@ -118,7 +124,11 @@ export const Treetable: m.ClosureComponent<iTreetable> = (vnode) => {
? m("thead", ? m("thead",
m("tr.w3-theme", m("tr.w3-theme",
vnode.attrs.header.map((titel: string) => vnode.attrs.header.map((titel: string) =>
m("th", { m("th.w3-theme", {
// Sticky-Header: Eigener Hintergrund
// nötig, da der tr-Hintergrund beim
// Scrollen mit den Daten wegwandert
// und sonst Zeilen durchscheinen.
style: { style: {
position: 'sticky', position: 'sticky',
top: '0', top: '0',