Column Resizer JS

Questo strumento genera un PowerColumn resizer portatile pronto all’uso per tabelle HTML. Si rivolge a sviluppatori frontend e team di prodotto che costruiscono griglie dati, dashboard di amministrazione o viste analitiche in cui la larghezza delle colonne deve adattarsi al contenuto e alle preferenze dell’utente. L’output è uno snippet JavaScript autonomo con CSS opzionale, che può essere incollato in qualsiasi progetto senza dipendenze esterne. Gli input includono un selettore CSS per la tabella target e una configurazione di larghezze iniziali e vincoli. Il risultato supporta layout persistente tramite localStorage e funziona in layout RTL e LTR. È adatto a tabelle statiche e set di dati dinamici, con gestione robusta di diverse dimensioni di schermo.

Questo strumento esegue concettualmente tre compiti: (1) leggere e bloccare le larghezze iniziali delle colonne, (2) inserire divisori trascinabili tra le colonne, (3) aggiornare le larghezze durante l’drag mantenendo minime larghezze e integrità della tabella. La logica principale crea maniglie per colonna, monitora le interazioni del mouse, calcola nuove larghezze in px o percentuale e aggiorna stili inline o una colgroup. Evita rallentamenti della pagina mediante debouncing e usa requestAnimationFrame per una trascinazione fluida. Se l’utente modifica i contenuti della colonna programmaticamente, lo snippet può rialineare le larghezze.

Il pubblico include ingegneri frontend che integrano tabelle ridimensionabili, designer UX che valutano layout adattivi e team QA che verificano il comportamento tra browser. Il valore risiede in una soluzione testata plug‑and‑play con opzioni di configurazione chiare, risultati prevedibili e minimo sforzo di integrazione. Differenziatori chiave includono supporto per larghezze minime per colonna, persistenza opzionale, consapevolezza RTL e una modalità di compatibilità per tabelle con colgroup esistenti. Offrire outputs concisi che possono essere adattati a token di stile personalizzati.