From cb87197fbcac70c52e4ed975e5513c68d089534e Mon Sep 17 00:00:00 2001 From: Stefan Dietz Date: Mon, 5 May 2025 11:42:50 +0200 Subject: [PATCH] Add documentation for table settings --- docs/30-components/table-stateful.mdx | 11 ++++++-- docs/30-components/table-stateless.mdx | 38 +++++++++++++++++++++++--- 2 files changed, 42 insertions(+), 7 deletions(-) diff --git a/docs/30-components/table-stateful.mdx b/docs/30-components/table-stateful.mdx index 1d546e2b3d..d86143ee15 100644 --- a/docs/30-components/table-stateful.mdx +++ b/docs/30-components/table-stateful.mdx @@ -30,9 +30,10 @@ Dadurch, dass die Table-Komponente das valide und barrierefreie Markup dynamisch Zur Behandlung von Events bzw. Callbacks siehe . -| Event | Auslöser | Value | -|-------------------|-------------------------------------------------|-------------------------------------------------------------------------------| -| `selectionChange` | Die Auswahl von Tabellenzeilen hat sich geändert | Array von ausgewählten Zeilen-Objekten bzw. Zeilen-Objekt bei Einfachauswahl | +| Event | Auslöser | Value | +|-------------------|-----------------------------------------------------------|------------------------------------------------------------------------------| +| `selectionChange` | Die Auswahl von Tabellenzeilen hat sich geändert | Array von ausgewählten Zeilen-Objekten bzw. Zeilen-Objekt bei Einfachauswahl | +| `settingsChange` | Die Tabelleneinstellungen wurden durch den User geändert. | Objekt vom Typ `TableSettings` | ### Funktionalitäten @@ -174,6 +175,10 @@ import { createReactRenderElement } from '@public-ui/react'; } ``` +### Einstellungen + +Tabellen-Einstellungen (`_table-settings`) werden an die Komponente kol-table-stateless durchgereicht. Siehe . + diff --git a/docs/30-components/table-stateless.mdx b/docs/30-components/table-stateless.mdx index ddf82eb011..d03d0c97d1 100644 --- a/docs/30-components/table-stateless.mdx +++ b/docs/30-components/table-stateless.mdx @@ -54,14 +54,44 @@ const selection: KoliBriTableSelection = { }; ``` +## Einstellungen + +Tabellen verfügen automatisch über ein Einstellungsmenü, mit dem Nutzende: + +* Spalten ein- und ausblenden +* Spaltenbreiten anpassen +* Spaltenreihenfolge ändern + +Standardmäßig werden alle horizontalen Tabellenspalten berücksichtigt. + +Mithilfe der Property _tableSettings lassen sich vordefinierte oder bereits gespeicherte Tabellenkonfigurationen laden. Diese überschreiben die Standardwerte, und im Menü werden dann nur noch die dort aufgeführten Spalten angezeigt. + +Beispiel: + +```jsx + +``` + +Ändern Nutzende die Einstellungen, werden diese automatisch auf die Tabellenansicht übertragen und ein `settingsChange`-DOM-Event ausgelöst (siehe Events). + ### 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 | +| 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 | +| `settingsChange` | Die Tabelleneinstellungen wurden durch den User geändert. | Objekt vom Typ `TableSettings` | ## Beispiel