Einführung

Vor einiger Zeit kam ein Kunde auf mich zu mit der Bitte: Zeige ihre Daten in einem responsiven Grid an.

Der Haken? Die Anzahl der Spalten war dynamisch und änderte sich je nach Datensatz. Außerdem enthielten einige Spalten sehr langen Text, der jedes Layout, das ich ausprobierte, sprengte. Und das Beste daran — wir wussten nicht einmal im Voraus, welche Spalten genau vorhanden sein würden, nur ihre Typen (Text, Zahl, E-Mail, Datum, Datum/Uhrzeit).

Ich habe ein paar bestehende Grid- und Tabellenbibliotheken getestet, aber sie waren entweder zu schwerfällig, zu starr oder erforderten die explizite Deklaration aller Spalten. Keine von ihnen konnte diese Mischung aus dynamischen Spalten und langem Text elegant handhaben.

Also beschloss ich, meine eigene Lösung zu entwickeln. So wurde AutoFitGrid geboren.

Das Problem

Dynamische Daten sind unberechenbar. Du kannst Layouts nicht fest codieren, und du kannst nicht überall von kurzem Text ausgehen — manchmal erhältst du mehrteilige Beschreibungen.

Wenn du das in eine einfache HTML-Tabelle wirfst:

  • Spalten überlaufen und zwingen zu horizontalem Scrollen.
  • Kleine Werte wie Zahlen verschwenden Platz.

So sah genau der Anwendungsfall meines Kunden aus.

Die Lösung: AutoFitGrid

AutoFitGrid erstellt ein Grid, indem es zwei Dinge betrachtet:

  1. Den deklarierten Typ jeder Spalte (Text, Zahl, E-Mail, Datum, Datum/Uhrzeit).
  2. Die tatsächlichen Werte in den Zellen (kurzer vs. langer Inhalt).

Daraus berechnet es automatisch die Breiten, wendet die Ausrichtung an und lässt den Inhalt umschließen, damit das Grid responsiv bleibt. Du musst keine Breiten festlegen oder die Anzahl der Spalten im Voraus kennen — die Bibliothek kümmert sich darum.

Wie ich mit langem Text umgehe (der knifflige Teil)

Der schwierigste Teil dieses Problems war herauszufinden, wie man langen Text in ein Grid einfügt, wenn die Anzahl der Spalten dynamisch und unbekannt ist.

Ich habe es gelöst, indem ich jede Spalte als Rechteck behandelt habe. Die Herausforderung besteht darin, das richtige Breiten-Höhen-Verhältnis zu finden, damit der Text ordentlich fließt, ohne das Layout zu sprengen.

Hier ist die Logik:

  1. Zähle die Wörter im Text.
  2. Klassifiziere den Text als kurz, mittel oder lang.
  3. Wähle ein Zielverhältnis je nach Kategorie (kurzer Text = schmaleres Rechteck, langer Text = breiteres Rechteck).
  4. Berechne eine geeignete Breite und Höhe, damit der Text sauber umschließt.

Auf diese Weise verschwenden kurze Werte wie Namen keinen Platz, während lange Beschreibungen lesbar und enthalten bleiben.

Initialisierung mit HTML/JavaScript

So deklarierst du ein Grid in HTML. Beachte, dass es keine Breiten gibt — nur Typen.

HTML

<div class="grid-container">
  <div class="grid-header" data-type="text">Aufgabenbeschreibung</div>
  <div class="grid-header" data-type="text">Zugewiesen an</div>
  <div class="grid-header" data-type="email">E-Mail</div>
  <div class="grid-header" data-type="datetime">Startdatum</div>
  <div class="grid-header" data-type="datetime">Fälligkeitsdatum</div>
  <div class="grid-header" data-type="number">Priorität</div>
  <div class="grid-header" data-type="number">Geschätzte Stunden</div>

  <div class="grid-item">
    Implementiere eine sehr lange Beschreibung, um zu testen, wie sich das Grid-Layout dynamisch anpasst
    und Text über mehrere Zeilen umschließt.
  </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

Sobald dein Markup bereit ist, gibst du dem Grid mit einem Initialisierungsaufruf etwas Intelligenz.

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

Wenn du showDebug: true aktivierst, siehst du Protokolle, die zeigen, wie AutoFitGrid Spalten misst und anpasst.

Verwendung 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">Name</div>
      <div className="grid-header" data-type="email">E-Mail</div>
      <div className="grid-header" data-type="number">Punktzahl</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 und Ausprobieren

Du kannst AutoFitGrid über npm installieren:

npm install auto-fit-grid

Oder erkunde die Live-Beispiele und Dokumentationen: