Introduction

Il y a quelque temps, un client est venu me voir avec une demande : afficher ses données dans une grille réactive.

Le hic ? Le nombre de colonnes était dynamique, changeant selon l'ensemble de données. De plus, certaines colonnes contenaient des textes très longs qui brisaient toutes les mises en page que j'essayais. Et voici le meilleur — nous ne savions même pas les colonnes exactes à l'avance, seulement leurs types (texte, nombre, email, date, datetime).

J'ai testé quelques bibliothèques de grilles et de tableaux existantes, mais elles étaient soit trop lourdes, soit trop rigides, soit nécessitaient de déclarer toutes les colonnes explicitement. Aucune d'entre elles ne gérait ce mélange de colonnes dynamiques et de texte long avec élégance.

Alors j'ai décidé de construire ma propre solution. C'est ainsi que AutoFitGrid est né.

Le Problème

Les données dynamiques sont imprévisibles. Vous ne pouvez pas coder les mises en page en dur, et vous ne pouvez pas supposer un texte court partout — parfois, vous obtenez des descriptions de plusieurs phrases.

Si vous mettez cela dans un tableau HTML classique :

  • Les colonnes débordent, forçant le défilement horizontal.
  • Les petites valeurs comme les nombres finissent par gaspiller de l'espace.

C'était exactement à quoi ressemblait le cas d'utilisation de mon client.

La Solution : AutoFitGrid

AutoFitGrid construit une grille en regardant deux choses :

  1. Le type déclaré de chaque colonne (texte, nombre, email, date, datetime).
  2. Les valeurs réelles à l'intérieur des cellules (contenu court vs. long).

À partir de cela, il calcule automatiquement les largeurs, applique l'alignement et permet au contenu de s'enrouler afin que la grille reste réactive. Vous n'avez pas besoin de définir les largeurs ou de connaître le nombre de colonnes à l'avance — la bibliothèque s'en charge.

Comment je gère le texte long (la partie délicate)

La partie la plus difficile de ce problème était de trouver comment intégrer du texte long dans une grille lorsque le nombre de colonnes est dynamique et inconnu.

Je l'ai résolu en considérant chaque colonne comme un rectangle. Le défi consiste à trouver le bon rapport largeur-hauteur pour que le texte s'écoule proprement sans briser la mise en page.

Voici la logique :

  1. Comptez les mots dans le texte.
  2. Classifiez le texte comme court, moyen ou long.
  3. Choisissez un rapport cible en fonction de la catégorie (texte court = rectangle plus étroit, texte long = rectangle plus large).
  4. Calculez une largeur et une hauteur appropriées pour que le texte s'enroule proprement à l'intérieur.

De cette façon, les valeurs courtes comme les noms ne gaspillent pas d'espace, tandis que les longues descriptions restent lisibles et contenues.

Initialisation avec HTML/JavaScript

Voici comment vous déclarez une grille en HTML. Remarquez qu'il n'y a pas de largeurs — seulement des types.

HTML

<div class="grid-container">
  <div class="grid-header" data-type="text">Description de la tâche</div>
  <div class="grid-header" data-type="text">Assigné à</div>
  <div class="grid-header" data-type="email">Email</div>
  <div class="grid-header" data-type="datetime">Date de début</div>
  <div class="grid-header" data-type="datetime">Date d'échéance</div>
  <div class="grid-header" data-type="number">Priorité</div>
  <div class="grid-header" data-type="number">Heures estimées</div>

  <div class="grid-item">
    Implémentez une description très longue pour tester comment la mise en page de la grille s'ajuste
    et enveloppe le texte dynamiquement sur plusieurs lignes.
  </div>
  <div class="grid-item">Jane Doe</div>
  <div class="grid-item">jane.doe@example.com</div>
  <div class="grid-item">2024-01-15 08:30:00</div>
  <div class="grid-item">2024-07-15 17:00:00</div>
  <div class="grid-item">1</div>
  <div class="grid-item">100</div>
</div>

JavaScript

Une fois votre balisage prêt, vous donnez à la grille un peu d'intelligence avec un appel d'initialisation.

new AutoFitGrid({
  container: document.querySelector('.grid-container'),
  defaultMinWidth: 50,
  defaultMaxWidth: Infinity,
  adjustmentThreshold: 200,
  headerSelector: '.grid-header',
  columnSelector: '.grid-item',
  showDebug: false
});

Si vous activez showDebug: true, vous verrez des journaux montrant comment AutoFitGrid mesure et ajuste les colonnes.

Utilisation dans React

import React, { useEffect, useRef } from 'react';
import AutoFitGrid from 'auto-fit-grid';

function MyGrid() {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      new AutoFitGrid({
        container: ref.current,
        headerSelector: '.grid-header',
        columnSelector: '.grid-item'
      });
    }
  }, []);

  return (
    <div className="grid-container" ref={ref}>
      <div className="grid-header" data-type="text">Nom</div>
      <div className="grid-header" data-type="email">Email</div>
      <div className="grid-header" data-type="number">Score</div>

      <div className="grid-item">Alice Wonderland</div>
      <div className="grid-item">alice@example.com</div>
      <div className="grid-item">88</div>

      <div className="grid-item">Bob Bobson</div>
      <div className="grid-item">bob@example.com</div>
      <div className="grid-item">95</div>
    </div>
  );
}

Installation et Essai

Vous pouvez installer AutoFitGrid depuis npm :

npm install auto-fit-grid

Ou explorez les exemples en direct et la documentation :