Table (Stateless)

Synonyme: Data Table, Datentabelle, stateless Tabelle, einfache Tabelle

Beschreibung: Die TableStateless-Komponente ermöglicht die reine, statusfreie Darstellung von tabellarischen Daten. Im Gegensatz zu TableStateful verwaltet diese Komponente keine Sortierung oder Paginierung automatisch. Sie bietet sich besonders bei großen Datenmengen an, wenn Sortierung und Paginierung vom Client (z.B. via Backend) kontrolliert werden müssen.

Beispiel

Basale Tabelle mit horizontalen Spaltenüberschriften:

<kol-table-stateless
 _label="Beispielhafte Datentabelle"
 _headerCells={{
  horizontal: [
   [
    { key: 'name', label: 'Name' },
    { key: 'alter', label: 'Alter' },
    { key: 'stadt', label: 'Stadt' },
   ],
  ],
 }}
 _data={[
  { name: 'Anna Schmidt', alter: 28, stadt: 'Berlin' },
  { name: 'Max Müller', alter: 34, stadt: 'München' },
  { name: 'Eva Wagner', alter: 31, stadt: 'Hamburg' },
 ]}
/>

Barrierefreiheit

• Label erforderlich: Jede TableStateless-Komponente muss über das Attribut _label eine beschreibende Beschriftung haben. Dies ist essentiell für Screenreader-Nutzer.
• Semantische Struktur: Die Komponente verwendet semantische HTML-Tabellenlemente (table, thead, tbody, th, td), die Assistivtechnologien korrekt interpretieren können.
• Spaltenüberschriften: Spalten und Zeilenüberschriften werden als <th>-Elemente markiert, sodass Screenreader die Zuordnung von Daten zu Überschriften erkennen.
• Tastaturnavigation: Das Tabellenlayout unterstützt Tastaturnavigation und Fokusmanagement.
• Sortierindikator: Sortierbare Spalten werden mit visuellen und programmatischen Indikatoren versehen.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Wann TableStateless einsetzen: Nutzen Sie TableStateless, wenn Sie Sortierung, Paginierung oder Filterung manuell (z.B. via Backend-API) verwalten möchten.
• Datenmengen: Besonders geeignet für sehr große Datenmengen, die paginiert oder lazy-loaded werden.
• Kontrolle behalten: Diese Komponente gibt Ihnen volle Kontrolle über Datenverwaltung und Benutzerinteraktionen.
• Vergleich mit TableStateful: Verwenden Sie , wenn die Komponente automatisch Sortierung und Paginierung übernehmen soll.
• Label setzen: Vergeben Sie immer ein aussagekräftiges _label, das die Tabelle beschreibt.

Anwendungsfälle

• Backend-gesteuerte Daten: Tabellen, deren Daten von einem Server paginiert oder gefiltert werden.
• Echtzeit-Updates: Dynamische Tabellen, die regelmäßig aktualisiert werden.
• Custom Datenverarbeitung: Szenarien, in denen Sie spezielle Such-, Filter- oder Sortierlogik implementieren müssen.
• Performance-kritische Anwendungen: Große Datenmengen, bei denen Client-seitige Paginierung ineffizient wäre.
• Externe API-Integration: Daten, die von einer externen API in Echtzeit abgefragt werden.

Playground

Interaktive Beispiele für die wesentlichen Funktionalitäten von TableStateless:

<kol-table-stateless
 _label="Mitarbeiter Übersicht"
 _headerCells={{
  horizontal: [
   [
    { key: 'id', label: 'ID', sortDirection: 'ASC' },
    { key: 'name', label: 'Name' },
    { key: 'position', label: 'Position' },
    { key: 'abteilung', label: 'Abteilung' },
   ],
  ],
 }}
 _data={[
  { id: 1, name: 'Alice Wagner', position: 'Senior Dev', abteilung: 'Engineering' },
  { id: 2, name: 'Bob Schmidt', position: 'Product Manager', abteilung: 'Produkt' },
  { id: 3, name: 'Carol Müller', position: 'Designer', abteilung: 'Design' },
  { id: 4, name: 'David Klein', position: 'QA Ingenieur', abteilung: 'Quality' },
 ]}
/>

Funktionalitäten

Horizontale Tabellenkopfzeile

Standard-Tabelle mit horizontalen Spaltenüberschriften:

<kol-table-stateless
 _label="Produktliste"
 _headerCells={{
  horizontal: [
   [
    { key: 'sku', label: 'SKU' },
    { key: 'name', label: 'Produktname' },
    { key: 'preis', label: 'Preis' },
   ],
  ],
 }}
 _data={[
  { sku: 'P001', name: 'Laptop', preis: '999,00 €' },
  { sku: 'P002', name: 'Monitor', preis: '299,00 €' },
  { sku: 'P003', name: 'Keyboard', preis: '79,99 €' },
 ]}
/>

Vertikale Tabellenkopfzeile

Tabelle mit vertikalen Zeilenüberschriften (transponiertes Layout):

<kol-table-stateless
 _label="Jahresbericht"
 _headerCells={{
  vertical: [
   [
    { key: 'metriken', label: 'Metriken' },
    { key: 'umsatz', label: 'Umsatz' },
    { key: 'gewinn', label: 'Gewinn' },
    { key: 'wachstum', label: 'Wachstum' },
   ],
  ],
 }}
 _data={[
  { metriken: 'Q1 2024', umsatz: '5.2M', gewinn: '1.1M', wachstum: '+12%' },
  { metriken: 'Q2 2024', umsatz: '6.1M', gewinn: '1.5M', wachstum: '+17%' },
 ]}
/>

Sortierung

Aktivierung der Sortierbarkeit durch sortDirection auf Spalten:

<kol-table-stateless
 _label="Sortierbare Personen-Tabelle"
 _headerCells={{
  horizontal: [
   [
    { key: 'name', label: 'Name', sortDirection: 'ASC' },
    { key: 'email', label: 'E-Mail' },
    { key: 'registriert', label: 'Registriert seit', sortDirection: 'DESC' },
   ],
  ],
 }}
 _data={[
  { name: 'Alice', email: 'alice@example.com', registriert: '2023-01-15' },
  { name: 'Bob', email: 'bob@example.com', registriert: '2024-06-20' },
 ]}
 _on={{
  onSort: (_: MouseEvent, payload: SortEventPayload) => {
   console.log('Sortiert nach:', payload.key, 'Richtung:', payload.currentSortDirection);
  },
 }}
/>

Zeilenauswahl (Selection)

Aktivierung von Checkboxen zur Zeilenauswahl:

<kol-table-stateless
 _label="Auswählbare Datensätze"
 _headerCells={{
  horizontal: [
   [
    { key: 'id', label: 'ID' },
    { key: 'artikel', label: 'Artikel' },
    { key: 'menge', label: 'Menge' },
   ],
  ],
 }}
 _data={[
  { id: '101', artikel: 'Artikel A', menge: 5 },
  { id: '102', artikel: 'Artikel B', menge: 3 },
  { id: '103', artikel: 'Artikel C', menge: 8 },
 ]}
 _selection={{
  label: (row) => `Auswahl für Artikel ${row.artikel}`,
  selectedKeys: ['102'],
  keyPropertyName: 'id',
 }}
 _on={{
  onSelectionChange: (_: Event, selection: KoliBriTableSelectionKeys) => {
   console.log('Ausgewählte Zeilen:', selection);
  },
 }}
/>

Einstellungsmenü

Aktivierung des Einstellungsmenüs für Spaltenmanagement:

<kol-table-stateless
 _label="Tabelle mit Spalteneinstellungen"
 _headerCells={{
  horizontal: [
   [
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'E-Mail' },
    { key: 'telefon', label: 'Telefon' },
    { key: 'stadt', label: 'Stadt' },
   ],
  ],
 }}
 _data={[
  { name: 'Anna', email: 'anna@example.com', telefon: '+49123456', stadt: 'Berlin' },
  { name: 'Bruno', email: 'bruno@example.com', telefon: '+49654321', stadt: 'München' },
 ]}
 _hasSettingsMenu={true}
 _on={{
  onChangeHeaderCells: (_: Event, headerCells: TableHeaderCells) => {
   console.log('Spalten aktualisiert:', headerCells);
  },
 }}
/>

Fussfzeile

Daten in der Tabellenzeile mit _dataFoot:

<kol-table-stateless
 _label="Verkaufsdaten mit Summen"
 _headerCells={{
  horizontal: [
   [
    { key: 'produkt', label: 'Produkt' },
    { key: 'verkauft', label: 'Verkauft' },
    { key: 'umsatz', label: 'Umsatz' },
   ],
  ],
 }}
 _data={[
  { produkt: 'Widget A', verkauft: 45, umsatz: '4.500 €' },
  { produkt: 'Widget B', verkauft: 32, umsatz: '3.200 €' },
 ]}
 _dataFoot={[
  { produkt: 'Gesamt', verkauft: 77, umsatz: '7.700 €' },
 ]}
/>

Fixierte Spalten

Fixierung von Spalten am Anfang und Ende mit _fixedCols:

<kol-table-stateless
 _label="Tabelle mit fixierten Spalten"
 _headerCells={{
  horizontal: [
   [
    { key: 'id', label: 'ID' },
    { key: 'name', label: 'Name' },
    { key: 'details', label: 'Weitere Infos' },
    { key: 'aktion', label: 'Aktion' },
   ],
  ],
 }}
 _data={[
  { id: '1', name: 'Datensatz 1', details: 'Info 1', aktion: 'Bearbeiten' },
  { id: '2', name: 'Datensatz 2', details: 'Info 2', aktion: 'Löschen' },
 ]}
 _fixedCols={[1, 1]}
/>

Beschriftung über externe Elemente (aria-labelledby)

Mittels _ariaLabelledby kann die Tabelle barrierefrei über ein externes Element (z. B. einer vorangestellten Überschrift) beschriftet werden. Das Attribut _label sollte dennoch gesetzt werden, da es als Fallback dient, falls die externe Referenz nicht aufgelöst werden kann.

...

Events

Zur Behandlung von Events bzw. Callbacks siehe .

Umgang mit Tabelleninteraktionen und Events, die von TableStateless ausgelöst werden:

Event	Auslöser	Value
sort	Eine Spalte wurde zum Sortieren angeklickt.	Objekt mit key (Spaltenschlüssel) und currentSortDirection ('ASC', 'DESC', 'NONE').
selectionChange	Nutzer hat eine oder mehrere Zeilen ausgewählt/abgewählt.	Array von Zeilen-Keys (oder einzelner Key bei Einfachauswahl).
settingsChange	Nutzer hat Spalteneinstellungen im Menü geändert.	Objekt vom Typ TableSettings mit aktualisierten Spalten.
changeHeaderCells	Spaltenüberschriften wurden durch _on.onChangeHeaderCells aktualisiert.	Aktualisierte Kopfzeilendaten als TableHeaderCells.

API

Properties

Property	Attribute	Description	Type	Default
_ariaLabelledby	_aria-labelledby	References an external element by ID that serves as the accessible label for this table. Uses ElementInternals.ariaLabelledByElements to cross the Shadow DOM boundary. Supported by desktop screen readers (NVDA, JAWS with Chrome/Firefox). Not yet supported by mobile screen readers (TalkBack, VoiceOver iOS) — use _label instead.	string | undefined	undefined
_data (required)	_data	Defines the primary table data.	KoliBriTableDataType[] | string	undefined
_dataFoot	_data-foot	Defines the data for the table footer.	KoliBriTableDataType[] | string | undefined	undefined
_fixedCols	--	Defines the fixed number of columns from start and end of the table	[number, number] | undefined	undefined
_hasSettingsMenu	_has-settings-menu	Enables the settings menu if true (default: false).	boolean | undefined	undefined
_headerCells (required)	_header-cells	Defines the horizontal and vertical table headers.	string | { horizontal?: KoliBriTableHeaderCell[][] | undefined; vertical?: KoliBriTableHeaderCell[][] | undefined; }	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_loading	_loading	Wether the table shows a loading spinner (default: false).	boolean | undefined	undefined
_on	--	Defines the callback functions for table events.	undefined | { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> | undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> | undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> | undefined; }	undefined
_selection	_selection	Defines how rows can be selected and the current selection.	string | undefined | ({ disabledKeys?: KoliBriTableSelectionKeys | undefined; keyPropertyName?: string | undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean | undefined; selectedKeys?: KoliBriTableSelectionKeys | undefined; })	undefined
_variant	_variant	Defines which variant should be used for presentation.	string | string[] | undefined	undefined

---