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

package/src/components/handout/basic.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';
+import type { ButtonProps, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';
 import {
 	KolAbbr,
 	KolAccordion,
@@ -56,22 +56,21 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				label: 'Workdays',
 				colSpan: 5,
+				width: 500,
 			},
 			{
 				label: 'Weekend',
 				colSpan: 2,
+				width: 200,
 			},
 		],
 		[
 			{
 				key: 'monday',
 				label: 'Monday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolButtonWrapper _label={label} style={{ fontSize: '75%' }} />);
 				},
 				compareFn: (first, second) => {
 					if ((first as TableDataType).monday < (second as TableDataType).monday) {
@@ -84,17 +83,14 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'tuesday',
 				label: 'Tuesday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#060" _label={label}></KolBadge>);
 				},
 				compareFn: (first, second) => {
 					if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
@@ -106,67 +102,52 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					return 0;
 				},
 				sortDirection: 'DESC',
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'wednesday',
 				label: 'Wednesday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#006" _label={label}></KolBadge>);
 				},
-				width: '110px',
+				width: 110,
 			},
 			{
 				key: 'thursday',
 				label: 'Thursday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#600" _label={label}></KolBadge>);
 				},
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'friday',
 				label: 'Friday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#303" _label={label}></KolBadge>);
 				},
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'saturday',
 				label: 'Saturday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#330" _label={label}></KolBadge>);
 				},
-				width: '100px',
+				width: 100,
 			},
 			{
 				key: 'sunday',
 				label: 'Sunday',
-				render: (el, cell) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
+				render: (el: HTMLElement, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					renderCellContent(el, <KolBadge _color="#033" _label={label}></KolBadge>);
 				},
-				width: '100px',
+				width: 100,
 			},
 		],
 	],
@@ -174,20 +155,32 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 		[
 			{
 				label: 'Early',
+				width: 100,
 			},
 			{
 				label: 'Noon',
+				width: 100,
 			},
 			{
 				label: 'Evening',
+				width: 100,
 			},
 			{
 				label: 'Night',
+				width: 100,
 			},
 		],
 	],
 };
 
+const renderCellContent = (element: HTMLElement, content: React.ReactNode) => {
+	const renderElement = document.createElement('div');
+	renderElement.setAttribute('role', 'presentation');
+	element.innerHTML = '';
+	element.appendChild(renderElement);
+	getRoot(renderElement).render(content);
+};
+
 export const HandoutBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
 
@@ -471,8 +464,8 @@ export const HandoutBasic: FC = () => {
 					</KolForm>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
-					<div slot="" className="grid gap-2 p-2 flex">
-						<KolTableStateful _label="Table" _minWidth="800px" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
+					<div slot="" className="gap-2 p-2 flex flex-col">
+						<KolTableStateful _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

package/src/components/table/column-alignment.tsx

@@ -18,13 +18,12 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Simple table" _level={3}></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with different text align properties"
-				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left' },
-							{ label: 'center', key: 'center', textAlign: 'center' },
-							{ label: 'right', key: 'right', textAlign: 'right' },
+							{ label: 'left', key: 'left', textAlign: 'left', width: 160 },
+							{ label: 'center', key: 'center', textAlign: 'center', width: 160 },
+							{ label: 'right', key: 'right', textAlign: 'right', width: 160 },
 						],
 					],
 				}}
@@ -36,13 +35,12 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with sortable columns"
-				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },
-							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },
-							{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter },
+							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },
+							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },
+							{ label: 'right', key: 'right', textAlign: 'right', compareFn: genericNonSorter, width: 160 },
 						],
 					],
 				}}
@@ -54,13 +52,12 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with some but not all columns sortable"
-				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter },
-							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter },
-							{ label: 'right', key: 'right', textAlign: 'right' },
+							{ label: 'left', key: 'left', textAlign: 'left', compareFn: genericNonSorter, width: 160 },
+							{ label: 'center', key: 'center', textAlign: 'center', compareFn: genericNonSorter, width: 160 },
+							{ label: 'right', key: 'right', textAlign: 'right', width: 160 },
 						],
 					],
 				}}
@@ -72,16 +69,15 @@ export const TableColumnAlignment: FC = () => (
 			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
 			<KolTableStateful
 				_label="Table for demonstration purposes with vertical heading"
-				_minWidth="auto"
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'left', key: 'left', textAlign: 'left' },
-							{ label: 'center', key: 'center', textAlign: 'center' },
-							{ label: 'right', key: 'right', textAlign: 'right' },
+							{ label: 'left', key: 'left', textAlign: 'left', width: 160 },
+							{ label: 'center', key: 'center', textAlign: 'center', width: 160 },
+							{ label: 'right', key: 'right', textAlign: 'right', width: 160 },
 						],
 					],
-					vertical: [[{ label: 'Vertical' }]],
+					vertical: [[{ label: 'Vertical', width: 160 }]],
 				}}
 				_data={DATA}
 				className="block"

package/src/components/table/complex-headers.tsx

@@ -12,7 +12,6 @@ export const TableComplexHeaders: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateful
 				_label="Business hours"
-				_minWidth="auto"
 				_data={[
 					{
 						asp: 'Center',
@@ -21,6 +20,8 @@ export const TableComplexHeaders: FC = () => (
 						wednesday: '10:00',
 						thursday: '11:00',
 						friday: '08:00',
+						saturday: '09:00',
+						sunday: '10:00',
 					},
 					{
 						asp: 'Tiergarten',
@@ -29,6 +30,8 @@ export const TableComplexHeaders: FC = () => (
 						wednesday: '10:00',
 						thursday: '11:00',
 						friday: '08:00',
+						saturday: '09:00',
+						sunday: '10:00',
 					},
 					{
 						asp: 'Maxvorstadt',
@@ -37,6 +40,8 @@ export const TableComplexHeaders: FC = () => (
 						wednesday: '10:00',
 						thursday: '11:00',
 						friday: '08:00',
+						saturday: '09:00',
+						sunday: '10:00',
 					},
 				]}
 				_headers={{
@@ -45,9 +50,11 @@ export const TableComplexHeaders: FC = () => (
 							{
 								label: 'Berlin',
 								rowSpan: 2,
+								width: 100,
 							},
 							{
 								label: 'München',
+								width: 100,
 							},
 						],
 					],
@@ -57,44 +64,64 @@ export const TableComplexHeaders: FC = () => (
 								label: 'District',
 								rowSpan: 2,
 								key: 'asp',
+								width: 120,
+								textAlign: 'center',
 							},
 							{
 								label: 'Workdays',
 								colSpan: 5,
+								width: 580,
+								textAlign: 'center',
 							},
 							{
 								label: 'Weekend',
 								colSpan: 2,
+								width: 200,
+								textAlign: 'center',
 							},
 						],
 						[
 							{
 								label: 'Monday',
 								key: 'monday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Tuesday',
 								key: 'tuesday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Wednesday',
 								key: 'wednesday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Thursday',
 								key: 'thursday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Friday',
 								key: 'friday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Saturday',
 								key: 'saturday',
+								width: 50,
+								textAlign: 'center',
 							},
 							{
 								label: 'Sunday',
 								key: 'sunday',
+								width: 50,
+								textAlign: 'center',
 							},
 						],
 					],

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

@@ -23,11 +23,12 @@ const TEMPERATURE_DATA: TemperatureRow[] = [
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'City', key: 'city' },
+			{ label: 'City', key: 'city', width: 160 },
 			{
 				label: 'Temperature (°C)',
 				key: 'temperature',
 				textAlign: 'right',
+				width: 160,
 				compareFn: (rowA, rowB, direction = 'ASC') => {
 					const temperatureA = (rowA as TemperatureRow).temperature;
 					const temperatureB = (rowB as TemperatureRow).temperature;
@@ -59,7 +60,7 @@ export const TableDirectionAwareSort: FC = () => (
 		</SampleDescription>
 
 		<section className="w-full">
-			<KolTableStateful _minWidth="100%" _label="Direction aware compare function" _data={TEMPERATURE_DATA} _headers={HEADERS} className="block" />
+			<KolTableStateful _label="Direction aware compare function" _data={TEMPERATURE_DATA} _headers={HEADERS} className="block" />
 		</section>
 	</>
 );

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 },
 					],
 				],
 			}}