Avalynx-Table in den jsDelivr CDN Top 10.000

AvalynxTable: Leichtgewichtiges, responsives Tabellen-Handling für Bootstrap 5.3+

Mit AvalynxTable hat es meine erste Vanilla‑JavaScript‑Bibliothek in die Top 10.000 der jsDelivr‑CDN‑Bibliotheken geschafft – ein schöner Meilenstein! In diesem Beitrag stelle ich die Idee dahinter vor, zeige die wichtigsten Funktionen und wie du die Bibliothek in wenigen Minuten einsetzen kannst.

Jetzt ausprobieren

• Live‑Demo: https://avalynx-table.jbs-newmedia.de/examples/table.html
• GitHub: https://github.com/avalynx/avalynx-table
• jsDelivr: https://www.jsdelivr.com/package/npm/avalynx-table

Was ist AvalynxTable?

AvalynxTable ist ein kleines, unabhängiges Skript, das aus normalen HTML‑Tabellen „smarte“ Responsive‑Tabellen macht. Sobald ein definierter Breakpoint erreicht ist, werden Spalten und Zeilen so „gestapelt“, dass Inhalte auch auf schmalen Displays gut lesbar bleiben. Dafür nutzt AvalynxTable das Markup und die Utilities von Bootstrap (ab Version 5.3) — zusätzliche Abhängigkeiten gibt es nicht.

Highlights auf einen Blick

• Automatische Anreicherung: Für jede Tabellenzelle werden auf Basis der Kopfzeile (<th>) passende data-*‑Attribute gesetzt. Das erlaubt es, die jeweilige Spaltenüberschrift im kompakten Layout direkt anzuzeigen.
• Flexible Auswahl: Du kannst exakt steuern, welche Tabellen verarbeitet werden (per CSS‑Selektor).
• Eigene Breakpoints: Lege selbst fest, ab welcher Fensterbreite die gestapelte Darstellung greift, damit das Verhalten zu deinem Design passt.
• Zero‑Dependency: Pures Vanilla‑JS. Einbinden und loslegen.
• Barrierearm: Die Kopfzeilen bleiben semantisch erhalten; im „Stacked“-Layout wird die Zuordnung von Zelle zu Kopfzeile weiterhin klar kommuniziert.

Warum überhaupt ein weiteres Table‑Script?

Responsive Tabellen sind knifflig: Entweder sie erzwingen horizontales Scrollen oder sie brechen unschön um. AvalynxTable setzt auf ein etabliertes Muster: Unterhalb eines Breakpoints wird jede Datenzelle mit ihrer Kopfzeile „gelabelt“ und als eigenständiger Block dargestellt. So bleiben sowohl Kontext als auch Lesbarkeit erhalten – gerade auf dem Smartphone.

Fazit

AvalynxTable macht aus klassischen Tabellen robuste, mobile‑freundliche Komponenten – ohne Build‑Schritte, ohne Abhängigkeiten, und im vertrauten Bootstrap‑Look. Dass die Bibliothek es in die jsDelivr Top 10.000 geschafft hat, freut mich riesig und motiviert für weitere Verbesserungen.

Wenn du es ausprobierst, freue ich mich über Feedback, Issues oder Ideen – viel Spaß beim Testen! 😊