Server-Komponente

Table wird bevorzugt auf dem Server gerendert. Nutze den Standard-Import (z. B. @prokodo/ui/table) — die Library erkennt die Umgebung automatisch.

Table

Table rendert barrierefreie tabellarische Daten mit Unterstützung für sortierbare Spalten, optionalen Sticky-Header, Zebra-Streifen und horizontalen Scroll-Container für responsive Layouts.

---

Übersicht

import { Table } from "@prokodo/ui/table"
;<Table
  columns={[
    { key: "name", label: "Name", sortable: true },
    { key: "email", label: "Email" },
    { key: "role", label: "Role" },
  ]}
  rows={users}
/>

Live PreviewOpen in Storybook ↗

---

Import

import { Table } from "@prokodo/ui/table"

CSS:

import "@prokodo/ui/table.css"

---

Props

Prop	Typ	Standard	Pflicht	Beschreibung
caption	string	—	✅	Zugängliche Tabellenbeschriftung.
ariaLabel	string	—	✅	ARIA-Label für das Tabellenelement.
header	TableHeaderCellProps[]	—	—	Spaltenkopf-Definitionen.
body	TableRowProps[]	—	—	Tabellenzeilen-Daten.
title	string	—	—	Sichtbarer Titel oberhalb der Tabelle.
titleProps	HeadlineProps	—	—	Props für die Titel-Headline.
content	string	—	—	Optionale Beschreibung unterhalb des Titels.
type	"double" | "single"	"single"	—	"double" — alle Rahmen; "single" — nur Zeilen-Rahmen.
containerClassName	string	—	—	CSS-Klasse auf dem Tabellen-Container.
className	string	—	—	CSS-Klasse am Root-Element.

Siehe src/components/table/Table.model.ts für den vollständigen TableProps-Typ.

---

Design-Tokens

Anpassungen über CSS-Custom-Properties auf :root oder einem eingeschränkten Vorfahren-Element.

Token	Standard	Beschreibung
--pk-table-border-color	var(--pk-color-border)	Rahmenfarbe der Zeilentrennlinien
--pk-table-header-accent-color	var(--pk-color-brand)	Akzentfarbe der ersten Kopfzeilen-Zelle
--pk-table-row-hover-bg	color-mix(in srgb, var(--pk-color-brand) 8%, transparent)	Zeilen-Hover-/Fokus-Hintergrundton
--pk-table-caption-color	var(--pk-color-muted)	Textfarbe der Caption
--pk-table-cell-fg	var(--pk-color-fg)	Standard-Vordergrundfarbe der Zellen
--pk-table-padding-y	var(--pk-space-xl)	Vertikaler Innenabstand der Zellen
--pk-table-padding-x	var(--pk-space-sm)	Horizontaler Innenabstand der Zellen
--pk-table-container-pb	var(--pk-space-xl)	Unterer Innenabstand des Root-Containers

---

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.2	Bedeutungsvolle Reihenfolge (A)	✅ Erfüllt	Die Lesereihenfolge im DOM muss der beabsichtigten visuellen Darstellungsreihenfolge entsprechen.
1.4.3	Kontrast (Minimum) (AA)	🔍 Manuell prüfen	Text benötigt ein Kontrastverhältnis von mindestens 4,5:1 (3:1 für großen Text). Prüfung im finalen Produkt-Theme erforderlich.
2.1.1	Tastatur (A)	🔍 Manuell prüfen	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
4.1.2	Name, Rolle, Wert (A)	✅ Erfüllt	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.

Testabdeckung: 2 jest-axe-Assertion(s) in 1 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 Table in Storybook öffnen

---

Quellcode

src/components/table/Table.model.ts