Introducción

Hace un tiempo, un cliente se acercó a mí con una solicitud: mostrar sus datos en una cuadrícula receptiva.

¿El problema? El número de columnas era dinámico, cambiando dependiendo del conjunto de datos. Además, algunas columnas contenían texto muy largo que rompía todos los diseños que intenté. Y aquí está lo interesante: ni siquiera sabíamos las columnas exactas de antemano, solo sus tipos (texto, número, correo electrónico, fecha, fecha y hora).

Probé algunas bibliotecas de cuadrículas y tablas existentes, pero eran demasiado pesadas, demasiado rígidas o requerían declarar todas las columnas explícitamente. Ninguna de ellas manejaba esta mezcla de columnas dinámicas más texto largo de manera elegante.

Así que decidí construir mi propia solución. Así nació AutoFitGrid.

El Problema

Los datos dinámicos son impredecibles. No puedes codificar los diseños de forma rígida, y no puedes asumir texto corto en todas partes: a veces obtienes descripciones de varias oraciones.

Si lanzas eso en una tabla HTML simple:

  • Las columnas desbordan, forzando el desplazamiento horizontal.
  • Los valores pequeños como los números terminan desperdiciando espacio.

Así es como se veía exactamente el caso de uso de mi cliente.

La Solución: AutoFitGrid

AutoFitGrid construye una cuadrícula observando dos cosas:

  1. El tipo declarado de cada columna (texto, número, correo electrónico, fecha, fecha y hora).
  2. Los valores reales dentro de las celdas (contenido corto vs. largo).

A partir de eso, calcula automáticamente los anchos, aplica la alineación y permite que el contenido se envuelva para que la cuadrícula se mantenga receptiva. No necesitas establecer anchos ni conocer el número de columnas de antemano: la biblioteca se encarga de eso.

Cómo manejo el texto largo (la parte complicada)

La parte más difícil de este problema fue averiguar cómo encajar texto largo en una cuadrícula cuando el número de columnas es dinámico y desconocido.

Lo resolví tratando cada columna como un rectángulo. El desafío es encontrar la proporción de ancho a alto correcta para que el texto fluya ordenadamente sin romper el diseño.

Aquí está la lógica:

  1. Cuenta las palabras en el texto.
  2. Clasifica el texto como corto, medio o largo.
  3. Elige una proporción objetivo dependiendo de la categoría (texto corto = rectángulo más estrecho, texto largo = rectángulo más ancho).
  4. Calcula un ancho y alto apropiados para que el texto se envuelva limpiamente dentro.

De esta manera, los valores cortos como los nombres no desperdician espacio, mientras que las descripciones largas permanecen legibles y contenidas.

Inicializando con HTML/JavaScript

Así es como declaras una cuadrícula en HTML. Nota que no hay anchos, solo tipos.

HTML

<div class="grid-container">
  <div class="grid-header" data-type="text">Descripción de la Tarea</div>
  <div class="grid-header" data-type="text">Asignado A</div>
  <div class="grid-header" data-type="email">Correo Electrónico</div>
  <div class="grid-header" data-type="datetime">Fecha de Inicio</div>
  <div class="grid-header" data-type="datetime">Fecha de Vencimiento</div>
  <div class="grid-header" data-type="number">Prioridad</div>
  <div class="grid-header" data-type="number">Horas Estimadas</div>

  <div class="grid-item">
    Implementa una descripción muy larga para probar cómo el diseño de la cuadrícula se ajusta
    y envuelve el texto dinámicamente a través de múltiples líneas.
  </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 vez que tu marcado esté listo, le das a la cuadrícula algo de inteligencia con una llamada de inicialización.

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

Si activas showDebug: true, verás registros que muestran cómo AutoFitGrid mide y ajusta las columnas.

Usándolo en 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">Nombre</div>
      <div className="grid-header" data-type="email">Correo Electrónico</div>
      <div className="grid-header" data-type="number">Puntuación</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>
  );
}

Instalando y Probándolo

Puedes instalar AutoFitGrid desde npm:

npm install auto-fit-grid

O explora los ejemplos en vivo y la documentación: