Column Resizer JS

Cet outil génère un script de redimensionnement de colonnes prêt à l’emploi pour les tableaux HTML. Il s’adresse aux développeurs frontend et aux équipes produit qui construisent des grilles de données, des tableaux de bord administratifs ou des vues analytiques où les largeurs de colonnes doivent s’adapter au contenu et aux préférences de l’utilisateur. La sortie est un extrait JavaScript autonome avec éventuel CSS, pouvant être collé dans n’importe quel projet sans dépendances externes. Les entrées incluent un sélecteur CSS pour le tableau cible et une configuration des largeurs initiales et des contraintes. Le résultat prend en charge un layout persistant via localStorage et s’adapte aux mises en page RTL et LTR. Il convient aussi bien aux tableaux statiques qu’aux ensembles de données dynamiques, avec une gestion robuste des tailles de fenêtre.

Ce tool réalise conceptuellement trois tâches: (1) lire et bloquer les largeurs initiales des colonnes, (2) injecter des séparateurs déplaçables entre les colonnes, et (3) mettre à jour les largeurs lors du déplacement tout en imposant des largeurs minimales et l’intégrité du tableau. La logique centrale crée des poignées par colonne, surveille les interactions souris, calcule les nouvelles largeurs en px ou en pourcentages et met à jour les styles en ligne ou un colgroup. Elle évite les revirements de mise en page en décalant les mises à jour et utilise requestAnimationFrame pour un déplacement fluide. Si le contenu des colonnes est modifié par programme, l’extrait peut resynchroniser les largeurs.

Le public cible comprend les ingénieurs frontend qui intègrent des tables redimensionnables, les concepteurs UX évaluant des mises en page adaptatives et les équipes QA vérifiant la compatibilité inter-navigateurs. La valeur réside dans une solution prête à l’emploi, avec des options de configuration claires, des résultats prévisibles et un faible coût d’intégration. Les différenciateurs incluent le support de largeurs minimales par colonne, la persistance optionnelle, la prise en charge RTL et un mode de compatibilité pour les tables avec des colgroup existants. Il propose aussi des sorties concises pouvant être adaptées à des tokens de style personnalisés.

Les fonctionnalités clés couvrent les entrées obligatoires (sélecteur de table, largeurs initiales), les sorties (extrait JS et CSS optionnel), les options avancées (largeurs minimales, persistance, RTL) et une gestion robuste des erreurs pour des sélecteurs invalides ou des structures de tableaux incompatibles. Les cas d’utilisation incluent les tables d’admin, les grilles de données et les rapports nécessitant des largeurs de colonnes stables et ajustables par l’utilisateur.