Skip to content

Commit 5d7f7af

Browse files
AlexanderSchmidtCEAlexanderSchmidtCE
committed
added deprecated table to documentation
1 parent 6d78719 commit 5d7f7af

File tree

2 files changed

+222
-209
lines changed

2 files changed

+222
-209
lines changed

‎docs/30-components/31-table/index.mdx

Lines changed: 3 additions & 209 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,13 @@ tags:
88
- Beispiele
99
---
1010

11-
import { LiveEditorCompact } from '@site/src/components/LiveEditorCompact';
12-
import { ExampleLink } from '@site/src/components/ExampleLink';
13-
1411
### Stateful & Stateless
1512

16-
Es gibt zwei Varianten der Tabelle: <kol-link _label="KolTableStateful" _href="table/table-stateful"></kol-link> und <kol-link _label="KolTableStateless" _href="table/table-stateless"></kol-link>.
13+
Es gibt drei Varianten der Tabelle: <kol-link _label="KolTable" _href="table/table"></kol-link>, <kol-link _label="KolTableStateful" _href="table/table-stateful"></kol-link> und <kol-link _label="KolTableStateless" _href="table/table-stateless"></kol-link>.
1714
Beide Varianten sind für übersichtliche Darstellung von Datenmengen benutzbar.
1815

16+
<kol-badge _color="#fb4509" _label="Deprecated"></kol-badge> **Table** ist veraltet, bitte stattdessen <kol-link _label="KolTableStateful" _href="table/table-stateful"></kol-link> verwenden, die API und Funktionalität sind identisch.
17+
1918
Die **TableStateful**-Komponente ist darauf ausgelegt, große Datenmengen übergeben zu bekommen und übernimmt automatisch Funktionen wie Paginierung und Sortierung nach Tabellenspalten.
2019

2120
Die **TableStateless**-Komponente hingegen ist ausschließlich für die Darstellung zuständig. Ihr wird jeweils nur die darzustellende Teildatenmenge übergeben,
@@ -24,208 +23,3 @@ während Sortierung und Filterung der Daten außerhalb der Komponente stattfinde
2423
Ausführlichere Informationen zur Nutzung finden sich auf der jeweiligen Seite.
2524

2625
Synonyme: Data Table, Details List, Data Grid
27-
28-
<kol-alert _type="warning" _variant="card">
29-
<kol-badge _color="#fb4509" _label="Deprecated"></kol-badge>KolTable ist veraltet, bitte stattdessen <kol-link _label="KolTableStateful" _href="table/table-stateful"></kol-link> verwenden, die API und Funktionalität sind identisch.
30-
</kol-alert>
31-
32-
Die **Table**-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.
33-
34-
<kol-indented-text _summary="Backend-seitige Pagination">
35-
Bei sehr großen Datenmengen ist auch eine manuelle Nutzung der Table-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.
36-
</kol-indented-text>
37-
38-
## Konstruktion
39-
40-
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.
41-
42-
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.
43-
44-
### Funktionalitäten
45-
46-
Die Table-Komponente unterstützt folgende Funktionalitäten:
47-
48-
- Tabellenbeschreibung durch ein **`label`**-Attribut.
49-
- Mehrzeilige Spaltenüberschriften in horizontaler oder vertikaler Richtung.
50-
- Sortierfunktion für entweder horizontale und vertikale Ausrichtung.
51-
- Unterschiedliche Render-Funktion für die Zellen.
52-
- Pagination für die Tabelle.
53-
54-
Die Table-Komponente unterstützt folgende Funktionalitäten **nicht**:
55-
56-
- Das Filtern der Tabelle ist aktuell nicht innerhalb der Tabelle vorgesehen.
57-
- Das Auswählen von Zeilen ist aktuell in der Tabelle nicht vorgesehen.
58-
59-
> Beides könnte jedoch mittels der Render-Funktion umgesetzt werden.
60-
61-
### Pagination
62-
63-
Ü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 <kol-link _href="/docs/components/pagination" _label="/docs/components/pagination" _label="Pagination"></kol-link> zu finden.
64-
65-
#### KoliBriTableHeaders
66-
67-
```ts
68-
{
69-
horizontal: [
70-
[
71-
{
72-
label: string,
73-
key?: string,
74-
colsSpan?: number,
75-
rowSpan?: number,
76-
useTdInsteadOfTh?: boolean,
77-
render?: (data) => string,
78-
sort?: (data) => data,
79-
},
80-
…
81-
],
82-
…
83-
],
84-
vertical: [
85-
[
86-
{
87-
label: string,
88-
key?: string,
89-
colsSpan?: number,
90-
rowSpan?: number,
91-
useTdInsteadOfTh?: boolean,
92-
render?: (data) => string,
93-
sort?: (data) => data,
94-
},
95-
…
96-
],
97-
…
98-
],
99-
};
100-
```
101-
102-
### Code
103-
104-
```html
105-
<kol-table _label="Tabellenbeschreibung" _headers='{"horizontal": [[{"label":"Montag","key":"montag"}]]}' _pagination='[{"page":2}]'></kol-table>
106-
```
107-
108-
### Beispiel
109-
110-
<kol-table _label="Nur Vertikal Header, Daten Vertikal, Pagination" _headers='{"horizontal":[[{"label":"Montag","key":"montag"}]]}' _data='[{"montag":"Zelle1"},{"montag":"Zelle2"}]' _pagination='{"page":2}'></kol-table>
111-
112-
## Verwendung
113-
114-
### Sortierung
115-
116-
- Zu jedem Header kann man eine Sortierfunktion definieren.
117-
- Es ist exakt eine oder keine Sortierfunktion aktiviert.
118-
- **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.
119-
- 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).
120-
121-
### Render Funktion
122-
123-
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.
124-
125-
Die `render` Funktion kann auf verschiedene Arten wie folgt verwendet werden.
126-
Alle Methoden sind auch in diesem Beispiel demonstriert: [render-cell.tsx](https://github.com/public-ui/kolibri/blob/23ebb42d1ce3c8d1e4c74a5c7972842d5e4203fe/packages/samples/react/src/components/table/render-cell.tsx#L34)
127-
128-
1. String Rückgabewert:
129-
130-
```tsx
131-
{
132-
render: (_el, cell) => `Index: ${cell.label}`,
133-
}
134-
```
135-
136-
2. Node mit textContent füllen
137-
138-
```tsx
139-
{
140-
render: (el, cell) => {
141-
el.textContent = `Index: ${cell.label}`;
142-
},
143-
}
144-
```
145-
146-
3. Node mit innerHTML füllen - ⚠️ Hierbei unbedingt darauf achten, Werte zu sanitizen, um XXS vermeiden.
147-
148-
```tsx
149-
{
150-
render: (el, cell) => {
151-
el.innerHTML = `<strong>${cell.label}</strong>`;
152-
},
153-
}
154-
```
155-
156-
4. React render-function verwenden
157-
158-
```tsx
159-
import { createReactRenderElement } from '@public-ui/react';
160-
{
161-
render: (el) => {
162-
getRoot(createReactRenderElement(el)).render(
163-
<div>
164-
<KolInputText _label="Input" />
165-
<KolButton _label="Save" />
166-
</div>,
167-
);
168-
},
169-
}
170-
```
171-
172-
<!--### Best practices
173-
174-
### Anwendungsfälle-->
175-
176-
## Barrierefreiheit
177-
178-
Bei der Table-Komponente werden zahlreiche Attribut-Definitionen dem Tabellen-Markup hinzugefügt, um die Screenreader bestmöglich zu unterstützen.
179-
180-
Aktuell werden folgende Attribute von der Komponente verwaltet: `role`, `scope` und `aria-\*`.
181-
182-
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.
183-
184-
Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschrieben: <kol-link _href="" _label=""></kol-link>https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable
185-
186-
## Links und Referenzen
187-
188-
- <kol-link _href="https://www.w3.org/WAI/tutorials/tables/" _target="_blank"></kol-link>
189-
- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/datentabellen/scope.html" _target="_blank"></kol-link>
190-
- <kol-link _href="https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions" _target="_blank"></kol-link>
191-
- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
192-
- <kol-link _href="https://www.barrierefreies-webdesign.de/knowhow/live-regions/attribute.html" _target="_blank"></kol-link>
193-
- <kol-link _href="https://www.digitala11y.com/aria-sort-properties/" _target="_blank"></kol-link>
194-
- <kol-link _href="https://dequeuniversity.com/library/aria/table-sortable" _target="_blank"></kol-link>
195-
- <kol-link _href="https://www.maxability.co.in/2016/06/07/aria-sort-property/" _target="_blank"></kol-link>
196-
- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaSort" _target="_blank"></kol-link>
197-
- <kol-link _href="https://tollwerk.de/projekte/tipps-techniken-inklusiv-barrierefrei/aria-live-regionen" _target="_blank"></kol-link>
198-
- <kol-link _href="https://stackoverflow.com/questions/1312236/" _target="_blank"></kol-link>
199-
- <kol-link _href="https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable" _target="_blank"></kol-link>
200-
201-
<!-- Auto Generated Below -->
202-
203-
204-
> **[DEPRECATED]** Use KolTableStateful instead.
205-
206-
## Properties
207-
208-
| Property | Attribute | Description | Type | Default |
209-
| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
210-
| `_allowMultiSort` | `_allow-multi-sort` | Defines whether to allow multi sort. | `boolean` \| `undefined` | `undefined` |
211-
| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[]` \| `string` | `undefined` |
212-
| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[]` \| `string` \| `undefined` | `undefined` |
213-
| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string` \| `{ horizontal?: KoliBriTableHeaderCellWithLogic[][]` \| `undefined; vertical?: KoliBriTableHeaderCellWithLogic[][]` \| `undefined; }` | `undefined` |
214-
| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
215-
| `_minWidth` | `_min-width` | Defines the table min-width. | `string` \| `undefined` | `undefined` |
216-
| `_on` | -- | Defines the callback functions for table events. | `undefined` \| `{ onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload>` \| `undefined; }` | `undefined` |
217-
| `_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` |
218-
| `_paginationPosition` | `_pagination-position` | Controls the position of the pagination. | `"both"` \| `"bottom"` \| `"top"` \| `undefined` | `'bottom'` |
219-
| `_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` |
220-
221-
222-
----------------------------------------------
223-
224-
225-
226-
227-
<ExampleLink component="table" />
228-
229-
## Live-Editor
230-
231-
<LiveEditorCompact component="table" />

0 commit comments

Comments
 (0)