Introduzione

Un po' di tempo fa, un cliente mi ha contattato con una richiesta: mostrare i loro dati in una griglia reattiva.

Il problema? Il numero di colonne era dinamico, cambiando a seconda del dataset. Inoltre, alcune colonne contenevano testo molto lungo che rompeva ogni layout che provavo. Ecco il colpo di scena: non sapevamo nemmeno le colonne esatte in anticipo, solo i loro tipi (testo, numero, email, data, data e ora).

Ho testato alcune librerie di griglie e tabelle esistenti, ma erano o troppo pesanti, o troppo rigide, o richiedevano di dichiarare esplicitamente tutte le colonne. Nessuna di esse gestiva questo mix di colonne dinamiche e testo lungo in modo elegante.

Così ho deciso di costruire la mia soluzione. È così che è nato AutoFitGrid.

Il Problema

I dati dinamici sono imprevedibili. Non puoi codificare i layout, e non puoi assumere testo corto ovunque — a volte ottieni descrizioni di più frasi.

Se metti tutto in una semplice tabella HTML:

  • Le colonne traboccano, costringendo a uno scroll orizzontale.
  • Valori piccoli come i numeri finiscono per sprecare spazio.

Questo era esattamente come si presentava il caso d'uso del mio cliente.

La Soluzione: AutoFitGrid

AutoFitGrid costruisce una griglia osservando due cose:

  1. Il tipo dichiarato di ogni colonna (testo, numero, email, data, data e ora).
  2. I valori effettivi all'interno delle celle (contenuto corto vs. lungo).

Da ciò, calcola automaticamente le larghezze, applica l'allineamento e consente al contenuto di avvolgersi in modo che la griglia rimanga reattiva. Non è necessario impostare larghezze o conoscere in anticipo il numero di colonne — la libreria se ne occupa.

Come Gestisco il Testo Lungo (la parte difficile)

La parte più difficile di questo problema era capire come adattare testo lungo in una griglia quando il numero di colonne è dinamico e sconosciuto.

L'ho risolto trattando ogni colonna come un rettangolo. La sfida è trovare il giusto rapporto larghezza-altezza affinché il testo fluisca ordinatamente senza rompere il layout.

Ecco la logica:

  1. Conta le parole nel testo.
  2. Classifica il testo come corto, medio o lungo.
  3. Scegli un rapporto target a seconda della categoria (testo corto = rettangolo più stretto, testo lungo = rettangolo più largo).
  4. Calcola una larghezza e altezza appropriate affinché il testo si avvolga ordinatamente all'interno.

In questo modo, valori brevi come i nomi non sprecano spazio, mentre lunghe descrizioni rimangono leggibili e contenute.

Inizializzazione con HTML/JavaScript

Ecco come dichiarare una griglia in HTML. Nota che non ci sono larghezze — solo tipi.

HTML

<div class="grid-container">
  <div class="grid-header" data-type="text">Descrizione del Compito</div>
  <div class="grid-header" data-type="text">Assegnato A</div>
  <div class="grid-header" data-type="email">Email</div>
  <div class="grid-header" data-type="datetime">Data di Inizio</div>
  <div class="grid-header" data-type="datetime">Data di Scadenza</div>
  <div class="grid-header" data-type="number">Priorità</div>
  <div class="grid-header" data-type="number">Ore Stimate</div>

  <div class="grid-item">
    Implementa una descrizione molto lunga per testare come il layout della griglia si adatta
    e avvolge il testo dinamicamente su più righe.
  </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

Una volta che il tuo markup è pronto, dai un po' di intelligenza alla griglia con una chiamata di inizializzazione.

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

Se attivi showDebug: true, vedrai log che mostrano come AutoFitGrid misura e adatta le colonne.

Usarlo in 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">Nome</div>
      <div className="grid-header" data-type="email">Email</div>
      <div className="grid-header" data-type="number">Punteggio</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>
  );
}

Installazione e Prova

Puoi installare AutoFitGrid da npm:

npm install auto-fit-grid

Oppure esplora gli esempi dal vivo e la documentazione: