@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.2

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

@@ -0,0 +1,42 @@
+import { SampleDescription } from '../SampleDescription';
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+
+const DATA = [{ columnA: 'Column A', columnB: 'Column B', columnC: 'Column C' }];
+
+export const PredefinedSettings: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example shows the table with predefined settings.</p>
+			</SampleDescription>
+
+			<KolTableStateful
+				_label="Table for demonstration purposes with predefined settings"
+				_minWidth="auto"
+				_hasSettingsMenu
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'column A', key: 'columnA' },
+							{ label: 'column B', key: 'columnB' },
+							{ label: 'column C', key: 'columnC' },
+						],
+					],
+				}}
+				_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 },
+					],
+				}}
+				_data={DATA}
+				_min-width="500px"
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
+		</>
+	);
+};

package/src/components/table/render-cell.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolInputText, KolTableStateful } from '@public-ui/react-v19';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -80,11 +80,10 @@ const HEADERS: KoliBriTableHeaders = {
 				render: (el, cell) => {
 					el.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;
 				},
-				sort: (data) => data.sort((data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime()),
+				compareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),
 			},
 			{
 				label: 'Action (react)',
-				key: 'order',
 				width: '20em',
 
 				/* Example 4: Render function using React */
@@ -112,9 +111,9 @@ const HEADERS: KoliBriTableHeaders = {
 export const TableRenderCell: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable using React render functions for the cell contents.</p>
+			<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>
 		</SampleDescription>
 
-		<KolTable _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
+		<KolTableStateful _label="Sort by date column" _minWidth="auto" _data={DATA} _headers={HEADERS} className="w-full" />
 	</>
 );

package/src/components/table/routes.ts

@@ -1,36 +1,44 @@
 import { Routes } from '../../shares/types';
-import { PaginationPosition } from './pagination-position';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
 import { TableHorizontalScrollbar } from './horizontal-scrollbar';
+import { InteractiveChildElements } from './interactive-child-elements';
+import { MultiSortTable } from './multi-sort';
+import { TableNonHidableColumns } from './non-hidable-columns';
+import { PaginationPosition } from './pagination-position';
+import { PredefinedSettings } from './predefined-settings';
 import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
-import { TableStateless } from './stateless';
-import { TableWithFooter } from './with-footer';
 import { TableStatefulWithSelection } from './stateful-with-selection';
 import { TableStatefulWithSingleSelection } from './stateful-with-single-selection';
+import { TableStateless } from './stateless';
 import { TableStatelessWithSelection } from './stateless-with-selection';
+import { TableStatelessWithSettingsMenu } from './stateless-with-settings-menu';
 import { TableStatelessWithSingleSelection } from './stateless-with-single-selection';
+import { TableStickyHeader } from './sticky-header';
+import { TableWithFooter } from './with-footer';
 import { TableWithPagination } from './with-pagination';
-import { InteractiveChildElements } from './interactive-child-elements';
-import { MultiSortTable } from './multi-sort';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'column-alignment': TableColumnAlignment,
 		'complex-headers': TableComplexHeaders,
 		'horizontal-scrollbar': TableHorizontalScrollbar,
+		'interactive-child-elements': InteractiveChildElements,
+		'multi-sort': MultiSortTable,
+		'non-hidable-columns': TableNonHidableColumns,
 		'pagination-position': PaginationPosition,
+		'predefined-settings': PredefinedSettings,
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
-		'with-footer': TableWithFooter,
 		'stateful-with-selection': TableStatefulWithSelection,
+		'stateless-with-settings-menu': TableStatelessWithSettingsMenu,
 		'stateful-with-single-selection': TableStatefulWithSingleSelection,
+		stateless: TableStateless,
 		'stateless-with-selection': TableStatelessWithSelection,
 		'stateless-with-single-selection': TableStatelessWithSingleSelection,
+		'sticky-header': TableStickyHeader,
+		'with-footer': TableWithFooter,
 		'with-pagination': TableWithPagination,
-		'interactive-child-elements': InteractiveChildElements,
-		stateless: TableStateless,
-		'multi-sort': MultiSortTable,
 	},
 };

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTable } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -22,12 +22,11 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data) =>
-					data.sort((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) => {
+					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;
+				},
 			},
 		],
 	],
@@ -42,12 +41,11 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				sort: (data) =>
-					data.sort((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) => {
+					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;
+				},
 			},
 		],
 	],
@@ -56,17 +54,17 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 export const TableSortData: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
+			<p>This sample shows KolTableStateful with sortable columns. The sort-order can be changed by clicking the &quot;date&quot; header column.</p>
 		</SampleDescription>
 
 		<section className="w-full grid gap-4">
 			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Vertical" />
-				<KolTable _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
+				<KolHeading _level={2} _label="Vertical headers" />
+				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
 			</section>
 			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Horizontal" />
-				<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+				<KolHeading _level={2} _label="Horizontal headers" />
+				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 			</section>
 		</section>
 	</>

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

@@ -1,15 +1,17 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
 import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },
+	{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -28,7 +30,8 @@ export const TableStatefulWithSelection: FC = () => {
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
-		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : [],
+		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : ['AAA1004'],
+		disabledKeys: ['AAA1003', 'AAA1004'],
 		keyPropertyName: 'internalIdentifier',
 	};
 
@@ -48,11 +51,11 @@ export const TableStatefulWithSelection: FC = () => {
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatefulRef]);
 
@@ -69,6 +72,7 @@ export const TableStatefulWithSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateful
 					_label="Table with selection checkboxes"
+					_minWidth="auto"
 					_headers={{
 						horizontal: [
 							[

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

@@ -1,10 +1,10 @@
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
-import { KolButton, KolTableStateful, createReactRenderElement } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
 import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
@@ -50,11 +50,11 @@ export const TableStatefulWithSingleSelection: FC = () => {
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatefulRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatefulRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatefulRef]);
 
@@ -71,6 +71,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateful
 					_label="Table with selection radio"
+					_minWidth="auto"
 					_headers={{
 						horizontal: [
 							[

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

@@ -1,15 +1,19 @@
+import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
+import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useEffect, useState, useRef } from 'react';
-import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
-import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableSelection } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
+import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
+
+type SelectionValue = string | number;
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },
+	{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -24,12 +28,13 @@ function KolButtonWrapper({ label }: { label: string }) {
 }
 
 export const TableStatelessWithSelection: FC = () => {
-	const [selectedKeys, setSelectedKeys] = useState(['AAA1002']);
+	const [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['AAA1002', 'AAA1004']);
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		selectedKeys,
 		keyPropertyName: 'internalIdentifier',
+		disabledKeys: ['AAA1003', 'AAA1004'],
 	};
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
@@ -37,18 +42,18 @@ export const TableStatelessWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {
 		console.log('Selection change via callback', selection);
-		setSelectedKeys(typeof selection === 'string' ? [selection] : selection);
+		setSelectedKeys(Array.isArray(selection) ? selection : [selection]);
 	};
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);
 
@@ -65,6 +70,7 @@ export const TableStatelessWithSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateless
 					_label="Table with selection checkboxes"
+					_minWidth="auto"
 					_headerCells={{
 						horizontal: [
 							[

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

@@ -0,0 +1,52 @@
+import type { FC } from 'react';
+import React from 'react';
+import { KolTableStateless } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+type Data = {
+	id: string;
+	name: string;
+	role: string;
+	email: string;
+	active: string;
+};
+const DATA: Data[] = [
+	{ id: 'U1001', name: 'Alice Johnson', role: 'Admin', email: 'alice@example.org', active: 'Yes' },
+	{ id: 'U1002', name: 'Bob Smith', role: 'Editor', email: 'bob@example.org', active: 'No' },
+	{ id: 'U1003', name: 'Carol Lee', role: 'Viewer', email: 'carol@example.org', active: 'Yes' },
+	{ id: 'U1004', name: 'David Kim', role: 'Editor', email: 'david@example.org', active: 'Yes' },
+];
+
+export const TableStatelessWithSettingsMenu: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows <code>KolTableStateless</code> with the settings menu enabled via
+				<code>_hasSettingsMenu</code>.
+			</p>
+		</SampleDescription>
+
+		<KolTableStateless
+			_label="Users (stateless with settings menu)"
+			_minWidth="auto"
+			className="w-full"
+			_hasSettingsMenu={true}
+			_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' },
+					],
+				],
+			}}
+			_data={DATA}
+			_on={{
+				onSort: (_e, payload) => console.log('sort', payload),
+				onSelectionChange: (_e, value) => console.log('selection', value),
+			}}
+		/>
+	</>
+);

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

@@ -1,15 +1,18 @@
+import type { KoliBriTableCell, KoliBriTableSelection, KoliBriTableSelectionKeys } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
+import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useEffect, useState, useRef } from 'react';
-import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
-import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableSelection } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
+import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
+
+type SelectionValue = string | number;
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -24,12 +27,13 @@ function KolButtonWrapper({ label }: { label: string }) {
 }
 
 export const TableStatelessWithSingleSelection: FC = () => {
-	const [selectedKeys, setSelectedKeys] = useState(['1002']);
+	const [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['1002']);
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		multiple: false,
 		selectedKeys,
+		disabledKeys: ['AAA1003'],
 		keyPropertyName: 'internalIdentifier',
 	};
 
@@ -38,18 +42,18 @@ export const TableStatelessWithSingleSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {
 		console.log('Selection change via callback', selection);
-		setSelectedKeys(typeof selection === 'string' ? [selection] : selection);
+		setSelectedKeys(Array.isArray(selection) ? selection : [selection]);
 	};
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);
 
@@ -66,6 +70,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateless
 					_label="Table with selection checkboxes"
+					_minWidth="auto"
 					_headerCells={{
 						horizontal: [
 							[

package/src/components/table/stateless.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateless } from '@public-ui/react';
+import { KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
-const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
+const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];
 
 export const TableStateless: FC = () => (
 	<>
@@ -14,6 +14,7 @@ export const TableStateless: FC = () => (
 		<section className="w-full">
 			<KolTableStateless
 				_label="Table for demonstration purposes"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[

package/src/components/table/sticky-header.tsx

@@ -0,0 +1,37 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
+import { COMPLEX_DATA } from './test-complex-data';
+
+const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'ID', key: 'id', textAlign: 'right' },
+			{ label: 'Common Name', key: 'common_name', textAlign: 'left' },
+			{ label: 'Scientific Name', key: 'scientific_name', textAlign: 'left' },
+			{ label: 'EMail', key: 'email', textAlign: 'left' },
+			{ label: 'IP Address', key: 'ip_address', textAlign: 'center' },
+			{ label: 'User Name', key: 'user_name', textAlign: 'left' },
+			{ label: 'Bitcoin Address', key: 'bitcoin_address', textAlign: 'center' },
+			{ label: 'Street Address', key: 'street_address', textAlign: 'center' },
+			{ label: 'IBAN', key: 'iban', textAlign: 'left' },
+		],
+	],
+};
+
+export const TableStickyHeader: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolTableStateful with horizontal and vertical scrollbars. It should be focusable and scrollable with the keyboard. The table headline
+				should be sticky at the top of the table.
+			</p>
+		</SampleDescription>
+
+		<KolHeading _level={2} _label="Sticky headers" />
+		<KolTableStateful _label="Sort a date column" _minWidth="1800px" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+	</>
+);