Tabellen und Datendarstellung in Grav

Markdown-Tabellen

Einfache Tabelle

| Name | Alter | Stadt |
|------|-------|-------|
| Anna | 28 | Köln |
| Ben | 34 | Berlin |
| Carla | 22 | München |

Ausgerichtete Spalten

| Links | Zentriert | Rechts |
|:------|:--------:|------:|
| A | B | C |
| Längere Zelle | Mittig | Rechtsbündig |

Komplexe Tabelle mit Twig

Für komplexe Tabellen mit Sortierung oder Daten aus Grav-Pages. Beispiel-Syntax (mit eckigen Klammern statt spitzen):

[table class="splexus-table"]
  [thead]
    [tr]
      [th]Produkt[/th]
      [th]Preis[/th]
      [th]Lager[/th]
      [th]Status[/th]
    [/tr]
  [/thead]
  [tbody]
    [for item in page.header.items]
    [tr]
      [td][item.name][/td]
      [td][item.price] €[/td]
      [td][item.stock][/td]
      [td]
        [if item.stock > 0]
          Verfügbar
        [else]
          Ausverkauft
        [endif]
      [/td]
    [/tr]
    [endfor]
  [/tbody]
[/table]

Datentabelle mit Frontmatter-Daten

In der .md Frontmatter:

---
title: Preistabelle
items:
  - name: Starter
    price: 9.90
    features: "5 Projekte, 10 GB Speicher"
  - name: Pro
    price: 29.90
    features: "Unbegrenzte Projekte, 100 GB Speicher"
  - name: Enterprise
    price: 99.90
    features: "Eigener Server, unbegrenzter Speicher"
---

Im Content (Twig-Schleife, als Text mit eckigen Klammern):

[for item in page.header.items]

  [title][item.name][/title]
  [p class="price"][item.price] €/Monat[/p]
  [p][item.features][/p]

[endfor]

CSS-Styles für Tabellen

Stylesheet-Definitionen werden im style-Tag hinterlegt. Beispiel-Syntax:

[style]
.splexus-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
}
.splexus-table th {
  background: #1a1a2e;
  color: #e0e0e0;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #6c63ff;
}
.splexus-table td {
  padding: 10px 16px;
  border-bottom: 1px solid #333;
  color: #ccc;
}
.splexus-table tr:hover td {
  background: rgba(108, 99, 255, 0.1);
}
.badge {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.85em;
  font-weight: 600;
}
.badge-ok { background: #16a34a; color: white; }
.badge-out { background: #dc2626; color: white; }
[/style]

Datendarstellung mit Chart.js

Chart.js benötigt ein canvas-Tag und ein script-Tag. Beispiel-Syntax:

[canvas id="myChart" width="400" height="200"][/canvas]
[script src="https://cdn.jsdelivr.net/npm/chart.js"][/script]
[script]
new Chart(document.getElementById('myChart'), {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun'],
    datasets: [{
      label: 'Besucher',
      data: [120, 190, 300, 250, 320, 410],
      backgroundColor: '#6c63ff'
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { display: false } },
    scales: { y: { beginAtZero: true } }
  }
});
[/script]