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

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

@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { KoliBriTableDataType, KoliBriTableHeaders } from '@public-ui/components';
 import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
-import type { KoliBriTableHeaders } from '@public-ui/components';
+import { SampleDescription } from '../SampleDescription';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
-import { SampleDescription } from '../SampleDescription';
 
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',
@@ -13,6 +13,15 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	year: 'numeric',
 });
 
+const compareByDate =
+	(sortDirection = 'ASC') =>
+	(data0: KoliBriTableDataType, data1: KoliBriTableDataType) => {
+		const first = (data0 as Data).date.getTime();
+		const second = (data1 as Data).date.getTime();
+		const result = first - second;
+		return sortDirection === 'DESC' ? -result : result;
+	};
+
 const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -22,11 +31,7 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				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;
-				},
+				compareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),
 			},
 		],
 	],
@@ -41,11 +46,7 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
-				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;
-				},
+				compareFn: (data0, data1, direction) => compareByDate(direction)(data0, data1),
 			},
 		],
 	],

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

@@ -1,11 +1,11 @@
-import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -40,7 +40,7 @@ export const TableStatefulWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
 		console.log('Selection change via callback', selection);
 	};
 

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

@@ -1,11 +1,11 @@
-import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { KolEvent } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
+import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -39,7 +39,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | string | null) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
 		console.log('Selection change via callback', selection);
 	};
 

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

@@ -1,11 +1,13 @@
+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';
-import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
-import { KolEvent } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
+
+type SelectionValue = string | number;
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -26,7 +28,7 @@ function KolButtonWrapper({ label }: { label: string }) {
 }
 
 export const TableStatelessWithSelection: FC = () => {
-	const [selectedKeys, setSelectedKeys] = useState(['AAA1002', 'AAA1004']);
+	const [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['AAA1002', 'AAA1004']);
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
@@ -40,9 +42,9 @@ export const TableStatelessWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
 		console.log('Selection change via callback', selection);
-		setSelectedKeys(typeof selection === 'string' ? [selection] : selection);
+		setSelectedKeys(selection);
 	};
 
 	useEffect(() => {

package/src/components/table/stateless-with-settings-menu.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 type Data = {
@@ -22,8 +22,25 @@ export const TableStatelessWithSettingsMenu: FC = () => (
 		<SampleDescription>
 			<p>
 				This sample shows <code>KolTableStateless</code> with the settings menu enabled via
-				<code>_hasSettingsMenu</code>.
+				<code>_hasSettingsMenu</code>. Each column demonstrates a different combination of sorting and resizing options.
 			</p>
+			<ul>
+				<li>
+					<strong>ID</strong> keeps a fixed width with <code>resizable: false</code> while still allowing sorting.
+				</li>
+				<li>
+					<strong>Name</strong> represents the default behavior with both sorting and resizing enabled.
+				</li>
+				<li>
+					<strong>Role</strong> disables sorting but keeps <code>resizable: true</code> so users can widen the column if necessary.
+				</li>
+				<li>
+					<strong>E-Mail</strong> allows sorting but locks its width with <code>resizable: false</code> to keep the layout stable.
+				</li>
+				<li>
+					<strong>Active</strong> is neither sortable nor resizable to emphasise the status indicator.
+				</li>
+			</ul>
 		</SampleDescription>
 
 		<KolTableStateless
@@ -34,11 +51,46 @@ export const TableStatelessWithSettingsMenu: FC = () => (
 			_headerCells={{
 				horizontal: [
 					[
-						{ key: 'id', label: 'ID', textAlign: 'center' },
-						{ key: 'name', label: 'Name', textAlign: 'center' },
-						{ key: 'role', label: 'Role', textAlign: 'center' },
-						{ key: 'email', label: 'E-Mail', textAlign: 'center' },
-						{ key: 'active', label: 'Active', textAlign: 'center' },
+						{
+							key: 'id',
+							label: 'ID',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: false,
+						},
+						{
+							key: 'name',
+							label: 'Name',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: true,
+						},
+						{
+							key: 'role',
+							label: 'Role',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: false,
+							resizable: true,
+						},
+						{
+							key: 'email',
+							label: 'E-Mail',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: false,
+						},
+						{
+							key: 'active',
+							label: 'Active',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: false,
+							resizable: false,
+						},
 					],
 				],
 			}}

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

@@ -1,11 +1,13 @@
+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';
-import { createReactRenderElement, KolButton, KolTableStateless } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
-import type { KoliBriTableCell, KoliBriTableSelection } from '@public-ui/components';
-import { KolEvent } from '@public-ui/components';
-import { getRoot } from '../../shares/react-roots';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
+
+type SelectionValue = string | number;
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -25,7 +27,7 @@ function KolButtonWrapper({ label }: { label: string }) {
 }
 
 export const TableStatelessWithSingleSelection: FC = () => {
-	const [selectedKeys, setSelectedKeys] = useState(['1002']);
+	const [selectedKeys, setSelectedKeys] = useState<KoliBriTableSelectionKeys>(['1002']);
 
 	const selection: KoliBriTableSelection = {
 		label: (row) => `Selection for ${(row as Data).name}`,
@@ -40,9 +42,9 @@ export const TableStatelessWithSingleSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: string[] | string) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
 		console.log('Selection change via callback', selection);
-		setSelectedKeys(typeof selection === 'string' ? [selection] : selection);
+		setSelectedKeys(selection);
 	};
 
 	useEffect(() => {

package/src/components/table/stateless.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateless } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateless } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }, {}, {}, {}];

package/src/components/table/sticky-header.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders } from '@public-ui/components';
+import { KolHeading, KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 import { COMPLEX_DATA } from './test-complex-data';
 
@@ -10,14 +10,12 @@ 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: 'EMail', key: 'email', textAlign: 'left' },
-			{ label: 'IP Address', key: 'ip_address', textAlign: 'center' },
-			{ label: 'User Name', key: 'user_name', textAlign: 'left' },
-			{ label: 'Bitcoin Address', key: 'bitcoin_address', textAlign: 'center' },
-			{ label: 'Street Address', key: 'street_address', textAlign: 'center' },
-			{ label: 'IBAN', key: 'iban', textAlign: 'left' },
+			{ 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' },
 		],
 	],
 };
@@ -27,11 +25,11 @@ export const TableStickyHeader: FC = () => (
 		<SampleDescription>
 			<p>
 				This sample shows KolTableStateful with horizontal and vertical scrollbars. It should be focusable and scrollable with the keyboard. The table headline
-				should be sticky at the top of the table.
+				should be sticky at the top of the table. The data now lists animal species with conservation-focused details.
 			</p>
 		</SampleDescription>
 
 		<KolHeading _level={2} _label="Sticky headers" />
-		<KolTableStateful _label="Sort a date column" _minWidth="1800px" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
+		<KolTableStateful _label="Animal species overview" _minWidth="1200px" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 	</>
 );