@public-ui/sample-react 4.0.0-alpha.4 → 4.0.0-alpha.6

package/src/components/popover-button/basic.tsx

@@ -1,34 +1,47 @@
+import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolHeading, KolPopoverButton, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
 
 export const PopoverButtonBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
+	const buttonRef = React.useRef<HTMLKolPopoverButtonElement>(null);
 
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};
 
-	const TOOLBAR_ITEMS = [
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
+			type: 'button',
 			_label: 'Edit',
 			_icons: 'codicon codicon-edit',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Delete',
 			_icons: 'codicon codicon-trash',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Duplicate',
 			_icons: 'codicon codicon-copy',
 			_on: dummyEventHandler,
 		},
 	];
 
+	useEffect(() => {
+		// Ensure the popover is closed on initial render
+		if (buttonRef.current) {
+			buttonRef.current.showPopover();
+			buttonRef.current.kolFocus();
+		}
+	}, []);
+
 	return (
 		<>
 			<SampleDescription>
@@ -37,19 +50,13 @@ export const PopoverButtonBasic: FC = () => {
 					right, bottom, left) using the <code>_popoverAlign</code> prop.
 				</p>
 			</SampleDescription>
-
 			<div className="flex flex-col gap-4">
-				<KolHeading _label="Vertical toolbar with action buttons" _level={2}></KolHeading>
-
-				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }}>
+				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>
 					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolPopoverButton>
-
-				<KolHeading _label="Info icon with help text" _level={2}></KolHeading>
-
 				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 					<div className="w-sm p-2 border border-solid border-gray">
-						<KolHeading _label="Help Information" _level={3}></KolHeading>
+						<KolHeading _label="Help Information" _level={0}></KolHeading>
 						<p>
 							<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
 							Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.

package/src/components/skip-nav/basic.tsx

@@ -1,33 +1,42 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { KolSkipNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 
-export const SkipNavBasic: FC = () => (
-	<div className="grid gap-4">
-		<SampleDescription>
-			<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
-			<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
-		</SampleDescription>
+export const SkipNavBasic: FC = () => {
+	const skipNavRef = useRef<HTMLKolSkipNavElement>(null);
 
-		<KolSkipNav
-			_label="Hidden navigation"
-			_links={[
-				{
-					_label: 'To the top',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'To the form',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'To the end',
-					_href: '#/back-page',
-				},
-			]}
-		></KolSkipNav>
-	</div>
-);
+	useEffect(() => {
+		skipNavRef.current?.kolFocus();
+	}, []);
+
+	return (
+		<div className="grid gap-4">
+			<SampleDescription>
+				<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
+				<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
+			</SampleDescription>
+
+			<KolSkipNav
+				ref={skipNavRef}
+				_label="Hidden navigation"
+				_links={[
+					{
+						_label: 'To the top',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'To the form',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'To the end',
+						_href: '#/back-page',
+					},
+				]}
+			></KolSkipNav>
+		</div>
+	);
+};

package/src/components/split-button/basic.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
 import { useToasterService } from '../../hooks/useToasterService';
 import { SampleDescription } from '../SampleDescription';
@@ -11,18 +12,21 @@ export const SplitButtonBasic: FC = () => {
 	const dummyEventHandler = {
 		onClick: buttonWithTextClickEventHandler,
 	};
-	const TOOLBAR_ITEMS = [
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
+			type: 'button',
 			_label: 'Save',
 			_icons: 'codicon codicon-save',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Move',
 			_icons: 'codicon codicon-move',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Delete',
 			_icons: 'codicon codicon-trash',
 			_on: dummyEventHandler,

package/src/components/table/direction-aware-sort.tsx

@@ -0,0 +1,65 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+type TemperatureRow = {
+	city: string;
+	temperature: number;
+};
+
+const COMFORTABLE_TEMPERATURE = 22;
+
+const TEMPERATURE_DATA: TemperatureRow[] = [
+	{ city: 'Reykjavík', temperature: 6 },
+	{ city: 'Berlin', temperature: 21 },
+	{ city: 'Palma de Mallorca', temperature: 29 },
+	{ city: 'Cairo', temperature: 35 },
+	{ city: 'Helsinki', temperature: 14 },
+];
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'City', key: 'city' },
+			{
+				label: 'Temperature (°C)',
+				key: 'temperature',
+				textAlign: 'right',
+				compareFn: (rowA, rowB, direction = 'ASC') => {
+					const temperatureA = (rowA as TemperatureRow).temperature;
+					const temperatureB = (rowB as TemperatureRow).temperature;
+					const differenceA = Math.abs(temperatureA - COMFORTABLE_TEMPERATURE);
+					const differenceB = Math.abs(temperatureB - COMFORTABLE_TEMPERATURE);
+
+					if (differenceA !== differenceB) {
+						return direction === 'DESC' ? differenceB - differenceA : differenceA - differenceB;
+					}
+
+					return direction === 'DESC' ? temperatureB - temperatureA : temperatureA - temperatureB;
+				},
+				render: (_element, _cell, row) => {
+					const difference = Math.abs((row as TemperatureRow).temperature - COMFORTABLE_TEMPERATURE);
+					return `${(row as TemperatureRow).temperature} °C (Δ ${difference} °C)`;
+				},
+			},
+		],
+	],
+};
+
+export const TableDirectionAwareSort: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates how <code>compareFn</code> receives the current <code>sortDirection</code>. Ascending sorts show cities that are closest to
+				22&nbsp;°C first, descending sorts highlight the most extreme temperatures.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full">
+			<KolTableStateful _minWidth="100%" _label="Direction aware compare function" _data={TEMPERATURE_DATA} _headers={HEADERS} className="block" />
+		</section>
+	</>
+);

package/src/components/table/multi-sort.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';
-import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';
+import type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';
+import { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -13,64 +13,42 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	year: 'numeric',
 });
 
+const TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [
+	{
+		label: 'order',
+		key: 'order',
+		textAlign: 'center',
+		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+			if ((data0 as Data).order < (data1 as Data).order) return -1;
+			else if ((data1 as Data).order < (data0 as Data).order) return 1;
+			else return 0;
+		},
+		sortDirection: 'ASC',
+	},
+	{
+		label: 'date',
+		key: 'date',
+		textAlign: 'center',
+		render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
+		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+			if ((data0 as Data).date < (data1 as Data).date) return -1;
+			else if ((data1 as Data).date < (data0 as Data).date) return 1;
+			else return 0;
+		},
+	},
+];
+
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
-	horizontal: [
-		[
-			{
-				label: 'order',
-				key: 'order',
-				textAlign: 'center',
-				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-					if ((data0 as Data).order < (data1 as Data).order) return -1;
-					else if ((data1 as Data).order < (data0 as Data).order) return 1;
-					else return 0;
-				},
-			},
-			{
-				label: 'date',
-				key: 'date',
-				textAlign: 'center',
-				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-					if ((data0 as Data).date < (data1 as Data).date) return -1;
-					else if ((data1 as Data).date < (data0 as Data).date) return 1;
-					else return 0;
-				},
-			},
-		],
-	],
+	horizontal: [TABLE_HEADER_CELLS],
 };
 
 const HEADERS_VERTICAL: KoliBriTableHeaders = {
-	vertical: [
-		[
-			{
-				label: 'order',
-				key: 'order',
-				textAlign: 'center',
-				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-					if ((data0 as Data).order < (data1 as Data).order) return -1;
-					else if ((data1 as Data).order < (data0 as Data).order) return 1;
-					else return 0;
-				},
-			},
-			{
-				label: 'date',
-				key: 'date',
-				textAlign: 'center',
-				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-					if ((data0 as Data).date < (data1 as Data).date) return -1;
-					else if ((data1 as Data).date < (data0 as Data).date) return 1;
-					else return 0;
-				},
-			},
-		],
-	],
+	vertical: [TABLE_HEADER_CELLS],
 };
+
 export const MultiSortTable: FC = () => {
-	const [allowMultiSortVertical, setAllowMultiSortVertical] = useState(false);
-	const [allowMultiSortHorizontal, setAllowMultiSortHorizontal] = useState(true);
+	const [verticallHeader, setVerticalHeader] = useState(HEADERS_VERTICAL);
+	const [horizontalHeader, setHorizontalHeader] = useState(HEADERS_HORIZONTAL);
 	return (
 		<>
 			<SampleDescription>
@@ -80,36 +58,26 @@ export const MultiSortTable: FC = () => {
 			<section className="w-full grid gap-4">
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Vertical" />
-					<KolInputCheckbox
-						_checked={allowMultiSortVertical}
-						_label="Allow Multi-Sort"
-						_variant="switch"
-						_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}
-					></KolInputCheckbox>
+					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_minWidth="auto"
 						_data={DATA.slice(0, 10)}
-						_headers={HEADERS_VERTICAL}
+						_headers={verticallHeader}
 						className="block"
-						_allowMultiSort={allowMultiSortVertical}
+						_allowMultiSort={true}
 					/>
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Horizontal" />
-					<KolInputCheckbox
-						_checked={allowMultiSortHorizontal}
-						_label="Allow Multi-Sort"
-						_variant="switch"
-						_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}
-					></KolInputCheckbox>
+					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_minWidth="auto"
 						_data={DATA}
-						_headers={HEADERS_HORIZONTAL}
+						_headers={horizontalHeader}
 						className="block"
-						_allowMultiSort={allowMultiSortHorizontal}
+						_allowMultiSort={true}
 					/>
 				</section>
 			</section>

package/src/components/table/predefined-settings.tsx

@@ -27,9 +27,9 @@ export const PredefinedSettings: FC = () => {
 				}}
 				_tableSettings={{
 					columns: [
-						{ key: 'columnA', visible: false, label: 'Column A', position: 2 },
-						{ key: 'columnB', visible: true, label: 'Column B', position: 1, width: 20 },
-						{ key: 'columnC', visible: true, label: 'Column C', position: 0, width: 45 },
+						{ key: 'columnC', visible: true, label: 'Column C', width: 45 },
+						{ key: 'columnB', visible: true, label: 'Column B', width: 20 },
+						{ key: 'columnA', visible: false, label: 'Column A' },
 					],
 				}}
 				_data={DATA}

package/src/components/table/routes.ts

@@ -1,6 +1,7 @@
 import { Routes } from '../../shares/types';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
+import { TableDirectionAwareSort } from './direction-aware-sort';
 import { TableHorizontalScrollbar } from './horizontal-scrollbar';
 import { InteractiveChildElements } from './interactive-child-elements';
 import { MultiSortTable } from './multi-sort';
@@ -8,6 +9,7 @@ import { TableNonHidableColumns } from './non-hidable-columns';
 import { PaginationPosition } from './pagination-position';
 import { PredefinedSettings } from './predefined-settings';
 import { TableRenderCell } from './render-cell';
+import { TableSettingsColumnOptions } from './settings-column-options';
 import { TableSortData } from './sort-data';
 import { TableStatefulWithSelection } from './stateful-with-selection';
 import { TableStatefulWithSingleSelection } from './stateful-with-single-selection';
@@ -30,7 +32,9 @@ export const TABLE_ROUTES: Routes = {
 		'pagination-position': PaginationPosition,
 		'predefined-settings': PredefinedSettings,
 		'render-cell': TableRenderCell,
+		'settings-column-options': TableSettingsColumnOptions,
 		'sort-data': TableSortData,
+		'direction-aware-sort': TableDirectionAwareSort,
 		'stateful-with-selection': TableStatefulWithSelection,
 		'stateless-with-settings-menu': TableStatelessWithSettingsMenu,
 		'stateful-with-single-selection': TableStatefulWithSingleSelection,

package/src/components/table/settings-column-options.tsx

@@ -0,0 +1,58 @@
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+type UserRow = {
+	id: string;
+	name: string;
+	team: string;
+	email: string;
+	status: string;
+};
+
+const DATA: UserRow[] = [
+	{ id: 'U-001', name: 'Andrea Schmidt', team: 'Design', email: 'andrea@example.org', status: 'Active' },
+	{ id: 'U-002', name: 'Boris Klein', team: 'Engineering', email: 'boris@example.org', status: 'Active' },
+	{ id: 'U-003', name: 'Chiara Russo', team: 'Support', email: 'chiara@example.org', status: 'On leave' },
+];
+
+export const TableSettingsColumnOptions: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This example demonstrates how the table settings respect column metadata. Some columns can be hidden, reordered, or resized, while others stay locked
+				based on their <code>hidable</code>, <code>sortable</code>, and <code>resizable</code> flags.
+			</p>
+		</SampleDescription>
+
+		<KolTableStateful
+			_label="Table with column option restrictions"
+			_minWidth="auto"
+			_hasSettingsMenu
+			_headers={{
+				horizontal: [
+					[
+						{ key: 'id', label: 'ID', hidable: false, sortable: false },
+						{ key: 'name', label: 'Name' },
+						{ key: 'team', label: 'Team', sortable: false },
+						{ key: 'email', label: 'E-Mail', resizable: false },
+						{ key: 'status', label: 'Status', hidable: false, resizable: false },
+					],
+				],
+			}}
+			_tableSettings={{
+				columns: [
+					{ hidable: false, key: 'id', label: 'ID', sortable: false, visible: true, width: 15 },
+					{ key: 'name', label: 'Name', visible: true, width: 30 },
+					{ key: 'team', label: 'Team', sortable: false, visible: true, width: 20 },
+					{ key: 'email', label: 'E-Mail', resizable: false, visible: true, width: 25 },
+					{ hidable: false, key: 'status', label: 'Status', resizable: false, visible: true, width: 10 },
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '720px' }}
+		/>
+	</>
+);

package/src/components/table/sort-data.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import type { KoliBriTableHeaders } from '@public-ui/components';
+import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';
 import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import type { Data } from './test-data';
@@ -13,6 +13,15 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	year: 'numeric',
 });
 
+const compareByDate =
+	(sortDirection = 'ASC') =>
+	(data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+		const first = (data0 as Data).date.getTime();
+		const second = (data1 as Data).date.getTime();
+		const result = first - second;
+		return sortDirection === 'DESC' ? -result : result;
+	};
+
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -22,11 +31,7 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				compareFn: (data0, data1) => {
-					if ((data0 as Data).date < (data1 as Data).date) return -1;
-					else if ((data1 as Data).date < (data0 as Data).date) return 1;
-					else return 0;
-				},
+				compareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),
 			},
 		],
 	],
@@ -41,11 +46,7 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				compareFn: (data0, data1) => {
-					if ((data0 as Data).date < (data1 as Data).date) return -1;
-					else if ((data1 as Data).date < (data0 as Data).date) return 1;
-					else return 0;
-				},
+				compareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),
 			},
 		],
 	],

package/src/components/table/stateful-with-selection.tsx

@@ -40,7 +40,7 @@ export const TableStatefulWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
 		console.log('Selection change via callback', selection);
 	};
 

package/src/components/table/stateful-with-single-selection.tsx

@@ -39,7 +39,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | string | null) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
 		console.log('Selection change via callback', selection);
 	};
 

package/src/components/table/stateless-with-selection.tsx

@@ -42,9 +42,9 @@ export const TableStatelessWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
 		console.log('Selection change via callback', selection);
-		setSelectedKeys(Array.isArray(selection) ? selection : [selection]);
+		setSelectedKeys(selection);
 	};
 
 	useEffect(() => {

package/src/components/table/stateless-with-settings-menu.tsx

@@ -22,8 +22,25 @@ export const TableStatelessWithSettingsMenu: FC = () => (
 		<SampleDescription>
 			<p>
 				This sample shows <code>KolTableStateless</code> with the settings menu enabled via
-				<code>_hasSettingsMenu</code>.
+				<code>_hasSettingsMenu</code>. Each column demonstrates a different combination of sorting and resizing options.
 			</p>
+			<ul>
+				<li>
+					<strong>ID</strong> keeps a fixed width with <code>resizable: false</code> while still allowing sorting.
+				</li>
+				<li>
+					<strong>Name</strong> represents the default behavior with both sorting and resizing enabled.
+				</li>
+				<li>
+					<strong>Role</strong> disables sorting but keeps <code>resizable: true</code> so users can widen the column if necessary.
+				</li>
+				<li>
+					<strong>E-Mail</strong> allows sorting but locks its width with <code>resizable: false</code> to keep the layout stable.
+				</li>
+				<li>
+					<strong>Active</strong> is neither sortable nor resizable to emphasise the status indicator.
+				</li>
+			</ul>
 		</SampleDescription>
 
 		<KolTableStateless
@@ -34,11 +51,46 @@ export const TableStatelessWithSettingsMenu: FC = () => (
 			_headerCells={{
 				horizontal: [
 					[
-						{ key: 'id', label: 'ID', textAlign: 'center' },
-						{ key: 'name', label: 'Name', textAlign: 'center' },
-						{ key: 'role', label: 'Role', textAlign: 'center' },
-						{ key: 'email', label: 'E-Mail', textAlign: 'center' },
-						{ key: 'active', label: 'Active', textAlign: 'center' },
+						{
+							key: 'id',
+							label: 'ID',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: false,
+						},
+						{
+							key: 'name',
+							label: 'Name',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: true,
+						},
+						{
+							key: 'role',
+							label: 'Role',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: false,
+							resizable: true,
+						},
+						{
+							key: 'email',
+							label: 'E-Mail',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: false,
+						},
+						{
+							key: 'active',
+							label: 'Active',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: false,
+							resizable: false,
+						},
 					],
 				],
 			}}

package/src/components/table/stateless-with-single-selection.tsx

@@ -42,9 +42,9 @@ export const TableStatelessWithSingleSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
 		console.log('Selection change via callback', selection);
-		setSelectedKeys(Array.isArray(selection) ? selection : [selection]);
+		setSelectedKeys(selection);
 	};
 
 	useEffect(() => {