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

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>
 	</>
 );

package/src/scenarios/button-shortkey-table.tsx

@@ -81,18 +81,18 @@ export const ButtonShortkeyTable: FC = () => {
 					label: 'Label',
 					key: 'label',
 					textAlign: 'left',
+					width: 200,
 				},
 				{
 					label: 'Actions',
 					key: 'actions',
 					textAlign: 'left',
-
+					width: 150,
 					render: (el, cell) => {
 						const data = cell.data as Data | undefined;
 						if (!data?.label) {
 							return;
 						}
-
 						getRoot(createReactRenderElement(el)).render(<RowActions label={data.label} />);
 					},
 				},
@@ -120,7 +120,6 @@ export const ButtonShortkeyTable: FC = () => {
 						_label={`Interactive table with shortkey buttons in each row`}
 						_data={DATA}
 						_headers={HEADERS}
-						_minWidth="400px"
 						_pagination={{
 							_page: 1,
 						}}

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -32,26 +32,16 @@ const TABS: TabButtonProps[] = [
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ key: 'name', label: 'Name', textAlign: 'left', width: '400px' },
-			{ key: 'species', label: 'Species', textAlign: 'left', width: '400px' },
-			{ key: 'habitat', label: 'Habitat', textAlign: 'left', width: '400px' },
-			{ key: 'diet', label: 'Diet', textAlign: 'left', width: '400px' },
-			{ key: 'lifespan', label: 'lifespan', textAlign: 'right', width: '400px' },
+			{ key: 'name', label: 'Name', textAlign: 'left' },
+			{ key: 'species', label: 'Species', textAlign: 'left' },
+			{ key: 'habitat', label: 'Habitat', textAlign: 'left' },
+			{ key: 'diet', label: 'Diet', textAlign: 'left' },
+			{ key: 'lifespan', label: 'lifespan', textAlign: 'right' },
 		],
 	],
 };
 
 function TableHorizontalScrollbarAdvanced() {
-	const [tableWith] = React.useState(() => {
-		const columnDefinitions = HEADERS.horizontal![0];
-		let width = 0;
-
-		for (const def of columnDefinitions as { width: string }[]) {
-			width += parseFloat(def.width?.replace('px', '') || '0');
-		}
-		return `${width}px`;
-	});
-
 	return (
 		<>
 			<SampleDescription>
@@ -70,7 +60,6 @@ function TableHorizontalScrollbarAdvanced() {
 						<div style={{ overflow: 'hidden' }}>
 							<KolTableStateful
 								_label="Table for demonstration purposes with horizontal scrollbar"
-								_minWidth={tableWith}
 								_headers={HEADERS}
 								_data={DATA}
 								_pagination={{ _page: 1 }}

package/dist/assets/custom-class-B6h_ZSR7-NfdcDwAH.js

@@ -1,2 +0,0 @@
-import{q as t}from"./index-DGHHmQDJ.js";const o=(a,s)=>{t(a,"_customClass",s,{defaultValue:void 0})};export{o as v};
-//# sourceMappingURL=custom-class-B6h_ZSR7-NfdcDwAH.js.map

package/dist/assets/disabled-D0wfAqak-DbNVjYIY.js

@@ -1,2 +0,0 @@
-import{n as o,C as s}from"./index-DGHHmQDJ.js";const d=(a,t)=>{o(a,"_disabled",t,{hooks:{afterPatch:e=>{e===!0&&s()}}})};export{d as v};
-//# sourceMappingURL=disabled-D0wfAqak-DbNVjYIY.js.map

package/dist/assets/has-closer-OxGfsISj-DMhGRipo.js

@@ -1,2 +0,0 @@
-import{n as s}from"./index-DGHHmQDJ.js";const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-OxGfsISj-DMhGRipo.js.map

package/dist/assets/hide-label-90DGA8H4-_mHfl5St.js

@@ -1,2 +0,0 @@
-import{n as t}from"./index-DGHHmQDJ.js";const l=(a,e,o={})=>{t(a,"_hideLabel",e,o)};export{l as v};
-//# sourceMappingURL=hide-label-90DGA8H4-_mHfl5St.js.map

package/dist/assets/href-BDekIhFd-Bctc3ato.js

@@ -1,2 +0,0 @@
-import{q as e}from"./index-DGHHmQDJ.js";const f=(r,t,a={})=>{e(r,"_href",t,a)};export{f as v};
-//# sourceMappingURL=href-BDekIhFd-Bctc3ato.js.map

package/dist/assets/i18n-CvQhdUrE-6whOzijI.js

@@ -1,2 +0,0 @@
-import{Y as e,Z as i,M as s}from"./index-DGHHmQDJ.js";let r=(t,n)=>{var a;return((a=e())!==null&&a!==void 0?a:i("de")).translate(t,n)};s()&&(r=t=>t);export{r as t};
-//# sourceMappingURL=i18n-CvQhdUrE-6whOzijI.js.map