TableStateful

Synonyme: Data Table, Details List, Data Grid

Die TableStateful-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.

Bei sehr großen Datenmengen ist auch eine manuelle Nutzung der TableStateless-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise "manuell" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine "eigene" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden. Eine mögliche Sortierung muss ebenfalls über die onSort-Events selber implementiert werden. Siehe KolTableStateless.

Konstruktion

Die Table-Komponente ist so konstruiert, dass nicht der gesamte Tabellenaufbau im Markup selbst beschrieben werden muss. Wie genau die Tabelle Markup-spezifisch aufgebaut werden muss, um barrierefrei zu sein, übernimmt die Komponente selbst.

Dadurch, dass die Table-Komponente das valide und barrierefreie Markup dynamisch zusammenbaut, kann die komplexe Auszeichnung für die assistive Systeme dem/der Entwickler:in abgenommen werden.

Funktionalitäten

Die Table-Komponente unterstützt folgende Funktionalitäten:

• Tabellenbeschreibung durch ein label-Attribut.
• Mehrzeilige Spaltenüberschriften in horizontaler oder vertikaler Richtung.
• Sortierfunktion für entweder horizontale und vertikale Ausrichtung.
• Unterschiedliche Render-Funktion für die Zellen.
• Pagination für die Tabelle.

Die Table-Komponente unterstützt folgende Funktionalitäten nicht:

• Das Filtern der Tabelle ist aktuell nicht innerhalb der Tabelle vorgesehen.
• Das Auswählen von Zeilen ist aktuell in der Tabelle nicht vorgesehen.

Beides könnte jedoch mittels der Render-Funktion umgesetzt werden.

Pagination

Über das Attribut _pagination kann optional eine Vielzahl zusätzlicher Properties zur Steuerung der Pagination übergeben werden. Die genaue Beschreibung der Optionen ist auf der Seite zu finden.

KoliBriTableHeaders

{
 horizontal: [
 [
 {
 label: string,
 key?: string,
 colsSpan?: number,
 rowSpan?: number,
 useTdInsteadOfTh?: boolean,
 render?: (data) => string,
 sort?: (data) => data,
 },
 …
 ],
 …
 ],
 vertical: [
 [
 {
 label: string,
 key?: string,
 colsSpan?: number,
 rowSpan?: number,
 useTdInsteadOfTh?: boolean,
 render?: (data) => string,
 sort?: (data) => data,
 },
 …
 ],
 …
 ],
};

Code

<kol-table-stateful
 _label="Tabellenbeschreibung"
 _headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}'
 _pagination='[{"page":2}]'
></kol-table-stateful>

Beispiel

Footer

Durch die Verwendung des _dataFoot_-Attribut können zusammenfassende Informationen oder zusätzliche Details am Ende der Tabelle angezeigt werden. Die Informationen sind hierbei an die Spaltendefinitionen gebunden.

Beispiel

Verwendung

Sortierung

• Zu jedem Header kann man eine Sortierfunktion definieren.
• Es ist exakt eine oder keine Sortierfunktion aktiviert.
• Multi-Sort-Funktionalität: Wenn die Multi-Sort-Option (_allowMultiSort) aktiviert ist, kann der Benutzer mehrere Spalten gleichzeitig sortieren. Standardmäßig ist diese Funktion deaktiviert, und nur eine Spalte kann auf einmal sortiert werden. Die Sortierung wechselt zwischen aufsteigend, absteigend und ohne Sortierung. Wenn Multi-Sort deaktiviert ist, wird die Sortierung der vorherigen Spalte aufgehoben, sobald eine neue Spalte sortiert wird.
• Aktuell wird nicht unterstützt, dass bei zweidimensionalen Headern, die Header der jeweils anderen Header-Seite mit sortiert werden. Bei der Anforderung der Sortierung empfehlen wir die Verwendung nur einer Header-Dimension (entweder horizontal oder vertikal).

Render Funktion

Render-Funktionen werden als Teil der Tabellen-Header definiert. Siehe Abschnitt "KoliBriTableHeaders". Gibt es sowohl horizontale als auch vertikale Header, muss die Render-Funktion für die horizontalen Header definiert werden. Gibt es nur vertikale Header, können die Render-Funktionen dort definiert werden.

Die render Funktion kann auf verschiedene Arten wie folgt verwendet werden. Alle Methoden sind auch in diesem Beispiel demonstriert: render-cell.tsx

1. String Rückgabewert:

{
 render: (_el, cell) => `Index: ${cell.label}`,
}

2. Node mit textContent füllen

{
 render: (el, cell) => {
 el.textContent = `Index: ${cell.label}`;
 },
}

3. Node mit innerHTML füllen - ⚠️ Hierbei unbedingt darauf achten, Werte zu sanitizen, um XXS vermeiden.

{
 render: (el, cell) => {
 el.innerHTML = `<strong>${cell.label}</strong>`;
 },
}

4. React render-function verwenden

import { createReactRenderElement } from '@public-ui/react';
{
 render: (el) => {
 getRoot(createReactRenderElement(el)).render(
 <div>
 <KolInputText _label="Input" />
 <KolButton _label="Save" />
 </div>,
 );
 },
}

Barrierefreiheit

Bei der Table-Komponente werden zahlreiche Attribut-Definitionen dem Tabellen-Markup hinzugefügt, um die Screenreader bestmöglich zu unterstützen.

Aktuell werden folgende Attribute von der Komponente verwaltet: role, scope und aria-\*.

Das heißt beispielsweise, dass bei den Spaltenüberschriften automatisch entweder die Rolle colheader oder rowheader gesetzt wird. Darüber hinaus wird der Scope entweder auf col/colgroup oder row/rowgroup gesetzt. Ähnlich dieser Automatismen werden auch die aria-\*-Attribute je nach Relevanz gesetzt.

Warum die Tabelle einen Tabindex hat, wird auf der folgenden Webseite beschrieben: https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable

Links und Referenzen

Properties

Property	Attribute	Description	Type	Default
_allowMultiSort	_allow-multi-sort	Defines whether to allow multi sort.	boolean | 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
_headers (required)	_headers	Defines the horizontal and vertical table headers.	string | { horizontal?: KoliBriTableHeaderCellWithLogic[][] | undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] | 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
_minWidth	_min-width	Defines the table min-width.	string | undefined	undefined
_on	--	Defines the callback functions for table events.	undefined | { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> | undefined; }	undefined
_pagination	_pagination	Defines whether to show the data distributed over multiple pages.	boolean | string | undefined | { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks | undefined; _page?: number | undefined; _max?: number | undefined; _boundaryCount?: number | undefined; _hasButtons?: boolean | Stringified<PaginationHasButton> | undefined; _pageSize?: number | undefined; _pageSizeOptions?: Stringified<number[]> | undefined; _siblingCount?: number | undefined; _customClass?: string | undefined; _label?: string | undefined; _tooltipAlign?: AlignPropType | undefined; }	undefined
_paginationPosition	_pagination-position	Controls the position of the pagination.	"both" | "bottom" | "top" | undefined	'bottom'
_selection	_selection	Defines how rows can be selected and the current selection.	string | undefined | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string | undefined; multiple?: boolean | undefined; selectedKeys?: string[] | undefined; })	undefined

Methods

getSelection

getSelection() => Promise<KoliBriTableDataType[] | KoliBriTableDataType | null>

Returns

Type: Promise<KoliBriTableDataType | KoliBriTableDataType[] | null>

---

View example

Live-Editor