TableStateful

Synonyms: Data Table, Details List, Data Grid

The TableStateful component is primarily used to clearly display datasets. It is designed in such a way that it automatically determines all values ​​dependent on the data and displays the table accordingly. These include, for example, the optional column sorting or pagination functions.

For very large amounts of data, manual use of the TableStateless component is also possible. This means that the table is filled “manually” page by page. To do this, you can simply use a “own” pagination under the table using the pagination component instead of the table pagination. A possible sorting must also be implemented via the onSort events themselves. See .

Construction

The Table component is designed in such a way that the entire table structure does not have to be described in the markup itself. The component itself takes care of how exactly the table needs to be structured in a markup-specific manner in order to be barrier-free.

Because the table component dynamically assembles the valid and accessible markup, the complex markup for the assistive systems can be taken away from the developer.

Events

For the handling of events or callbacks, see .

Event	trigger	Value
selectionChange	The selection of table rows has changed	Array of selected row objects or row object with single selection
settingsChange	The table settings were changed by the user.	Object of type TableSettings

Functionalities

The Table component supports the following functionalities:

• Table description using a label attribute.
• Multi-line column headings in horizontal or vertical direction.
• Sorting function for either horizontal and vertical orientation.
• Different rendering function for the cells.
• Pagination for the table.

The Table component does not support the following functionalities:

• Filtering the table is currently not provided within the table.
• Selecting rows is currently not provided in the table.

However, both could be implemented using the render function.

Pagination

A variety of additional properties to control pagination can optionally be passed via the _pagination attribute. The exact description of the options can be found on the page .

KoliBriTableHeaders

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

Code

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

Example

Footer

By using the _dataFoot_ attribute, summary information or additional details can be displayed at the end of the table. The information is tied to the column definitions.

Example

Usage

Sorting

• You can define a sorting function for each header.
• Exactly one or no sorting function is activated.
• Multi-Sort Functionality: If the multi-sort option (_allowMultiSort) is enabled, the user can sort multiple columns at the same time. By default, this feature is disabled and only one column can be sorted at a time. The sorting switches between ascending, descending and no sorting. If multi-sort is disabled, the previous column will be unsorted whenever a new column is sorted.
• Currently it is not supported that with two-dimensional headers, the headers of the other header page are also sorted. When requesting sorting, we recommend using only one header dimension (either horizontal or vertical).

Render function

Render functions are defined as part of the table headers. See the KoliBriTableHeaders section. If there are both horizontal and vertical headers, the render function must be defined for the horizontal headers. If there are only vertical headers, the render functions can be defined there.

The render function can be used in various ways as follows. All methods are also demonstrated in this example: render-cell.tsx

1. String return value:

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

2. Fill node with textContent

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

3. Fill node with innerHTML - ⚠️ Make sure to sanitize values ​​to avoid XXS.

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

4. Use React render function

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

Settings

Table settings (_table-settings) are passed through to the kol-table-stateless component. See .

Accessibility

The Table component adds numerous attribute definitions to the table markup to best support screen readers.

The following attributes are currently managed by the component: role, scope and aria-\*.

This means, for example, that either the colheader or rowheader role is automatically set for the column headings. In addition, the scope is set to either col/colgroup or row/rowgroup. Similar to these automatisms, the aria-\* attributes are also set depending on relevance.

Why the table has a tab index is described on the following website: https://dequeuniversity.com/rules/axe/3.5/scrollable-region-focusable

Links and references

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
_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
_minWidth (required)	_min-width	Defines the table min-width (CSS width values).	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 | ({ label: (row: KoliBriTableDataType) => string; keyPropertyName?: string | undefined; multiple?: boolean | undefined; selectedKeys?: KoliBriTableSelectionKeys | undefined; disabledKeys?: KoliBriTableSelectionKeys | undefined; })	undefined

Methods

getSelection

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

Returns the selected rows.

Returns

Type: Promise<KoliBriTableDataType[] | null>

---

View example

Live editor