@public-ui/sample-react 4.0.0-beta.1 → 4.0.0-ee1678914efc9a51fdc688bac71b570e768a8032.0

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

@@ -49,10 +49,12 @@ const BACKLOG_DATA: BacklogEntry[] = Array.from({ length: 15 }).map((_, index) =
 	status: STATUS_SEQUENCE[index % STATUS_SEQUENCE.length],
 	openTickets: (index * 3) % 11,
 }));
+
 const TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [
 	{
 		label: 'Assignee',
 		key: 'assignee',
+
 		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
 			(data0 as BacklogEntry).assignee.localeCompare((data1 as BacklogEntry).assignee, 'de'),
 		sortDirection: 'ASC',
@@ -60,12 +62,14 @@ const TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [
 	{
 		label: 'Department',
 		key: 'department',
+
 		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
 			(data0 as BacklogEntry).department.localeCompare((data1 as BacklogEntry).department, 'de'),
 	},
 	{
 		label: 'Priority',
 		key: 'priority',
+
 		textAlign: 'center',
 		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
 			PRIORITY_ORDER[(data0 as BacklogEntry).priority] - PRIORITY_ORDER[(data1 as BacklogEntry).priority],
@@ -74,6 +78,7 @@ const TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [
 	{
 		label: 'Status',
 		key: 'status',
+
 		textAlign: 'center',
 		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
 			STATUS_ORDER[(data0 as BacklogEntry).status] - STATUS_ORDER[(data1 as BacklogEntry).status],
@@ -81,12 +86,14 @@ const TABLE_HEADER_CELLS: KoliBriTableHeaderCellWithLogic[] = [
 	{
 		label: 'Open tickets',
 		key: 'openTickets',
+
 		textAlign: 'right',
 		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as BacklogEntry).openTickets - (data1 as BacklogEntry).openTickets,
 	},
 	{
 		label: 'Last updated',
 		key: 'date',
+
 		textAlign: 'center',
 		render: (_el, _cell, tuple) => DATE_FORMATTER.format((tuple as BacklogEntry).date),
 		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
@@ -123,7 +130,6 @@ export const MultiSortTable: FC = () => {
 					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
-						_minWidth="auto"
 						_data={BACKLOG_DATA.slice(0, 10)}
 						_headers={verticallHeader}
 						className="block"
@@ -133,14 +139,7 @@ export const MultiSortTable: FC = () => {
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Horizontal" />
 					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
-					<KolTableStateful
-						_label="Sort Table with Order and Date"
-						_minWidth="auto"
-						_data={BACKLOG_DATA}
-						_headers={horizontalHeader}
-						className="block"
-						_allowMultiSort={true}
-					/>
+					<KolTableStateful _label="Sort Table with Order and Date" _data={BACKLOG_DATA} _headers={horizontalHeader} className="block" _allowMultiSort={true} />
 				</section>
 			</section>
 		</>

package/src/components/table/non-hidable-columns.tsx

@@ -16,14 +16,13 @@ export const TableNonHidableColumns: FC = () => (
 
 		<KolTableStateful
 			_label="Table with a non-hidable column"
-			_minWidth="auto"
 			_hasSettingsMenu
 			_headers={{
 				horizontal: [
 					[
-						{ key: 'id', label: 'ID', hidable: false },
-						{ key: 'name', label: 'Name' },
-						{ key: 'age', label: 'Age' },
+						{ key: 'id', label: 'ID', hidable: false, width: 160 },
+						{ key: 'name', label: 'Name', width: 160 },
+						{ key: 'age', label: 'Age', width: 160 },
 					],
 				],
 			}}

package/src/components/table/pagination-position.tsx

@@ -13,8 +13,8 @@ import type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-u
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'Order', key: 'order' },
-			{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
+			{ label: 'Order', key: 'order', width: 160 },
+			{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
 		],
 	],
 };
@@ -31,7 +31,6 @@ export const PaginationPosition: FC = () => (
 				<KolHeading _level={2} _label="Table with pagination at the bottom."></KolHeading>
 				<KolTableStateful
 					_label="Sample table with pagination at the bottom"
-					_minWidth="auto"
 					_data={DATA}
 					_headers={HEADERS}
 					_pagination={PAGINATION}
@@ -42,7 +41,6 @@ export const PaginationPosition: FC = () => (
 				<KolHeading _level={2} _label="Table with pagination at the top."></KolHeading>
 				<KolTableStateful
 					_label="Sample table with pagination at the top"
-					_minWidth="auto"
 					_data={DATA}
 					_headers={HEADERS}
 					_pagination={PAGINATION}
@@ -53,7 +51,6 @@ export const PaginationPosition: FC = () => (
 				<KolHeading _level={2} _label="Table with pagination at both top and bottom."></KolHeading>
 				<KolTableStateful
 					_label="Sample table with pagination at both top and bottom"
-					_minWidth="auto"
 					_data={DATA}
 					_headers={HEADERS}
 					_pagination={PAGINATION}

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

@@ -18,14 +18,13 @@ export const PredefinedSettings: FC = () => {
 				_headers={{
 					horizontal: [
 						[
-							{ key: 'columnC', visible: true, label: 'Column C', width: '45ch' },
-							{ key: 'columnB', visible: true, label: 'Column B', width: '20ch' },
-							{ key: 'columnA', visible: false, label: 'Column A' },
+							{ key: 'columnC', visible: true, label: 'Column C', width: 450 },
+							{ key: 'columnB', visible: true, label: 'Column B', width: 200 },
+							{ key: 'columnA', visible: false, label: 'Column A', width: 160 },
 						],
 					],
 				}}
 				_data={DATA}
-				_minWidth="500px"
 				className="block"
 				style={{ maxWidth: '600px' }}
 			/>

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

@@ -7,7 +7,7 @@ import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
 
-import type { IconsPropType, KoliBriTableHeaders } from '@public-ui/components';
+import type { IconsPropType, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';
 import { useToasterService } from '../../hooks/useToasterService';
 
 type Data = {
@@ -50,41 +50,47 @@ const HEADERS: KoliBriTableHeaders = {
 				label: '#',
 				key: 'order',
 				textAlign: 'center',
-				width: '10em',
+				width: 100,
 
 				/* Example 1: Use render return value to format data */
-				render: (_el, cell) => `Index: ${cell.label}`,
+				render: (_el, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					return `Index: ${label}`;
+				},
 			},
 			{
 				label: 'Status',
 				key: 'shipped',
 				textAlign: 'center',
-				width: '10em',
+				width: 100,
 
 				/* Example 2: Simple render function using textContent */
-				render: (el, cell) => {
-					if (cell.label) {
-						el.textContent = `Order has been dispatched 🚚`;
+				render: (el, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					const element = el as HTMLElement;
+					if (label) {
+						element.textContent = `Order has been dispatched 🚚`;
 					} else {
-						el.textContent = `Order pending 📦`;
+						element.textContent = `Order pending 📦`;
 					}
 				},
 			},
 			{
 				label: 'Date (string)',
 				key: 'date',
-				width: '20em',
+				width: 200,
 				textAlign: 'center',
 
 				/* Example 3: Render function using innerHTML. ⚠️Make sure to sanitize data to avoid XSS. */
-				render: (el, cell) => {
-					el.innerHTML = `<strong>${DATE_FORMATTER.format(cell.label as unknown as Date)}</strong>`;
+				render: (el, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					(el as HTMLElement).innerHTML = `<strong>${DATE_FORMATTER.format(label as unknown as Date)}</strong>`;
 				},
 				compareFn: (data0, data1) => (data0 as Data).date.getTime() - (data1 as Data).date.getTime(),
 			},
 			{
 				label: 'Action (react)',
-				width: '20em',
+				width: 200,
 
 				/* Example 4: Render function using React */
 				render: (el) => {
@@ -114,6 +120,6 @@ export const TableRenderCell: FC = () => (
 			<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>
 		</SampleDescription>
 
-		<KolTableStateful _label="Sort by date column" _minWidth="auto" _data={DATA} _headers={HEADERS} className="w-full" />
+		<KolTableStateful _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
 	</>
 );

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

@@ -28,16 +28,15 @@ export const TableSettingsColumnOptions: FC = () => (
 
 		<KolTableStateful
 			_label="Table with column option restrictions"
-			_minWidth="auto"
 			_hasSettingsMenu
 			_headers={{
 				horizontal: [
 					[
-						{ key: 'id', label: 'ID', hidable: false, sortable: false, visible: true, width: '15ch' },
-						{ key: 'name', label: 'Name', visible: true, width: '30ch' },
-						{ key: 'team', label: 'Team', sortable: false, visible: true, width: '20ch' },
-						{ key: 'email', label: 'E-Mail', resizable: false, visible: true, width: '25ch' },
-						{ key: 'status', label: 'Status', hidable: false, resizable: false, visible: true, width: '10ch' },
+						{ key: 'id', label: 'ID', hidable: false, sortable: false, visible: true, width: 240 },
+						{ key: 'name', label: 'Name', visible: true, width: 480 },
+						{ key: 'team', label: 'Team', sortable: false, visible: true, width: 320 },
+						{ key: 'email', label: 'E-Mail', resizable: false, visible: true, width: 400 },
+						{ key: 'status', label: 'Status', hidable: false, resizable: false, visible: true, width: 160 },
 					],
 				],
 			}}

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

@@ -25,11 +25,12 @@ const compareByDate =
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'order', key: 'order', textAlign: 'center' },
+			{ label: 'order', key: 'order', textAlign: 'center', width: 160 },
 			{
 				label: 'date',
 				key: 'date',
 				textAlign: 'center',
+				width: 160,
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
 				compareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),
 			},
@@ -40,11 +41,12 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 const HEADERS_VERTICAL: KoliBriTableHeaders = {
 	vertical: [
 		[
-			{ label: 'order', key: 'order', textAlign: 'center' },
+			{ label: 'order', key: 'order', textAlign: 'center', width: 160 },
 			{
 				label: 'date',
 				key: 'date',
 				textAlign: 'center',
+				width: 160,
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
 				compareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),
 			},
@@ -61,11 +63,11 @@ export const TableSortData: FC = () => (
 		<section className="w-full grid gap-4">
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Vertical headers" />
-				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
+				<KolTableStateful _label="Sort a date column" _data={DATA.slice(0, 10)} _headers={HEADERS_VERTICAL} className="block" />
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Horizontal headers" />
-				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+				<KolTableStateful _label="Sort a date column" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 			</section>
 		</section>
 	</>

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

@@ -1,5 +1,4 @@
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
-import { KolEvent } from '@public-ui/components';
 import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
@@ -14,6 +13,11 @@ const DATA = [
 	{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },
 ];
 type Data = (typeof DATA)[0];
+type KolTableStatefulElement = {
+	addEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;
+	removeEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;
+	getSelection?: () => Promise<KoliBriTableDataType[] | null>;
+};
 
 function KolButtonWrapper({ label }: { label: string }) {
 	const { dummyClickEventHandler } = useToasterService();
@@ -37,7 +41,7 @@ export const TableStatefulWithSelection: FC = () => {
 
 	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);
 
-	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
+	const handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<Data[]>) => {
 		console.log('Selection change via event', selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
@@ -45,22 +49,25 @@ export const TableStatefulWithSelection: FC = () => {
 	};
 
 	const handleButtonClick = async () => {
-		const selection = await kolTableStatefulRef.current?.getSelection();
+		const tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;
+		const selection = await tableElement?.getSelection?.();
 		setSelectedValue(selection as Data[] | null);
 	};
 
 	useEffect(() => {
-		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+		const tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;
+		const selectionChangeEvent = 'kolSelectionChange';
+		tableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 
 		return () => {
-			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+			tableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatefulRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
+		const data = (cell as { data?: Data }).data;
+		const id = data?.id;
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);
 	};
 
 	return (
@@ -72,7 +79,6 @@ 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,5 +1,4 @@
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
-import { KolEvent } from '@public-ui/components';
 import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
@@ -13,6 +12,11 @@ const DATA = [
 ];
 
 type Data = (typeof DATA)[0];
+type KolTableStatefulElement = {
+	addEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;
+	removeEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;
+	getSelection?: () => Promise<KoliBriTableDataType[] | null>;
+};
 
 function KolButtonWrapper({ label }: { label: string }) {
 	const { dummyClickEventHandler } = useToasterService();
@@ -36,7 +40,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 
 	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);
 
-	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
+	const handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<Data[]>) => {
 		console.log('Selection change via event', selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
@@ -44,22 +48,25 @@ export const TableStatefulWithSingleSelection: FC = () => {
 	};
 
 	const handleButtonClick = async () => {
-		const selection = await kolTableStatefulRef.current?.getSelection();
+		const tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;
+		const selection = await tableElement?.getSelection?.();
 		setSelectedValue(selection as Data | null);
 	};
 
 	useEffect(() => {
-		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatefulRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+		const tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;
+		const selectionChangeEvent = 'kolSelectionChange';
+		tableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 
 		return () => {
-			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatefulRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+			tableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatefulRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
+		const data = (cell as { data?: Data }).data;
+		const id = data?.id;
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);
 	};
 
 	return (
@@ -71,7 +78,6 @@ 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,5 +1,4 @@
 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, useRef, useState } from 'react';
@@ -8,6 +7,10 @@ import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 
 type SelectionValue = string | number;
+type KolTableStatelessElement = {
+	addEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;
+	removeEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;
+};
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -39,7 +42,7 @@ export const TableStatelessWithSelection: FC = () => {
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
-	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
+	const handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<SelectionValue[]>) => {
 		console.log('Selection change via event', selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
@@ -48,17 +51,19 @@ export const TableStatelessWithSelection: FC = () => {
 	};
 
 	useEffect(() => {
-		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+		const tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;
+		const selectionChangeEvent = 'kolSelectionChange';
+		tableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 
 		return () => {
-			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+			tableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
+		const data = (cell as { data?: Data }).data;
+		const id = data?.id;
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);
 	};
 
 	return (
@@ -70,7 +75,6 @@ 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

@@ -45,7 +45,6 @@ export const TableStatelessWithSettingsMenu: FC = () => (
 
 		<KolTableStateless
 			_label="Users (stateless with settings menu)"
-			_minWidth="auto"
 			className="w-full"
 			_hasSettingsMenu={true}
 			_headerCells={{

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

@@ -1,5 +1,4 @@
 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, useRef, useState } from 'react';
@@ -8,6 +7,10 @@ import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 
 type SelectionValue = string | number;
+type KolTableStatelessElement = {
+	addEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;
+	removeEventListener: (type: string, listener: (event: CustomEvent<SelectionValue[]>) => void) => void;
+};
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -39,7 +42,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 
 	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>(null);
 
-	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
+	const handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<SelectionValue[]>) => {
 		console.log('Selection change via event', selection);
 	};
 	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
@@ -48,17 +51,19 @@ export const TableStatelessWithSingleSelection: FC = () => {
 	};
 
 	useEffect(() => {
-		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+		const tableElement = kolTableStatelessRef.current as unknown as KolTableStatelessElement | null;
+		const selectionChangeEvent = 'kolSelectionChange';
+		tableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 
 		return () => {
-			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
+			tableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
+		const data = (cell as { data?: Data }).data;
+		const id = data?.id;
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);
 	};
 
 	return (
@@ -70,7 +75,6 @@ export const TableStatelessWithSingleSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateless
 					_label="Table with selection checkboxes"
-					_minWidth="auto"
 					_headerCells={{
 						horizontal: [
 							[

package/src/components/table/stateless.tsx

@@ -14,7 +14,6 @@ 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

@@ -9,13 +9,13 @@ 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: 'Conservation status', key: 'conservation_status', textAlign: 'left' },
-			{ label: 'Habitat', key: 'habitat', textAlign: 'left' },
-			{ label: 'Diet', key: 'diet', textAlign: 'left' },
-			{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left' },
+			{ label: 'ID', key: 'id', textAlign: 'right', width: 160 },
+			{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },
+			{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },
+			{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },
+			{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160 },
+			{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160 },
+			{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160 },
 		],
 	],
 };
@@ -30,6 +30,6 @@ export const TableStickyHeader: FC = () => (
 		</SampleDescription>
 
 		<KolHeading _level={2} _label="Sticky headers" />
-		<KolTableStateful _label="Animal species overview" _minWidth="1200px" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+		<KolTableStateful _label="Animal species overview" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 	</>
 );

package/src/components/table/with-footer.tsx

@@ -12,33 +12,38 @@ export const TableWithFooter: FC = () => (
 		<KolTableStateful
 			className="w-full"
 			_label="Business hours"
-			_minWidth="auto"
 			_headers={{
 				horizontal: [
 					[
 						{
 							label: 'District',
 							key: 'asp',
+							width: 160,
 						},
 						{
 							label: 'Monday',
 							key: 'monday',
+							width: 160,
 						},
 						{
 							label: 'Tuesday',
 							key: 'tuesday',
+							width: 160,
 						},
 						{
 							label: 'Wednesday',
 							key: 'wednesday',
+							width: 160,
 						},
 						{
 							label: 'Thursday',
 							key: 'thursday',
+							width: 160,
 						},
 						{
 							label: 'Friday',
 							key: 'friday',
+							width: 160,
 						},
 					],
 				],

package/src/components/table/with-pagination.tsx

@@ -13,8 +13,8 @@ import type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-u
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'Order', key: 'order' },
-			{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
+			{ label: 'Order', key: 'order', width: 160 },
+			{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
 		],
 	],
 };
@@ -26,7 +26,7 @@ export const TableWithPagination: FC = () => (
 			<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div className="w-full">
-			<KolTableStateful _label="Table description" _minWidth="auto" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
+			<KolTableStateful _label="Table description" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
 		</div>
 	</>
 );