Tabelle

# Parameter table(table_content)
table_content: "object"
  sortable: "string" # Spalten sortierbar machen, Inhalt: Sprache, z.B. en, default: 'de'
  zebra: "boolean" # Hintergrundfarbe von Reihen abwechseln (default: false)
  type: "string" # Zulässige Werte: large (Großzügiger Whitespace + Header mit Hintergrundfarbe), data (kleine Schrift + Header mit Hintergrundfarbe) (default: false)
  responsive: "boolean" # Bis 1024px Bildschirmbreite nicht als Tabelle darstellen (default: false)
  scrollable: "boolean" # table bekommt die class "wm-table--overflow"
  fixed: "array" # Wenn die Spalten fixe Breiten haben sollen. Array von Breitenangaben, zb. [200, 400, 100]
  caption: "object"
    text: "string" # wird visuell versteckt angezeigt (Screenreader)
    id: "string" # auch im attribute aria-labelledby (accessibility)
  sections: "array" # Liste mit Tabellenelementen
    - tag: "string" # zulässige Werte: thead, tbody, tfoot
      rows: "array" # Liste von Reihen innerhalb des tag
        - tag: "string" # zulässige Werte: th (Header Information), td(Table Daten)
          color: "string" # einfärben der Row mit class wm-theme-bg--COLOR (table benötigt class wm-table--color)
          cells: "array" # Liste der im Tag enthaltenen Zellen
          - label: "string" # Inhalt der Zelle frei wählbar
            attributes: "object" # größe der jeweiligen Zelle
              colspan: "int" # Anzahl der Spalten
              rowspan: "int" # Anzahl der Reihen
  attributes: "object" # HTML-Attribute (z. B.: class,...), frei wählbar
    class: "string" # zulässige Werte: wm-table-text, wm-table-responsive, wm-table--overflow, wm-table-data, wm-table--zebra, wm-table--color

# Anwendung
{% from "components/tables/table.njk" import table with context %}

{{ table(table_content) }}