Entwerfen besserer Tabellen: Verwenden von Popovers für zusätzliche Daten

Beim Arbeiten mit großen Datentabellen kann die Anzeige aller verfügbaren Informationen auf einmal die Tabelle oft überfordern und schwer lesbar machen. Daher ist es üblich, sekundäre Informationen auszublenden und ein Designmuster zu verwenden, um nur bei Bedarf weitere Details preiszugeben.

Das Design von Datentabellen ist für eine gute Benutzererfahrung (UX) von zentraler Bedeutung, insbesondere beim Umgang mit großen oder komplexen Daten. Laut Artikeln wie Warum ist Tischdesign UX wichtig? und Entwerfen besserer Datentabellen gibt es einen Konsens über drei Hauptmethoden zur Verwaltung dieser verborgenen Details:

• Erweiterbare Zeilen – Erweitert Tabellenzeilen inline, um zusätzliche Details anzuzeigen.
• Modale Ansichten – Öffnet einen modalen Dialog mit detaillierteren Informationen.
• Schnellansicht (Seitenleiste) – Zeigt zusätzliche Details in einer Seitenleiste an, die vom Rand aus eingeschoben werden kann.

In diesem Artikel zeige ich Ihnen, wie Sie diese drei Optionen flexibel einrichten, sodass Sie zwischen ihnen wechseln können, ohne das Markup der Tabelle neu schreiben zu müssen.

Hierfür verwenden wir Popovers, die sich ideal zum einfachen Anhängen von Informationen direkt an bestimmte Zeilen eignen.

---

Einrichten der Basistabelle

Zunächst verwenden wir das gleiche Markup und die gleichen Stile wie in „Ein Leitfaden zum Gestalten von Tabellen“:

In der letzten Zelle haben wir nach dem Textinhalt eine einfache Schaltfläche hinzugefügt (das Symbol stammt von Tabler), die ein Popover auslöst:

<button type="button" popovertarget="p1"></button>

Als nächstes fügen das Popover irgendwo im Dokument hinzu, um den zusätzlichen Inhalt anzuzeigen, wenn es ausgelöst wird:

<div id="p1" popover>
  ... content ...   
</div>

Styling des Popovers

Für das Popover-Styling verwenden wir die Vorlage aus „Steal this popover code“ von Adam Argyle. Diese Vorlage enthält sanfte Übergänge für das Erscheinen und Verschwinden des Popovers:

.selector {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      inset .5s,
      scale .5s,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: #0002;
  }

  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

Modale Ansicht

Für das modale Layout fügen wir eine Modifikatorklasse --modal hinzu, um die Größe des Modals zu definieren und es auf dem Bildschirm zu zentrieren:

&.--modal {
  block-size: calc(100dvh - 2em);
  inline-size: calc(100dvw - 2em);
  inset-block-start: 1em;
  inset-inline: 1em;
  transform-origin: 50% 50%;

  @starting-style {
    &:popover-open{
      scale: 0;
    }
  }
}

---

Schnellansicht (Seitenleiste)

Um eine Schnellansicht-Seitenleiste zu erstellen, fügen wir dem Popover eine neue Modifikatorklasse, --inline-start, hinzu. Diese Seitenleiste wird von der Seite des Ansichtsfensters eingeschoben und kann mit einer sanften Animation geschlossen werden. Hier ist das Setup:

&.--inline-start {
  --width: clamp(220px, 33vw, 350px);
  block-size: calc(100dvh - 2em);
  inline-size: var(--width);
  inset-block-start: 1em;
  inset-inline: 1em;

  @starting-style {
    &:popover-open {
      inset-inline: calc(0px - var(--width));
    }
  }
  &[popover]:not(:popover-open) { 
    inset-inline: calc(0px - var(--ui-width));
  }
}

Bei diesem Setup gleitet das Popover von links ein. Die Zeile &[popover]:not(:popover-open) sorgt dafür, dass es beim Schließen wieder herausgleitet.

Wir können ähnliche Anpassungen anwenden, um Slide-In-Effekte von rechts oder von oben und unten zu erzeugen:

Inline-Ende (--inline-end)

Blockende (--block-end)

---

Erweiterbare Zeilen

Und schließlich schauen wir uns die erweiterbaren Zeilen an. Im Gegensatz zu Modal- und Seitenleisten integrieren sich erweiterbare Zeilen direkt in das Tabellenlayout. Traditionell beinhaltet dieser Ansatz eine versteckte mit einem über alle Spalten und eine JavaScript-Funktion zum Umschalten der Sichtbarkeit.

Aber können wir das vorhandene Popover wiederverwenden, um Zeilen inline zu erweitern? Nicht direkt – aber wir können es vortäuschen, indem wir das Popover so positionieren, dass es direkt unter der Zeile erscheint und so einen ähnlichen Effekt erzeugt.

---

Zuerst hängen wir das Popover unten links an die Tabellenzeile an, indem wir den Ankernamen auf das Feld setzen. und Anwenden des folgenden CSS:

<button type="button" popovertarget="p1"></button>

Als nächstes benötigen wir zwei Funktionen, die derzeit leider nur für Chrome verfügbar sind:

<div id="p1" popover>
  ... content ...   
</div>

Mit der Eigenschaft „interpolate-size“ kann das Popover sanft auf seine endgültige Höhe animiert werden, während „anchor-size“ dafür sorgt, dass es sich an die Breite der Zeile anpasst (oder an die Höhe mit „anchor-size(height)“).

So weit, so gut – aber die erweiterte Zeile deckt die nächsten Zeilen ab.

Wir können dies beheben, indem wir die Popover-Höhe zum Padding-Block-Ende der Tabellenzellen innerhalb der erweiterten Zeile hinzufügen:

Cool. Die Illusion ist vollständig!

Um die Höhe zu animieren, fügen wir dem CSS ein paar zusätzliche Deklarationen hinzu:

.selector {
  &, &::backdrop {
    transition: 
      display .5s allow-discrete, 
      overlay .5s allow-discrete, 
      inset .5s,
      scale .5s,
      opacity .5s;
    opacity: 0;
  }

  &::backdrop {
    background: #0002;
  }

  &:popover-open {
    opacity: 1;
    &::backdrop {
      opacity: 0.5;
    }
  }

  @starting-style {
    &:popover-open,
    &:popover-open::backdrop {
      opacity: 0;
    }
  }
}

Automatisieren der Polsterungsanpassung

Um die manuelle Aktualisierung des Abstands zu vermeiden, können wir ein Skript verwenden, das den Abstand basierend auf der Höhe des Popovers dynamisch aktualisiert:

&.--modal {
  block-size: calc(100dvh - 2em);
  inline-size: calc(100dvw - 2em);
  inset-block-start: 1em;
  inset-inline: 1em;
  transform-origin: 50% 50%;

  @starting-style {
    &:popover-open{
      scale: 0;
    }
  }
}

Dieses Skript wartet auf das Umschaltereignis des Popovers und aktualisiert dynamisch eine benutzerdefinierte Eigenschaft, --row, damit sie der Höhe des Popovers beim Öffnen entspricht.

---

Demo

Sie können eine Demo unter browser.style/ui/table-expand ansehen, wo Sie auch die Original-Demo-Stile für Tabellen finden.

Das obige ist der detaillierte Inhalt vonEntwerfen besserer Tabellen: Verwenden von Popovers für zusätzliche Daten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!