TableStateless
Synonyme: Data Table, Details List, Data Grid
Die TableStateless-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe
TableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.
Richtung der Datenwiedergabe
Die Komponente KolTableStateless bietet eine flexible Tabellenimplementierung, die die bi-direktionale Datenwiedergabe unterstützt. Die Richtung der Datenwiedergabe wird durch die Header-Konfiguration bestimmt:
- Horizontale Kopfzeilen (Standard): Die Daten werden von oben nach unten gerendert, wenn Schlüssel in den horizontalen Kopfzeilen vorhanden sind. Jede Spalte steht für einen Schlüssel, und die Zeilen stehen für einzelne Dateneinträge.
- Vertikale Kopfzeilen: Die Daten werden von links nach rechts dargestellt, wenn die Schlüssel in den vertikalen Kopfzeilen vorhanden und in den horizontalen Kopfzeilen nicht vorhanden sind. Jede Zeile stellt einen Schlüssel dar, und Spalten stellen einzelne Dateneinträge dar.
Die Darstellungsrichtung wird automatisch durch die Untersuchung der Kopfzeilenzellen bestimmt:
- Wenn horizontale Kopfzeilen Schlüssel enthalten, wird die horizontale Darstellung verwendet.
- Wenn nur vertikale Kopfzeilen Schlüssel enthalten, wird vertikal gerendert.
- Wenn keine Kopfzeilen Schlüssel enthalten, wird standardmäßig das horizontale Rendering verwendet.
Selektion
Über die _selection-Property kann der "Selection-Modus" der Komponente aktiviert und gesteuert werden. Ist _selection definiert, erhält jede Zeile eine Checkbox, über die sich die Zeile aus- oder abwählen lässt.
const data = [
{ id: '1001', name: 'Marianne Musterfrau' },
{ id: '1002', name: 'Max Mustermann' },
];
const selection: KoliBriTableSelection = {
/* label: Funktion, welche für jede Zeile ausgerufen wird, und ein Label für die Checkbox zurückgibt. */
label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
/* selectedKeys: Array von Strings, das die Key-Properties der gewählten Zeilen beinhaltet */
selectedKeys: ['1002'],
/* keyPropertyName: Eigenschaft, auf die sich `selectedKeys` bezieht. Default-Wert: `id` */
keyPropertyName: 'id',
};
Events
Zur Behandlung von Events bzw. Callbacks siehe
| Event | Auslöser | Value |
|---|---|---|
sort | Die Sortierung hat sich geändert | Objekt vom Typ SortEventPayload mit key und currentSortDirection |
selectionChange | Die Auswahl von Tabellenzeilen hat sich geändert | Array von ausgewählten IDs bzw. ausgewählt ID bei Einfachauswahl |
Beispiel
<KolTableStateless
_label="Table for demonstration purposes"
_headerCells={{
horizontal: [
[
{ key: 'value', label: 'Value', sortDirection: 'ASC' },
],
],
}}
_data={DATA}
_selection={{
label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
selectedKeys: ['1002'],
keyPropertyName: 'id',
}}
_on={{
/**
* @param {MouseEvent} _
* @param {SortEventPayload} payload
* @param {string} payload.key
* @param {KoliBriSortDirection} payload.currentSortDirection
*/
onSort: (_: MouseEvent, payload: SortEventPayload) => {
/* Perform sort, update `DATA` and headers `sortDirection` */
},
/**
* @param {Event} _
* @param {string[]} selection - Array of selected keys
*/
onSelectionChange: (_: Event, selection: string[]) => {
/* Update selection.selectedKeys state */
}
}}
/>
Synonyme: Data Table, Details List, Data Grid
Die TableStateless-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe
TableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern.
Selektion
Über die _selection-Property kann der "Selection-Modus" der Komponente aktiviert und gesteuert werden. Ist _selection definiert, erhält jede Zeile eine Checkbox, über die sich die Zeile aus- oder abwählen lässt.
const data = [
{ id: '1001', name: 'Marianne Musterfrau' },
{ id: '1002', name: 'Max Mustermann' },
];
const selection: KoliBriTableSelection = {
/* label: Funktion, welche für jede Zeile ausgerufen wird, und ein Label für die Checkbox zurückgibt. */
label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
/* selectedKeys: Array von Strings, das die Key-Properties der gewählten Zeilen beinhaltet */
selectedKeys: ['1002'],
/* keyPropertyName: Eigenschaft, auf die sich `selectedKeys` bezieht. Default-Wert: `id` */
keyPropertyName: 'id',
};
Beispiel
<KolTableStateless
_label="Table for demonstration purposes"
_headerCells={{
horizontal: [
[
{ key: 'value', label: 'Value', sortDirection: 'ASC' },
],
],
}}
_data={DATA}
_selection={{
label: (row: KoliBriTableDataType) => `Selection for ${row.name}`,
selectedKeys: ['1002'],
keyPropertyName: 'id',
}}
_on={{
/**
* @param {MouseEvent} _
* @param {SortEventPayload} payload
* @param {string} payload.key
* @param {KoliBriSortDirection} payload.currentSortDirection
*/
onSort: (_: MouseEvent, payload: SortEventPayload) => {
/* Perform sort, update `DATA` and headers `sortDirection` */
},
/**
* @param {Event} _
* @param {string[]} selection - Array of selected keys
*/
onSelectionChange: (_: Event, selection: string[]) => {
/* Update selection.selectedKeys state */
}
}}
/>
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_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 |
_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 |
_minWidth | _min-width | [DEPRECATED] This property is deprecated and will be removed in the next major release. Defines the table min-width. | string | undefined | undefined |
_on | -- | Defines the callback functions for table events. | undefined | { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> | undefined; onSelectionChange?: EventValueOrEventCallback<Event, SelectionChangeEventPayload> | undefined; } | undefined |
_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 |