Column Resizer JS

Esta herramienta genera un redimensionador de columnas portátil y listo para usar para tablas HTML. Está dirigido a desarrolladores frontend y equipos de producto que crean grids de datos, dashboards de administración o vistas analíticas donde las anchuras de columna deben adaptarse al contenido y a las preferencias del usuario. La salida es un fragmento JavaScript autónomo con CSS opcional que se puede pegar en cualquier proyecto sin dependencias externas. Las entradas incluyen un selector CSS para la tabla objetivo y una configuración para anchuras iniciales y restricciones. El resultado admite diseño persistente a través de localStorage y funciona en diseños RTL y LTR. Es adecuado para tablas estáticas y conjuntos de datos dinámicos, con manejo sólido de tamaños de ventana variables.

Este instrumento realiza conceptualmente tres tareas: (1) leer y bloquear anchuras iniciales de columnas, (2) insertar divisores arrastrables entre columnas, y (3) actualizar anchuras durante el arrastre manteniendo anchuras mínimas e integridad de la tabla. La lógica central crea controles por columna, supervisa interacciones del ratón, calcula nuevas anchuras en px o porcentaje y actualiza estilos en línea o un colgroup. Evita bloquear el rendimiento mediante la reducción de actualizaciones y utiliza requestAnimationFrame para un arrastre suave. Si un usuario cambia el contenido de la columna programáticamente, el fragmento puede volver a sincronizar anchuras.

El público incluye ingenieros frontend que integran tablas redimensionables, diseñadores UX que evalúan diseños adaptativos y equipos QA que verifican el comportamiento entre navegadores. Su valor reside en una solución probada, plug‑and‑play con opciones de configuración claras, resultados previsibles y esfuerzo mínimo de integración. Diferenciadores clave: soporte de anchuras mínimas por columna, persistencia opcional, conciencia RTL y un modo de compatibilidad para tablas con definiciones de colgroup existentes. También ofrece salidas concisas que puedes adaptar a tokens de estilo personalizados.