Column Resizer JS

Detta verktyg genererar ett bärbart, färdigt kolumnresizer för HTML-tabeller. Det riktar sig till frontend-utvecklare och produktteam som bygger datagrids, admin-dashboards eller analysvyer där kolumnbredder måste anpassas efter innehåll och användarpreferenser. Utdata är ett fristående JavaScript-snitt med valfritt CSS som kan klistras in i vilket projekt som helst utan externa beroenden. Inmatningar inkluderar en CSS-selektor för måltabellen och konfiguration för början bredder och begränsningar. Resultatet stöder bevarad layout via localStorage och fungerar i både RTL- och LTR-layouts. Det passar både statiska tabeller och dynamiska dataset, med robust hantering av olika skärmstorlekar.

Verktyget utför konceptuellt tre uppgifter: (1) läsa och låsa initiala kolumnbredder, (2) infoga dragbara avgränsare mellan kolumner, och (3) uppdatera bredder under drag medan minimibredder och tabellens integritet upprätthålls. Kärnlogiken skapar per-kolumn-händiga, övervakar musinteraktioner, beräknar nya bredder i px eller procent och uppdaterar inline-stilar eller en colgroup. Den undviker layout-bråk genom att debounsa uppdateringar och använda requestAnimationFrame för jämn dragning. Om användaren ändrar kolumninnehåll programatiskt kan snippet synkronisera bredder igen.

Målgrupper inkluderar frontend-ingenjörer som integrerar resizable tabeller, UX-designers som utvärderar adaptiva layouter och QA-team som verifierar cross-browser-beteende. Värdet ligger i en testad, plug‑and‑play-lösning med tydliga konfigurationsalternativ, förutsägbara resultat och minimal integrationsinsats. Unika differentiatorer inkluderar stöd för minimibredder per kolumn, alternativ persistens, RTL-uppmärksamhet och en kompatibilitetsläge för tabeller med befintliga colgroup-definitions. Den erbjuder också koncisa utdata som kan anpassas till egna styling-token.