Table Listen

Die table Komponente zeigt Daten in einer übersichtlichen tabellarischen Struktur an. Bei begrenztem Platz wird automatisch eine horizontale Scrollbar angezeigt.

WCAG AA

Funktionen

  • Responsive: Horizontales Scrollen auf schmalen Bildschirmen.

  • Bildunterschrift: Optionale Tabellenbeschriftung.

  • Leerer Zustand: Konfigurierbare Meldung, wenn keine Daten verfügbar sind.

  • Consistent styling: Design tokens from the Insight UI theme.

HTML

Verwendung

Die Komponente wird über das table Tag eingebunden.

{% load insight_tags %} {% table config=table_config %}

Parameter

Laden…

config (TableConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
headers list[str]

Liste der Spaltenüberschriften.

 [] False
rows list[list[str]]

Liste der Zeilendaten (jede Zeile ist eine Liste von Zellenwerten).

 [] False
caption str

Optionale Tabellenüberschrift.

 "" False
empty_msg str

Meldung, die angezeigt wird, wenn keine Daten verfügbar sind.

 "Keine Daten verfügbar." False
TableConfig( caption="User List", headers=["Name", "Email", "Status"], rows=[ ["John Doe", "[email protected]", "Active"], ["Jane Smith", "[email protected]", "Inactive"], ], empty_msg="No users found.", )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Verwendet semantische Elemente wie <table>, <thead>, <tbody>, <tfoot>, <th> und <td>.

  • Kopfzellen verwenden scope='col', um sie ihren Spalten zuzuordnen.

  • Ein optionales <caption>-Element beschreibt den Zweck der Tabelle.

  • In einem <tfoot>-Element wird eine Meldung über den leeren Status angezeigt (wenn die Tabelle eine Daten enthält).

  • Sortable columns have aria-sort attribute and use <button> elements for click targets.

  • Sortier-Icons übernehmen den Attributwert aria-hidden='true' von der Icon-Komponente.

Verwandte Themen