Column Resizer JS

Dette værktøj genererer et bærbart, klar-til-brug kolonne-justeringsscript til HTML-tabeller. Det henvender sig til frontend-udviklere og produktteams, der bygger datapaneler, admin-dashboard eller analysevisninger, hvor kolonnebredder skal tilpasses indhold og brugerpræferencer. Outputtet er et selvstændigt JavaScript-snippet med valgfrit CSS, der kan indsættes i ethvert projekt uden eksterne afhængigheder. Inddata inkluderer en CSS-selektor for mål-tabellen og konfiguration for startbredder og begrænsninger. Resultatet understøtter vedvarende layout via localStorage og fungerer i både RTL- og LTR-layouts. Det egner sig til statiske tabeller og dynamiske datasæt og håndterer forskellig skærmstørrelser robust.

Dette værktøj udfører konceptuelt tre opgaver: (1) læse og låse indledende kolonnebredder, (2) indsætte trækbare adskillelseslinjer mellem kolonner, og (3) opdatere bredder under træk, samtidig med at minimumsbredder og tabelintegritet opretholdes. Kernelogikken opretter per-kolonne greb, overvåger museinteraktioner, beregner nye bredder i px eller procent og opdaterer inline-stile eller en colgroup. Den undgår layout-overbelastning ved at debounce opdateringer og bruger requestAnimationFrame til jævn trækning. Hvis kolonneindhold ændres programmativt, kan snippen synkronisere bredder igen.

Målgruppe inkluderer frontend-ingeniører der integrerer resizable tabeller, UX-designere der vurderer adaptive layouts og QA-teams der verificerer cross-browser-opførsel. Værdien ligger i en testet, plug‑and‑play-løsning med klare konfigurationsmuligheder, forudsigelige resultater og lav integrationsindsats. Unikke differentierer inkluderer understøttelse af minimale kolonnebredder, valgfri persistens, RTL-bevidsthed og en kompabilitetstilstand for tabeller med eksisterende colgroup-definitions. Den tilbyder også koncise outputs, der kan tilpasses til egne styling-tokens.