Column Resizer JS

Dieses Tool erzeugt ein tragbares, einsatzbereites Spalten-Resizer-Skript für HTML-Tabellen. Es richtet sich an Frontend-Entwickler und Produktteams, die Datenraster, Admin-Dashboards oder Analyseansichten erstellen, in denen Spaltenbreiten sich an Inhalt und Benutzerpräferenzen anpassen müssen. Die Ausgabe ist ein eigenständiges JavaScript-Snippet mit optionalem CSS, das in jedes Projekt ohne externe Abhängigkeiten eingefügt werden kann. Eingaben umfassen einen CSS-Selektor für die Ziel-Tabelle sowie Konfigurationen für Anfangsbreiten und Einschränkungen. Das Ergebnis unterstützt persistentes Layout via localStorage und funktioniert sowohl in RTL- als auch in LTR-Layouts. Es eignet sich für statische Tabellen und dynamische Datensätze gleichermaßen und reagiert robust auf unterschiedliche Viewport-Größen.

Das Tool erfüllt konzeptionell drei Aufgaben: (1) initiale Spaltenbreiten lesen und sichern, (2) verschiebbare Trennlinien zwischen Spalten einfügen, und (3) Breiten während des Ziehens anpassen, wobei Mindestbreiten und Tabellenintegrität gewahrt bleiben. Die Kernlogik erstellt pro-Spalten-Griffe, überwacht Maus-Interaktionen, berechnet neue Breiten in px oder Prozent und aktualisiert Inline-Stile oder eine Colgroup. Sie vermeidet Layout-Überlastungen durch Debouncing von Updates und nutzt requestAnimationFrame für flüssiges Ziehen. Wenn Spalteninhalte programmgesteuert geändert werden, kann das Snippet Breiten erneut synchronisieren.

Zielgruppen umfassen Frontend-Ingenieure, die resizable Tabellen integrieren, UX-Designer, die adaptive Layouts bewerten, und QA-Teams, die Cross-Browser-Verhalten überprüfen. Der Nutzen besteht darin, eine getestete, Plug‑and‑Play-Lösung mit klaren Konfigurationsoptionen, vorhersehbaren Ergebnissen und minimalem Integrationsaufwand bereitzustellen. Zu den Alleinstellungsmerkmalen gehören Unterstützung von Minimalbreiten pro Spalte, optionale Persistenz, RTL‑Bewusstsein und ein Kompatibilitätsmodus für Tabellen mit vorhandenen Colgroup-Definitionen. Zudem bietet es kompakte Ausgaben, die an eigene Styling-Tokens angepasst werden können.

Kernfunktionen umfassen erforderliche Eingaben (Tabellen-Selektor, Anfangsbreiten), Outputs (JS-Snippet und optionales CSS), erweiterte Optionen (Mindestbreiten, Persistenz, RTL) und robuste Fehlerbehandlung bei ungültigen Selektoren oder inkompatiblen Tabellenstrukturen. Anwendungsfälle decken Admin-Tabellen, Datenraster und Berichte ab, die stabile, benutzerdefinierte Spaltenbreiten benötigen.