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

package/src/components/table/horizontal-scrollbar.tsx

@@ -14,14 +14,37 @@ const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
-			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },
-			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
-			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
+			{ label: 'Small Column', key: 'small', textAlign: 'left', width: 200 },
+			{ label: 'Large Column', key: 'large', textAlign: 'left', width: 300 },
+			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 400 },
+			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 400 },
+		],
+	],
+};
+const COMPACT_HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Small Column', key: 'small', textAlign: 'left', width: 160 },
+			{ label: 'Large Column', key: 'large', textAlign: 'left', width: 160 },
+			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: 160 },
 		],
 	],
 };
 const genericNonSorter = () => 0;
+const ORDER_HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'Order', key: 'order', width: 160 },
+			{
+				label: 'Date',
+				key: 'date',
+				width: 160,
+				compareFn: genericNonSorter,
+				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date),
+			},
+		],
+	],
+};
 
 export const TableHorizontalScrollbar: FC = () => {
 	const [hasWidthRestriction, setHasWidthRestriction] = useState(true);
@@ -39,34 +62,14 @@ export const TableHorizontalScrollbar: FC = () => {
 				<div className="w-[400px] flex flex-col gap-4">
 					<KolTableStateful
 						_label="Table for demonstration purposes with horizontal scrollbar."
-						_minWidth={hasWidthRestriction ? '600px' : '300px'}
-						_headers={HEADERS}
+						_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}
 						_data={DATA}
 						className="block"
 					/>
+					<KolTableStateful _label="Table for demonstration horizontal scrolling with pagination." _headers={ORDER_HEADERS} _data={tableData} _pagination />
 					<KolTableStateful
-						_label="Table for demonstration horizontal scrolling with pagination."
-						_minWidth={hasWidthRestriction ? '600px' : '300px'}
-						_headers={{
-							horizontal: [
-								[
-									{ label: 'Order', key: 'order' },
-									{
-										label: 'Date',
-										key: 'date',
-										compareFn: genericNonSorter,
-										render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date),
-									},
-								],
-							],
-						}}
-						_data={tableData}
-						_pagination
-					/>
-					<KolTableStateful
-						_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-						_minWidth={hasWidthRestriction ? '600px' : '300px'}
-						_headers={HEADERS}
+						_label="Table for demonstration purposes with horizontal scrollbar with auto width calculation."
+						_headers={hasWidthRestriction ? HEADERS : COMPACT_HEADERS}
 						_data={[]}
 						className="block"
 					/>
@@ -90,7 +93,6 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolTableStateful
 					_label="Table for demonstration purposes without horizontal scrollbar"
-					_minWidth="600px"
 					_headers={HEADERS}
 					_data={DATA}
 					className="block"

package/src/components/table/interactive-child-elements.tsx

@@ -17,19 +17,22 @@ function KolButtonWrapper({ _on, ...other }: ButtonProps) {
 }
 
 const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {
-	const capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);
+	const variantLabel = `${variant}`;
+	const capitalizedVariant = variantLabel.charAt(0).toUpperCase() + variantLabel.slice(1);
 	return {
 		label: capitalizedVariant,
-		key: variant,
+		key: variantLabel,
 		textAlign: 'left',
+		width: 160,
 		render: (element: HTMLElement, cell: KoliBriTableCell) => {
+			const { label } = cell as { label: string };
 			const commonProps = {
 				_label: capitalizedVariant,
 				_variant: variant,
 				_icons: { right: 'kolicon-kolibri' },
 			};
 			getRoot(createReactRenderElement(element)).render(
-				cell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
+				label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
 			);
 		},
 	};
@@ -46,7 +49,6 @@ export const InteractiveChildElements: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateless
 				_label="Button styles"
-				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
@@ -57,7 +59,12 @@ export const InteractiveChildElements: FC = () => (
 							getButtonHeaderCell('ghost'),
 						],
 					],
-					vertical: [[{ label: 'Button' }, { label: 'Link-Button' }]],
+					vertical: [
+						[
+							{ label: 'Button', width: 120 },
+							{ label: 'Link-Button', width: 120 },
+						],
+					],
 				}}
 				_data={[
 					{
@@ -80,7 +87,6 @@ export const InteractiveChildElements: FC = () => (
 
 			<KolTableStateless
 				_label="Link styles"
-				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
@@ -88,19 +94,26 @@ export const InteractiveChildElements: FC = () => (
 								key: 'regular',
 								label: 'Regular',
 								textAlign: 'left',
+								width: 180,
 								render: (element: HTMLElement, cell: KoliBriTableCell) => {
+									const { label } = cell as { label: string };
 									const commonProps = {
-										_label: cell.label,
+										_label: label,
 										_icons: { right: 'kolicon-kolibri' },
 									};
 									getRoot(createReactRenderElement(element)).render(
-										cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,
+										label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,
 									);
 								},
 							},
 						],
 					],
-					vertical: [[{ label: 'Link' }, { label: 'Button-Link' }]],
+					vertical: [
+						[
+							{ label: 'Link', width: 140 },
+							{ label: 'Button-Link', width: 140 },
+						],
+					],
 				}}
 				_data={[
 					{

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={{