Tabellen

Einfache Tabelle

Breiter als der Raum

Tabelle mit Aktionen

Gestreifte Zeilen, beleuchtet unter dem Zeiger

Zeilen, die angekreuzt werden können

Ein Kästchen am Kopf jeder Zeile, eines im Header für alle, und die Aktionen darüber: Sie senden die angekreuzten Zeilen an ihre eigene Adresse und bleiben unerreichbar, solange nichts angekreuzt ist.

Dateien, eine Gesamtzahl, eine Aktion für jede Zeile

Pfade, die nach ihrem Namen gelesen werden, die Ordner davor werden von ihrem Anfang abgeschnitten. Die Leiste endet mit der Anzahl der Zeilen, und eine Aktion, die mit `alle` gekennzeichnet ist, funktioniert auch ohne etwas angekreuzt zu haben – sie nimmt jede Zeile und führt die Leiste, wenn sie die erwartete ist.

Filter

Eine Leiste von Filtern am Kopf der Tabelle, jeweils ein diskretes Menü, das angibt, was es eingrenzt, sobald es das tut. Auf dem Server leben sie in der Abfrage der Seite – jede Option ist ein Link – und der Controller grenzt die Zeilen von dort ein; in Vue sind sie ein Wert, der der Seite für ihre API übergeben wird oder von der Tabelle auf die bereits vorhandenen Zeilen angewandt wird. Jede Option ist ein Kästchen – rund für eine Auswahl von einem – gefärbt durch seinen Ton, wenn er einen hat, einen Status oder eine Kategorie.

Sortierung

Ein Header, der sortiert, ist ein Link auf dem Server und ein Button in vue: aufsteigend, absteigend, dann zurück zur Reihenfolge, die die Seite deklariert hat, auf der die Liste öffnet und die ihr Pfeil von Anfang an zeigt. Leere Daten gehen in beiden Richtungen zuletzt, und Namen vergleichen sich so, wie die Sprache sie ordnet. Hier sortiert die Tabelle die Zeilen, die sie selbst erhalten hat; ein Controller, der seine Liste paginiert, liest die gleiche Abfrage stattdessen.

Sortierung im Browser, von twig

`vue: true` übergibt die gleichen Spalten und Zeilen an den vue-Zwilling: er sortiert und durchsucht die gesamte Liste im Browser, ohne Seitenladezeit. Für eine Liste, die die Seite ganz hält — eine kurze, oder eine, die keine API bereitstellt.

Aktionen in einer Auswahl

Die gleiche Leiste, wenn es genug Aktionen gibt, um sie zu überfüllen: Eine wird gewählt, dann angewandt.

Link- und Symbolzellen

Ladezustand

Leerer Zustand

Spaltenausrichtung

Codes, Zahlen und Gesamtsummen

`cell: 'code'` setzt einen Identifikator in der monospaced Schrift; `cell: 'number'` oder eine `unit` schreibt eine Zahl im lokalen Format der Seite. `negative: true` zeichnet eine Zahl unter null im Fehlerton, ihr Minuszeichen sagt es ebenfalls. `totals` ist eine Zeile, die die Seite übergibt, unter den anderen gezeichnet — die Tabelle summiert nichts, hält eine Seite oder eine gefilterte Liste. Vom Server gezeichnet, dann von vue.

Aus Markdown

Eine in Markdown geschriebene Tabelle, die durch `markdown_ds` verarbeitet wird: Die Spalten, ihre Ausrichtung und die Markup jedes Zelle werden aus dem Dokument gelesen, und die Tabelle wird hier wie jede andere dargestellt. `markdown` behält das einfache `<table>` für alles, was keine Seite ist – eine E-Mail, einen Feed.

Gruppiere Zeilen

Eine Zeile, die nur eine Gruppe enthält, ist keine Zeile: Sie ist die Linie zwischen zwei Durchläufen davon, die ein Wort erhält. Sie erstreckt sich über die Tabelle und benennt, was folgt – die gleiche Lesart wie ein Menüseparator.

Statuszellen

Ein Zustand ist ein Kreis, niemals eine Farbe, die jemand gewählt hat: Die Zelle nimmt einen Typnamen oder einen Typ mit einer Anzahl und einem Titel an und zeigt das Statussymbol, das der Rest des Systems anzeigt. Nichts zum Stylen auf der Seite.

Sticky-Header

Eine lange Tabelle wird spaltenweise gelesen, ebenso wie zeilenweise. Mit `sticky` bleibt der Header im Blick, während die Zeilen darunter scrollen; eine Seite mit etwas Eigenem oben angeheftet zeigt, wie weit unten in `--table-sticky-top`.

Eine Tabelle in einer eigenen Zone

Eine `zone--table`-Zone wird der gesamten Tabelle gegeben: was sie oben antreibt, ihre Seiten am Fuß, aus dem, was scrollt, und zwischen ihnen der Grund der Tabelle bis zum Boden der Zone, sogar für drei Zeilen. Jede Tabelle kann darin sein, geschrieben vom Server oder von einem vue. Mit `natural`, wie die auf der linken Seite, behält die Tabelle die Breite ihrer Spalten, weder gestreckt noch zusammengedrückt.

Vue-Entity-Tabelle

Vue-Tabelle mit Auswahl

Der gleiche Vertrag auf dem Client: die angekreuzten Schlüssel kommen über v-model:selected zurück, jede Aktion wird als bulk-action ausgegeben, und eine mit einer Adresse wird gepostet, während die Servertabelle sie postet. Diese haben keine, also sagt die Zeile darunter, was hätte getan werden können. Drei Zeilen pro Seite, die Gesamtzahl am Ende der Leiste, und „Alle archivieren“ benötigt nichts angekreuzt.

Paginierung ohne Gesamtzahl

Wenn die API keine Gesamtzahl zurückgibt, fällt der Pager auf vorher/nachher zurück.

Seitenumbruch, vom Server erzeugt

`pagination(page, pages_count)` erstellt die Seiten einer Liste als Links: jeder behält die Route und die Abfrage der Seite, auf der er sich befindet — eine Suche, eine Sortierung — und ändert nur `page`, gezählt ab 1. Die angezeigten Zahlen sind die des vue-Pagierers: die erste, die letzte, die aktuelle und ihre Nachbarn. `compact` hält vorherige und nächste um die Seitennummer; `route` und `params` blättern über eine andere Adresse.

Vue-Datumsformatter