Column Resizer JS

Esta ferramenta gera um resize de coluna portátil, pronto para uso, para tabelas HTML. Destina-se a desenvolvedores frontend e equipes de produto que constroem grids de dados, dashboards administrativos ou visualizações analíticas onde as larguras das colunas devem se adaptar ao conteúdo e às preferências do usuário. A saída é um snippet JavaScript autônomo com CSS opcional que pode ser colado em qualquer projeto sem dependências externas. As entradas incluem um seletor CSS para a tabela alvo e configuração de larguras iniciais e restrições. O resultado suporta layout persistente via localStorage e funciona em layouts RTL e LTR. É adequado para tabelas estáticas e conjuntos de dados dinâmicos, com gestão robusta de diferentes larguras de tela.

Este ferramenta executa conceitualmente três tarefas: (1) ler e bloquear larguras iniciais das colunas, (2) inserir divisores arrastáveis entre colunas, (3) atualizar larguras durante o arrasto mantendo larguras mínimas e integridade da tabela. A lógica central cria alças por coluna, monitora interações do mouse, calcula novas larguras em px ou porcentagem e atualiza estilos inline ou um colgroup. Evita travamentos de layout debouncing de atualizações e usa requestAnimationFrame para arrastar suave. Se o conteúdo da coluna for alterado programaticamente, o snippet pode re-sincronizar larguras.

Público-alvo inclui engenheiros frontend que integram tabelas redimensionáveis, designers UX que avaliam layouts adaptativos e equipes QA que verificam comportamento entre navegadores. O valor está em uma solução testada plug‑and‑play com opções de configuração claras, resultados previsíveis e menor esforço de integração. Diferenciadores-chave incluem suporte para larguras mínimas por coluna, persistência opcional, consciência RTL e modo de compatibilidade para tabelas com definicões de colgroup existentes. Ele também oferece saídas concisas que podem ser adaptadas a tokens de estilo personalizados.