UNPKG

@public-ui/components

Version:

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

public-ui.github.io

public-ui/kolibri

55 lines (30 loc) • 14.5 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
# kol-table-stateful <!-- Auto Generated Below --> ## Overview The **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination. ## Properties | Property | Attribute | Description | Type | Default | | ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | `_allowMultiSort` | `_allow-multi-sort` | Defines whether to allow multi sort. | `boolean \| undefined` | `undefined` | | `_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` | | `_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` | | `_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 \| ({ 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 \| undefined` | `undefined` | ## Methods ### `getSelection() => Promise<KoliBriTableDataType[] | null>` Returns the selected rows. #### Returns Type: `Promise<KoliBriTableDataType[] | null>` ### `resetSort() => Promise<void>` Resets the sort state to the default values defined in the `_headers` prop. #### Returns Type: `Promise<void>` ----------------------------------------------