Anleitung

Tabellen

Bauen Sie eine Tabelle aus einer Liste in Ihren Daten, mit festen Spaltenbreiten, einer Kopfzeile auf jeder Seite und Überträgen.

Auf dieser Seite

Community

Tabellen in Markdown

Eine normale Markdown-Tabelle funktioniert. Setzen Sie {{#each}} zwischen die Zeilen, um eine Zeile für jeden Eintrag zu wiederholen:

| Pos. | Leistung | Betrag |
| --- | --- | ---: |
{{#each rechnung.positionen}}
| {{ pos }} | {{ text }} | {{ betrag | money }} |
{{/each}}

Das | in {{ betrag | money }} beginnt keine neue Spalte.

Der Tabellenblock

Längere Tabellen beschreiben Sie im Front Matter. Brevier schreibt das HTML für Sie.

rechnung.md
---
table:
  items: rechnung.positionen
  columns:
    - field: pos
      label: Pos.
      width: 1fr
    - field: text
      label: Leistung
      width: 6fr
    - field: betrag
      label: Betrag
      width: 2fr
      align: right
      format: money
  header:
    repeat: true
  zebra: true
---

Die Tabelle steht dort, wo im Text {{ table }} steht. Ohne diesen Tag steht sie am Ende.

Schlüssel Bedeutung
items Die Liste in Ihren Daten. Eine Zeile pro Eintrag.
columns Ein Eintrag pro Spalte.
header.repeat Die Kopfzeile auf jeder Seite wiederholen.
header.style Eine CSS-Klasse für die Kopfzeile.
zebra Jede zweite Zeile hinterlegen.
keepRowTogether Eine Zeile nie auf zwei Seiten teilen.

Jede Spalte hat diese Schlüssel:

Schlüssel Bedeutung
field Das Feld in jedem Eintrag.
label Der Text der Kopfzeile. Ohne ihn nimmt Brevier den title aus dem Schema, dann den Feldnamen.
width Ein Anteil wie 2fr oder ein Prozentwert wie 40%.
align left, center oder right.
format Ein Formatierer, etwa money oder date.

Überträge

Eine deutsche Rechnung über mehrere Seiten zeigt an jedem Seitenwechsel die Zwischensumme: den Übertrag. Brevier ergänzt ihn für Sie:

  • unten auf der Seite die Summe aller Zeilen darüber
  • oben auf der nächsten Seite, unter der wiederholten Kopfzeile, dieselbe Summe noch einmal

In einer HTML-Vorlage schalten zwei Attribute das ein. data-brevier-uebertrag steht an der Tabelle. data-brevier-carry markiert die Spalte, die aufsummiert wird.

rechnung.html
<table data-brevier-uebertrag="true">
  <thead>
    <tr><th>Pos.</th><th>Leistung</th><th data-brevier-carry="true">Betrag</th></tr>
  </thead>
  <tbody>
    {{#each rechnung.positionen}}
    <tr><td>{{ pos }}</td><td>{{ text }}</td><td>{{ betrag | money }}</td></tr>
    {{/each}}
  </tbody>
</table>

Brevier setzt die Seiten, findet die Seitenwechsel, fügt die beiden Zeilen ein und setzt neu, bis die Wechsel an ihrem Platz bleiben. Jede Seite hält Platz für ihre eigenen Übertragszeilen frei. Brevier rechnet mit exakten Dezimalzahlen, damit die Cent immer stimmen.

Die Rechnung auf der Vorlagen-Seite zeigt das Ergebnis.