@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.10

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

@@ -1,17 +1,18 @@
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTable } 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',
@@ -39,24 +40,34 @@ export const TableComplexHeaders: FC = () => (
 					},
 				]}
 				_headers={{
-					vertical: [[{ label: 'Berlin', rowSpan: 2 }, { label: 'München' }]],
-					horizontal: [
+					vertical: [
 						[
 							{
-								label: '',
-								colSpan: 7,
+								label: 'Berlin',
+								rowSpan: 2,
 							},
 							{
-								label: 'Weekend',
-								colSpan: 2,
+								label: 'München',
 							},
 						],
+					],
+					horizontal: [
 						[
-							{ label: '' },
 							{
 								label: 'District',
+								rowSpan: 2,
 								key: 'asp',
 							},
+							{
+								label: 'Workdays',
+								colSpan: 5,
+							},
+							{
+								label: 'Weekend',
+								colSpan: 2,
+							},
+						],
+						[
 							{
 								label: 'Monday',
 								key: 'monday',

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

@@ -0,0 +1,65 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+type TemperatureRow = {
+	city: string;
+	temperature: number;
+};
+
+const COMFORTABLE_TEMPERATURE = 22;
+
+const TEMPERATURE_DATA: TemperatureRow[] = [
+	{ city: 'Reykjavík', temperature: 6 },
+	{ city: 'Berlin', temperature: 21 },
+	{ city: 'Palma de Mallorca', temperature: 29 },
+	{ city: 'Cairo', temperature: 35 },
+	{ city: 'Helsinki', temperature: 14 },
+];
+
+const HEADERS: KoliBriTableHeaders = {
+	horizontal: [
+		[
+			{ label: 'City', key: 'city' },
+			{
+				label: 'Temperature (°C)',
+				key: 'temperature',
+				textAlign: 'right',
+				compareFn: (rowA, rowB, direction = 'ASC') => {
+					const temperatureA = (rowA as TemperatureRow).temperature;
+					const temperatureB = (rowB as TemperatureRow).temperature;
+					const differenceA = Math.abs(temperatureA - COMFORTABLE_TEMPERATURE);
+					const differenceB = Math.abs(temperatureB - COMFORTABLE_TEMPERATURE);
+
+					if (differenceA !== differenceB) {
+						return direction === 'DESC' ? differenceB - differenceA : differenceA - differenceB;
+					}
+
+					return direction === 'DESC' ? temperatureB - temperatureA : temperatureA - temperatureB;
+				},
+				render: (_element, _cell, row) => {
+					const difference = Math.abs((row as TemperatureRow).temperature - COMFORTABLE_TEMPERATURE);
+					return `${(row as TemperatureRow).temperature} °C (Δ ${difference} °C)`;
+				},
+			},
+		],
+	],
+};
+
+export const TableDirectionAwareSort: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample demonstrates how <code>compareFn</code> receives the current <code>sortDirection</code>. Ascending sorts show cities that are closest to
+				22&nbsp;°C first, descending sorts highlight the most extreme temperatures.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full">
+			<KolTableStateful _minWidth="100%" _label="Direction aware compare function" _data={TEMPERATURE_DATA} _headers={HEADERS} className="block" />
+		</section>
+	</>
+);

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

@@ -1,9 +1,12 @@
 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-v19';
 
 import { SampleDescription } from '../SampleDescription';
+import { DATE_FORMATTER } from './formatter';
+import type { Data } from './test-data';
+import { DATA as tableData } from './test-data';
 
 import type { KoliBriTableHeaders } from '@public-ui/components';
 
@@ -18,6 +21,7 @@ const HEADERS: KoliBriTableHeaders = {
 		],
 	],
 };
+const genericNonSorter = () => 0;
 
 export const TableHorizontalScrollbar: FC = () => {
 	const [hasWidthRestriction, setHasWidthRestriction] = useState(true);
@@ -26,33 +30,47 @@ 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
-					_label="Table for demonstration purposes with horizontal scrollbar."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
-					_headers={HEADERS}
-					_data={DATA}
-					className="block"
-					style={{ width: '400px' }}
-				/>
-
-				<KolHeading _label="Empty Table with scrollbar" _level={3} />
-
-				<KolTable
-					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
-					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
-					_headers={HEADERS}
-					_data={[]}
-					className="block"
-					style={{ width: '400px' }}
-				/>
+				<div className="w-[400px] flex flex-col gap-4">
+					<KolTableStateful
+						_label="Table for demonstration purposes with horizontal scrollbar."
+						_minWidth={hasWidthRestriction ? '600px' : '300px'}
+						_headers={HEADERS}
+						_data={DATA}
+						className="block"
+					/>
+					<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}
+						_data={[]}
+						className="block"
+					/>
+				</div>
 
 				<KolInputCheckbox
 					_checked={hasWidthRestriction}
@@ -70,7 +88,14 @@ 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"
+					_pagination
+				/>
 			</section>
 		</>
 	);

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

@@ -1,10 +1,10 @@
 import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
-import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
-import { useToasterService } from '../../hooks/useToasterService';
 
 function KolButtonWrapper({ _on, ...other }: ButtonProps) {
 	const { dummyClickEventHandler } = useToasterService();
@@ -46,10 +46,10 @@ export const InteractiveChildElements: FC = () => (
 		<section className="w-full flex flex-col">
 			<KolTableStateless
 				_label="Button styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
-							{ label: '', asTd: true, width: '20ex' },
 							getButtonHeaderCell('primary'),
 							getButtonHeaderCell('secondary'),
 							getButtonHeaderCell('normal'),
@@ -80,10 +80,10 @@ export const InteractiveChildElements: FC = () => (
 
 			<KolTableStateless
 				_label="Link styles"
+				_minWidth="auto"
 				_headerCells={{
 					horizontal: [
 						[
-							{ label: '', asTd: true, width: '20ex' },
 							{
 								key: 'regular',
 								label: 'Regular',

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

@@ -1,10 +1,8 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTable } from '@public-ui/react';
-import type { KoliBriTableHeaders, KoliBriTableDataType } from '@public-ui/components';
-import type { Data } from './test-data';
-import { DATA } from './test-data';
+import type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders } from '@public-ui/components';
+import { KolButtonLink, KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
@@ -13,101 +11,135 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	year: 'numeric',
 });
 
+type BacklogEntry = {
+	date: Date;
+	assignee: string;
+	department: string;
+	priority: 'High' | 'Medium' | 'Low';
+	status: 'Blocked' | 'In progress' | 'Ready';
+	openTickets: number;
+};
+
+const ASSIGNEES = ['Devon Chen', 'Fatima Alvi', 'Leon Köhler', 'Mila Schmidt', 'Sven Lindholm'];
+const DEPARTMENTS = ['Customer Service', 'Digital Services', 'Infrastructure', 'Municipal Office'];
+const PRIORITY_SEQUENCE: BacklogEntry['priority'][] = ['High', 'Medium', 'Low'];
+const STATUS_SEQUENCE: BacklogEntry['status'][] = ['Blocked', 'In progress', 'Ready'];
+
+const PRIORITY_ORDER = PRIORITY_SEQUENCE.reduce<Record<BacklogEntry['priority'], number>>(
+	(order, priority, index) => {
+		order[priority] = index;
+		return order;
+	},
+	{} as Record<BacklogEntry['priority'], number>,
+);
+
+const STATUS_ORDER = STATUS_SEQUENCE.reduce<Record<BacklogEntry['status'], number>>(
+	(order, status, index) => {
+		order[status] = index;
+		return order;
+	},
+	{} as Record<BacklogEntry['status'], number>,
+);
+
+const BACKLOG_DATA: BacklogEntry[] = Array.from({ length: 15 }).map((_, index) => ({
+	date: new Date(Date.now() - index * 1000 * 60 * 60 * 24),
+	assignee: ASSIGNEES[index % ASSIGNEES.length],
+	department: DEPARTMENTS[index % DEPARTMENTS.length],
+	priority: PRIORITY_SEQUENCE[index % PRIORITY_SEQUENCE.length],
+	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',
+	},
+	{
+		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],
+		sortDirection: 'DESC',
+	},
+	{
+		label: 'Status',
+		key: 'status',
+		textAlign: 'center',
+		compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+			STATUS_ORDER[(data0 as BacklogEntry).status] - STATUS_ORDER[(data1 as BacklogEntry).status],
+	},
+	{
+		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) => {
+			if ((data0 as BacklogEntry).date < (data1 as BacklogEntry).date) return -1;
+			else if ((data1 as BacklogEntry).date < (data0 as BacklogEntry).date) return 1;
+			else return 0;
+		},
+	},
+];
+
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
-	horizontal: [
-		[
-			{
-				label: 'order',
-				key: 'order',
-				textAlign: 'center',
-				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-					if ((data0 as Data).order < (data1 as Data).order) return -1;
-					else if ((data1 as Data).order < (data0 as Data).order) return 1;
-					else return 0;
-				},
-			},
-			{
-				label: 'date',
-				key: 'date',
-				textAlign: 'center',
-				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-					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;
-				},
-			},
-		],
-	],
+	horizontal: [TABLE_HEADER_CELLS],
 };
 
 const HEADERS_VERTICAL: KoliBriTableHeaders = {
-	vertical: [
-		[
-			{
-				label: 'order',
-				key: 'order',
-				textAlign: 'center',
-				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-					if ((data0 as Data).order < (data1 as Data).order) return -1;
-					else if ((data1 as Data).order < (data0 as Data).order) return 1;
-					else return 0;
-				},
-			},
-			{
-				label: 'date',
-				key: 'date',
-				textAlign: 'center',
-				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
-					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;
-				},
-			},
-		],
-	],
+	vertical: [TABLE_HEADER_CELLS],
 };
+
 export const MultiSortTable: FC = () => {
-	const [allowMultiSortVertical, setAllowMultiSortVertical] = useState(false);
-	const [allowMultiSortHorizontal, setAllowMultiSortHorizontal] = useState(true);
+	const [verticallHeader, setVerticalHeader] = useState(HEADERS_VERTICAL);
+	const [horizontalHeader, setHorizontalHeader] = useState(HEADERS_HORIZONTAL);
 	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>
+					Multi-sort allows layering multiple column sorts at once. Compare the compact examples with the project backlog showcase to see how the sort order
+					indicator helps track complex prioritisation.
+				</p>
 			</SampleDescription>
 
-			<section className="w-full grid gap-4">
+			<section className="w-full grid gap-6">
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Vertical" />
-					<KolInputCheckbox
-						_checked={allowMultiSortVertical}
-						_label="Allow Multi-Sort"
-						_variant="switch"
-						_on={{ onChange: (_, value) => setAllowMultiSortVertical(Boolean(value)) }}
-					></KolInputCheckbox>
-					<KolTable
+					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
-						_data={DATA.slice(0, 10)}
-						_headers={HEADERS_VERTICAL}
+						_minWidth="auto"
+						_data={BACKLOG_DATA.slice(0, 10)}
+						_headers={verticallHeader}
 						className="block"
-						_allowMultiSort={allowMultiSortVertical}
+						_allowMultiSort={true}
 					/>
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Horizontal" />
-					<KolInputCheckbox
-						_checked={allowMultiSortHorizontal}
-						_label="Allow Multi-Sort"
-						_variant="switch"
-						_on={{ onChange: (_, value) => setAllowMultiSortHorizontal(Boolean(value)) }}
-					></KolInputCheckbox>
-					<KolTable
+					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
+					<KolTableStateful
 						_label="Sort Table with Order and Date"
-						_data={DATA}
-						_headers={HEADERS_HORIZONTAL}
+						_minWidth="auto"
+						_data={BACKLOG_DATA}
+						_headers={horizontalHeader}
 						className="block"
-						_allowMultiSort={allowMultiSortHorizontal}
+						_allowMultiSort={true}
 					/>
 				</section>
 			</section>

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

@@ -0,0 +1,35 @@
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+const DATA = [
+	{ id: '1001', name: 'John', age: 30 },
+	{ id: '1002', name: 'Jane', age: 25 },
+];
+
+export const TableNonHidableColumns: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This example demonstrates a column that cannot be hidden in the settings.</p>
+		</SampleDescription>
+
+		<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' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+	</>
+);

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-v19';
 
 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,42 @@
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+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"
+				_hasSettingsMenu
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'column A', key: 'columnA' },
+							{ label: 'column B', key: 'columnB' },
+							{ label: 'column C', key: 'columnC' },
+						],
+					],
+				}}
+				_tableSettings={{
+					columns: [
+						{ key: 'columnC', visible: true, label: 'Column C', width: 45 },
+						{ key: 'columnB', visible: true, label: 'Column B', width: 20 },
+						{ key: 'columnA', visible: false, label: 'Column A' },
+					],
+				}}
+				_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-v19';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -80,11 +80,10 @@ 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',
 				width: '20em',
 
 				/* Example 4: Render function using React */
@@ -112,9 +111,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" />
 	</>
 );