--- title: Tabellen description: Organisieren Sie Daten in Zeilen und Spalten mit Markdown-Tabellen und Table-Komponenten – inklusive Sortierung, Hervorhebung und Zusammenführung. --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. Tabellen organisieren Daten in Zeilen und Spalten. Jamdesk unterstützt zwei Ansätze: **Markdown-Tabellen** für schnelle, einfache Tabellen und **Table-Komponenten** für erweiterte Funktionen wie Hervorhebung und Ausrichtung. ## Verwendung ```mdx Name Type id string
``` ## Markdown-Tabellen Die schnellste Möglichkeit, eine Tabelle zu erstellen. Verwenden Sie Pipes (`|`), um Spalten zu trennen, und Bindestriche (`-`) für die Kopfzeile: ```markdown | Name | Type | Description | |------|------|-------------| | id | string | Unique identifier | | email | string | User email address | ``` | Name | Typ | Beschreibung | |------|-----|--------------| | id | string | Eindeutiger Bezeichner | | email | string | E-Mail-Adresse des Benutzers | Markdown-Tabellen eignen sich hervorragend für einfache Referenzdaten. Die Table-Komponente bietet mehr Kontrolle, wenn Sie Hervorhebungen, Ausrichtung oder visuelle Akzente benötigen. ## Table-Komponente Verwenden Sie für mehr Kontrolle die Komponenten ``, `` und ``: ```mdx
Name Type Description id string Unique identifier email string User email address
``` Name Typ Beschreibung id string Eindeutiger Bezeichner email string E-Mail-Adresse des Benutzers
## Gestreifte Zeilen Fügen Sie abwechselnde Zeilenhintergründe hinzu, um die Lesbarkeit zu verbessern: ```mdx Parameter Value timeout30sretries3backoffexponentialmaxDelay60s
``` Parameter Wert timeout30sretries3backoffexponentialmaxDelay60s
## Umrandet und kompakt Fügen Sie Rahmen zwischen den Zellen hinzu und reduzieren Sie den Innenabstand: ```mdx A B C 1 2 3
``` A B C 1 2 3
## Zeilen hervorheben Heben Sie ganze Zeilen hervor, um Aufmerksamkeit darauf zu lenken: ```mdx Field Required Description api_key Yes Your API authentication key limit No Maximum results (default: 100)
``` Feld Erforderlich Beschreibung api_key Ja Ihr API-Authentifizierungsschlüssel limit Nein Maximale Anzahl an Ergebnissen (Standard: 100)
Verfügbare Hervorhebungsfarben: `primary`, `success`, `warning`, `error`, `info` ## Zellen hervorheben Heben Sie einzelne Zellen als Statusindikatoren hervor: ```mdx Service Status API Operational Database Degraded Storage Outage
``` Service Status API Betriebsbereit Datenbank Eingeschränkt Speicher Ausfall
## Zellenausrichtung Steuern Sie die Textausrichtung für jede Zelle: ```mdx Left Center Right Text Text $99.99
``` Links Zentriert Rechts Text Text $99.99
## Spalten- und Zeilenzusammenführung Führen Sie Zellen über mehrere Spalten oder Zeilen zusammen: ```mdx Category Item Price Fruits Apple $1.00 Banana $0.50 Subtotal $1.50
``` Kategorie Artikel Preis Obst Apfel $1.00 Banane $0.50 Zwischensumme $1.50
## Sichtbare Beschriftung Zeigen Sie oberhalb der Tabelle eine barrierefreie Tabellenbeschriftung an: ```mdx Region Revenue North America $1.2M
``` Region Umsatz Nordamerika $1.2M
## Sortierbare Spalten Aktivieren Sie die interaktive Spaltensortierung mit der Eigenschaft `sortable`. Benutzer können auf Spaltenüberschriften klicken, um zu sortieren: ```mdx Name Price Stock Widget A$29.99150Gadget B$49.9975Tool C$19.99200Device D$99.9925
``` Name Preis Bestand Widget A$29.99150Gadget B$49.9975Tool C$19.99200Device D$99.9925
Klicken Sie einmal auf eine Spaltenüberschrift, um aufsteigend zu sortieren, erneut für die absteigende Sortierung und ein drittes Mal, um die Sortierung zurückzusetzen. Zahlen werden numerisch, Texte alphabetisch sortiert. Sortable funktioniert mit weiteren Funktionen wie gestreiften Zeilen: ```mdx Team Wins Losses Eagles124Bears88Lions106
``` Team Siege Niederlagen Eagles124Bears88Lions106
## Eigenschaften ### Table | Eigenschaft | Typ | Standard | Beschreibung | |------|------|---------|-------------| | `striped` | boolean | false | Abwechselnde Zeilenhintergründe | | `bordered` | boolean | false | Rahmen zwischen allen Zellen | | `compact` | boolean | false | Reduzierter Zellinnenabstand | | `fullWidth` | boolean | true | Tabelle erstreckt sich über die gesamte Breite | | `caption` | string | - | Text der Tabellenbeschriftung | | `captionVisible` | boolean | false | Beschriftung visuell anzeigen (Standard: nur für Screenreader) | | `stickyHeader` | boolean | false | Kopfzeile beim Scrollen sichtbar halten | | `sortable` | boolean | false | Sortierung der Spaltenüberschriften per Klick aktivieren | ### Row | Eigenschaft | Typ | Standard | Beschreibung | |------|------|---------|-------------| | `header` | boolean | false | Als Kopfzeile rendern | | `highlight` | boolean | false | Zeile hervorheben | | `highlightColor` | string | primary | Farbe: primary, success, warning, error, info | ### Cell | Eigenschaft | Typ | Standard | Beschreibung | |------|------|---------|-------------| | `align` | string | left | Textausrichtung: left, center, right | | `colSpan` | number | - | Zu überspannende Spalten | | `rowSpan` | number | - | Zu überspannende Zeilen | | `highlight` | boolean | false | Zelle hervorheben | | `highlightColor` | string | primary | Farbe: primary, success, warning, error, info | | `header` | boolean | false | Kopfzeilenformatierung erzwingen | ## Wie geht es weiter? Alle verfügbaren Komponenten durchsuchen Erfahren Sie, wie Sie Komponenten in MDX verwenden