@public-ui/sample-react 3.0.0-rc.1 → 3.0.0-rc.10

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

@@ -1,17 +1,18 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable using vertical and horizontal headers, applying colspan and rowspan.</p>
+			<p>This sample shows KolTableStateful using vertical and horizontal headers, applying colspan and rowspan.</p>
 		</SampleDescription>
 
 		<section className="w-full flex flex-col">
-			<KolTable
+			<KolTableStateful
 				_label="Business hours"
+				_minWidth="auto"
 				_data={[
 					{
 						asp: 'Center',

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 
@@ -26,15 +26,15 @@ export const TableHorizontalScrollbar: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolTable with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table container and
-					to scroll it using arrow keys.
+					This sample shows KolTableStateful with and without horizontal scrollbars. When a scrollbar is present, it should be possible to focus the table
+					container and to scroll it using arrow keys.
 				</p>
 			</SampleDescription>
 
 			<section className="w-full flex flex-col gap-4">
 				<KolHeading _label="Table with scrollbar" _level={2} />
 
-				<KolTable
+				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar."
 					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
 					_headers={HEADERS}
@@ -45,7 +45,7 @@ export const TableHorizontalScrollbar: FC = () => {
 
 				<KolHeading _label="Empty Table with scrollbar" _level={3} />
 
-				<KolTable
+				<KolTableStateful
 					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
 					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
 					_headers={HEADERS}
@@ -70,7 +70,13 @@ export const TableHorizontalScrollbar: FC = () => {
 					<i>Scrollbar appears on very small viewport sizes</i>
 				</p>
 
-				<KolTable _label="Table for demonstration purposes without horizontal scrollbar" _minWidth="600px" _headers={HEADERS} _data={DATA} className="block" />
+				<KolTableStateful
+					_label="Table for demonstration purposes without horizontal scrollbar"
+					_minWidth="600px"
+					_headers={HEADERS}
+					_data={DATA}
+					className="block"
+				/>
 			</section>
 		</>
 	);

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

@@ -46,6 +46,7 @@ export const InteractiveChildElements: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateless
 				_label="Button styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
@@ -79,6 +80,7 @@ export const InteractiveChildElements: FC = () => (
 
 			<KolTableStateless
 				_label="Link styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react';
 import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
@@ -74,7 +74,7 @@ export const MultiSortTable: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolTable with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
+				<p>This sample shows KolTableStateful with multi-sort functionality, allowing sorting by both &quot;order&quot; and &quot;date&quot; columns.</p>
 			</SampleDescription>
 
 			<section className="w-full grid gap-4">
@@ -86,8 +86,9 @@ export const MultiSortTable: FC = () => {
 						_variant="switch"
 						_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}
 					></KolInputCheckbox>
-					<KolTable
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
+						_minWidth="auto"
 						_data={DATA.slice(0, 10)}
 						_headers={HEADERS_VERTICAL}
 						className="block"
@@ -102,8 +103,9 @@ export const MultiSortTable: FC = () => {
 						_variant="switch"
 						_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}
 					></KolInputCheckbox>
-					<KolTable
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
+						_minWidth="auto"
 						_data={DATA}
 						_headers={HEADERS_HORIZONTAL}
 						className="block"

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTable } from '@public-ui/react';
+import { KolHeading, KolTableStateful } from '@public-ui/react';
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
@@ -23,21 +23,42 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const PaginationPosition: FC = () => (
 	<div className="w-full grid gap-14">
 		<SampleDescription>
-			<p>This sample shows KolTable with different pagination positions.</p>
+			<p>This sample shows KolTableStateful with different pagination positions.</p>
 		</SampleDescription>
 
 		<section className="w-full flex flex-col gap-14">
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Table with pagination at the bottom."></KolHeading>
-				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="bottom"></KolTable>
+				<KolTableStateful
+					_label="Sample table with pagination at the bottom"
+					_minWidth="auto"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="bottom"
+				></KolTableStateful>
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Table with pagination at the top."></KolHeading>
-				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="top"></KolTable>
+				<KolTableStateful
+					_label="Sample table with pagination at the top"
+					_minWidth="auto"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="top"
+				></KolTableStateful>
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Table with pagination at both top and bottom."></KolHeading>
-				<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="both"></KolTable>
+				<KolTableStateful
+					_label="Sample table with pagination at both top and bottom"
+					_minWidth="auto"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="both"
+				></KolTableStateful>
 			</section>
 		</section>
 	</div>

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

@@ -0,0 +1,41 @@
+import { SampleDescription } from '../SampleDescription';
+import { KolTableStateful } from '@public-ui/react';
+import type { FC } from 'react';
+import React from 'react';
+
+const DATA = [{ columnA: 'Column A', columnB: 'Column B', columnC: 'Column C' }];
+
+export const PredefinedSettings: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example shows the table with predefined settings.</p>
+			</SampleDescription>
+
+			<KolTableStateful
+				_label="Table for demonstration purposes with predefined settings"
+				_minWidth="auto"
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'column A', key: 'columnA' },
+							{ label: 'column B', key: 'columnB' },
+							{ label: 'column C', key: 'columnC' },
+						],
+					],
+				}}
+				_tableSettings={{
+					columns: [
+						{ key: 'columnA', visible: false, label: 'Column A', position: 2 },
+						{ key: 'columnB', visible: true, label: 'Column B', position: 1, width: 20 },
+						{ key: 'columnC', visible: true, label: 'Column C', position: 0, width: 45 },
+					],
+				}}
+				_data={DATA}
+				_min-width="500px"
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
+		</>
+	);
+};

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

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

package/src/components/table/routes.ts

@@ -14,23 +14,25 @@ import { TableStatelessWithSingleSelection } from './stateless-with-single-selec
 import { TableWithPagination } from './with-pagination';
 import { InteractiveChildElements } from './interactive-child-elements';
 import { MultiSortTable } from './multi-sort';
+import { PredefinedSettings } from './predefined-settings';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'column-alignment': TableColumnAlignment,
 		'complex-headers': TableComplexHeaders,
 		'horizontal-scrollbar': TableHorizontalScrollbar,
+		'interactive-child-elements': InteractiveChildElements,
+		'multi-sort': MultiSortTable,
 		'pagination-position': PaginationPosition,
+		'predefined-settings': PredefinedSettings,
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
-		'with-footer': TableWithFooter,
 		'stateful-with-selection': TableStatefulWithSelection,
 		'stateful-with-single-selection': TableStatefulWithSingleSelection,
+		stateless: TableStateless,
 		'stateless-with-selection': TableStatelessWithSelection,
 		'stateless-with-single-selection': TableStatelessWithSingleSelection,
+		'with-footer': TableWithFooter,
 		'with-pagination': TableWithPagination,
-		'interactive-child-elements': InteractiveChildElements,
-		stateless: TableStateless,
-		'multi-sort': MultiSortTable,
 	},
 };

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

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

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

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

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

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

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

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

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

@@ -1,15 +1,16 @@
 import type { FC } from 'react';
-import React, { useEffect, useState, useRef } from 'react';
-import { KolButton, KolTableStateless, createReactRenderElement } from '@public-ui/react';
+import React, { useEffect, useRef, useState } from 'react';
+import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableSelection } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
+import { KolEvent } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
-import type { KoliBriTableCell } from '@public-ui/components';
 import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
 	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
+	{ id: '1003', name: 'Foo Disabled', internalIdentifier: `AAA1003` },
 ];
 type Data = (typeof DATA)[0];
 
@@ -30,6 +31,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 		label: (row) => `Selection for ${(row as Data).name}`,
 		multiple: false,
 		selectedKeys,
+		disabledKeys: ['AAA1003'],
 		keyPropertyName: 'internalIdentifier',
 	};
 
@@ -45,11 +47,11 @@ export const TableStatelessWithSingleSelection: FC = () => {
 
 	useEffect(() => {
 		// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+		kolTableStatelessRef.current?.addEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 
 		return () => {
 			// @ts-expect-error https://github.com/Microsoft/TypeScript/issues/28357
-			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+			kolTableStatelessRef.current?.removeEventListener(KolEvent.selectionChange, handleSelectionChangeEvent);
 		};
 	}, [kolTableStatelessRef]);
 
@@ -66,6 +68,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 			<section className="w-full">
 				<KolTableStateless
 					_label="Table with selection checkboxes"
+					_minWidth="auto"
 					_headerCells={{
 						horizontal: [
 							[

package/src/components/table/stateless.tsx

@@ -14,6 +14,7 @@ export const TableStateless: FC = () => (
 		<section className="w-full">
 			<KolTableStateless
 				_label="Table for demonstration purposes"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[

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

@@ -1,17 +1,18 @@
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows KolTable with footer data.</p>
+			<p>This sample shows KolTableStateful with footer data.</p>
 		</SampleDescription>
 
-		<KolTable
+		<KolTableStateful
 			className="w-full"
 			_label="Business hours"
+			_minWidth="auto"
 			_headers={{
 				horizontal: [
 					[

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

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolTable } from '@public-ui/react';
+import { KolTableStateful } from '@public-ui/react';
 
 import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
@@ -23,10 +23,10 @@ const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 export const TableWithPagination: FC = () => (
 	<>
 		<SampleDescription>
-			<p>This sample shows how KolTable can be navigated using a pagination.</p>
+			<p>This sample shows how KolTableStateful can be navigated using a pagination.</p>
 		</SampleDescription>
 		<div className="w-full">
-			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
+			<KolTableStateful _label="Table description" _minWidth="auto" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTableStateful>
 		</div>
 	</>
 );

package/src/components/textarea/partials/cases.tsx

@@ -1,14 +1,19 @@
 import React, { forwardRef } from 'react';
-
 import { KolTextarea } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
+			<div className="black-background">
+				<KolTextarea {...props} ref={ref} _placeholder="Placeholder" _label="Text" />
+			</div>
+			<KolTextarea {...props} _placeholder="Placeholder" _required _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched _hint={HINT_MSG} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />