@public-ui/sample-react 3.0.0-rc.6 → 3.0.0-rc.8

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.21.1
+ * @remix-run/router v1.23.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.28.2
+ * React Router v6.30.0
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "3.0.0-rc.6",
+  "version": "3.0.0-rc.8",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -13,20 +13,20 @@
     "@leanup/stack-webpack": "1.3.54",
     "@playwright/test": "1.49.1",
     "@stencil/core": "4.22.3",
-    "@types/node": "ts5.7",
+    "@types/node": "22.14.1",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.5",
-    "@typescript-eslint/eslint-plugin": "8.18.2",
-    "@typescript-eslint/parser": "8.18.2",
+    "@typescript-eslint/eslint-plugin": "8.27.0",
+    "@typescript-eslint/parser": "8.27.0",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
-    "adopted-style-sheets": "1.1.7",
+    "adopted-style-sheets": "1.1.8",
     "ajv": "8.17.1",
     "chromedriver": "130.0.4",
     "cpy-cli": "5.0.0",
     "cross-env": "7.0.3",
     "css-loader": "7.1.2",
-    "esbuild-loader": "4.2.2",
+    "esbuild-loader": "4.3.0",
     "eslint": "^8",
     "eslint-plugin-html": "8.1.2",
     "eslint-plugin-json": "^3",
@@ -34,34 +34,35 @@
     "eslint-plugin-react": "7.37.4",
     "file-loader": "6.2.0",
     "formik": "2.4.6",
-    "knip": "5.40.0",
+    "knip": "5.46.0",
     "less-loader": "12.2.0",
     "mini-css-extract-plugin": "2.9.2",
     "nightwatch-axe-verbose": "2.3.1",
     "npm-run-all2": "7.0.2",
     "postcss-loader": "8.1.1",
-    "prettier": "3.4.2",
+    "prettier": "3.5.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-number-format": "5.4.3",
-    "react-router": "6.28.2",
-    "react-router-dom": "6.28.2",
+    "react-router": "6.30.0",
+    "react-router-dom": "6.30.0",
     "rimraf": "6.0.1",
-    "sass-loader": "16.0.4",
+    "sass-loader": "16.0.5",
     "string-replace-loader": "3.1.0",
+    "stylelint": "16.17.0",
+    "stylelint-config-recommended-scss": "14.1.0",
+    "stylelint-config-standard": "37.0.0",
+    "stylelint-scss": "6.11.1",
     "tslib": "2.8.1",
-    "typescript": "5.7.3",
-    "webpack": "5.97.1",
+    "typescript": "5.8.2",
+    "webpack": "5.98.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "5.2.0",
     "world_countries_lists": "2.9.0",
-    "yup": "1.5.0",
-    "@public-ui/components": "3.0.0-rc.6",
-    "@public-ui/react": "3.0.0-rc.6",
-    "@public-ui/theme-default": "3.0.0-rc.6"
-  },
-  "optionalDependencies": {
-    "@public-ui-/theme-ecl": "2.1.3"
+    "yup": "1.6.1",
+    "@public-ui/components": "3.0.0-rc.8",
+    "@public-ui/themes": "3.0.0-rc.8",
+    "@public-ui/react": "3.0.0-rc.8"
   },
   "files": [
     ".eslintignore",
@@ -78,11 +79,14 @@
     "webpack.config.js"
   ],
   "scripts": {
-    "prebuild": "pnpm -r --filter=@public-ui/theme-* --filter @public-ui-/theme-* build",
+    "prebuild": "pnpm -r --filter=@public-ui/themes build",
     "build": "rimraf dist && cross-env NODE_ENV=production webpack",
     "build:deps": "pnpm --filter @public-ui/sample-react^... build",
     "format": "prettier --check src",
-    "lint": "tsc --noemit && eslint \"{src,tests,e2e}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+    "lint": "pnpm lint:eslint && pnpm lint:stylelint && pnpm lint:tsc",
+    "lint:eslint": "eslint src",
+    "lint:stylelint": "stylelint \"src/**/*.{css,scss}\"",
+    "lint:tsc": "tsc --noemit",
     "postinstall": "pnpm exec playwright install",
     "prepare:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
     "prepare:themes-assets": "cpy \"node_modules/@public-ui/theme-default/assets/**/*\" public/assets --dot",

package/src/components/SampleDescription.tsx

@@ -6,36 +6,48 @@ import { PUBLIC_CODE_COMPONENT_URL, PUBLIC_DOC_COMPONENT_URL } from '../shares/c
 import { KolLink } from '@public-ui/react';
 
 import { HideMenusContext } from '../shares/HideMenusContext';
-
-const getLocationPaths = () => {
-	return location.hash.split('/').slice(1);
-};
+import { useLocation } from 'react-router';
 
 export const SampleDescription: FC<PropsWithChildren> = (props) => {
 	const hideMenus = useContext(HideMenusContext);
+	const location = useLocation();
+	const paths = location.pathname.split('/').slice(1);
 
 	const docLink = useMemo(() => {
-		const paths = getLocationPaths();
 		return paths[0] === 'scenarios'
 			? null // Scenarios are not a component and hence have no documentation.
 			: `${PUBLIC_DOC_COMPONENT_URL}/${paths[0]}`;
 	}, [location.hash]);
 
 	const codeLink = useMemo(() => {
-		const paths = getLocationPaths();
 		return paths[0] === 'scenarios'
 			? null // Scenarios are not a component and hence have no documentation.
 			: `${PUBLIC_CODE_COMPONENT_URL}/${paths[0]}/${paths[1]}.tsx`;
 	}, [location.hash]);
 
-	return hideMenus ? null : (
-		<div className="flex justify-between mb-sm">
-			<div className="indented-text">{props.children}</div>
-			<div className="flex flex-wrap gap-2 shrink-0 ml">
-				{codeLink && <KolLink _href={codeLink} _label="Code" _target="_blank" />}
-				{docLink && <KolLink _href={docLink} _label="Documentation" _target="_blank" />}
-				<KolLink _href={`${location.href}?hideMenus`} _label="Standalone example" _target="_blank" />
-			</div>
-		</div>
+	return (
+		<>
+			<h1 className="visually-hidden">{location.pathname.replace(/\//g, ' ')}</h1>
+			{hideMenus ? null : (
+				<div className="grid sm:flex gap-4 justify-between pb-sm border-b-1 border-b-solid border-gray mb-2">
+					<div className="indented-text">{props.children}</div>
+					<ul className="flex flex-wrap gap-2 list-none m-0 p-0">
+						{codeLink && (
+							<li>
+								<KolLink _href={codeLink} _label="Code" _target="_blank" />
+							</li>
+						)}
+						{docLink && (
+							<li>
+								<KolLink _href={docLink} _label="Documentation" _target="_blank" />
+							</li>
+						)}
+						<li>
+							<KolLink _href={`#${location.pathname}?hideMenus`} _label="Standalone example" _target="_blank" />
+						</li>
+					</ul>
+				</div>
+			)}
+		</>
 	);
 };

package/src/components/Sidebar.tsx

@@ -7,6 +7,34 @@ import { THEME_OPTIONS } from '../shares/theme';
 
 import type { Routes } from '../shares/types';
 import Navigation from './Navigation';
+
+type BuildInformationProps = {
+	buildDate?: string | null;
+	commitHash?: string | null;
+};
+const BuildInformation: FC<BuildInformationProps> = ({ buildDate, commitHash }) => {
+	if (!buildDate && !commitHash) {
+		return '';
+	}
+
+	return (
+		<div className="text-sm font-mono color-gray-5 m-t-2">
+			{buildDate && commitHash ? ( // date and hash provided
+				<>
+					Build: {commitHash}
+					<br />
+					at {buildDate}
+				</>
+			) : commitHash ? ( // hash only
+				`Build: ${commitHash}`
+			) : (
+				// date only
+				`Build date: ${buildDate}`
+			)}
+		</div>
+	);
+};
+
 type Props = {
 	version: string;
 	theme: string;
@@ -47,16 +75,8 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 					<KolHeading _label="KoliBri React"></KolHeading>
 					<KolVersion _label={version}></KolVersion>
 				</div>
-				{(buildDate || commitHash) && (
-					<div className="text-sm font-mono color-gray-5 m-t-2">
-						{commitHash ? `Build: ${commitHash}` : ''}
-						<br />
-						{buildDate ? `at ${buildDate}` : ''}
-					</div>
-				)}
-
+				<BuildInformation buildDate={buildDate} commitHash={commitHash} />
 				<KolSelect _label="Theme" _options={THEME_OPTIONS} _on={{ onChange: handleThemeSelectChange }} _value={[theme]} class="mt"></KolSelect>
-
 				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
 				<div className="flex flex-justify-between flex-items-center mt">
 					<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
@@ -65,7 +85,6 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 					</span>
 					<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
 				</div>
-
 				<Navigation routes={routes} />
 			</div>
 		</aside>

package/src/components/badge/basic.tsx

@@ -11,7 +11,7 @@ export const BadgeBasic: FC = () => (
 			<p>KolBadge shows badges with a label, background color and optional icon.</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge _label="black"></KolBadge>
 			<KolBadge _color="#86ffc6" _label="teal"></KolBadge>
 			<KolBadge _color="#06539e" _label="blue"></KolBadge>

package/src/components/badge/button.tsx

@@ -23,7 +23,7 @@ export const BadgeButton: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="flex gap-2">
+		<div className="flex flex-wrap gap-2">
 			<KolBadge {...createBadgeProps('black')}></KolBadge>
 			<KolBadge _color="#86ffc6" {...createBadgeProps('teal')}></KolBadge>
 			<KolBadge _color="#06539e" {...createBadgeProps('blue')}></KolBadge>

package/src/components/button/baselined.tsx

@@ -19,7 +19,7 @@ export const ButtonBaselined: FC = () => {
 				<p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
 			</SampleDescription>
 
-			<div className="flex">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
 				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>

package/src/components/button/short-key.tsx

@@ -1,8 +1,61 @@
-import { KolButton } from '@public-ui/react';
-import React from 'react';
+import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react';
 import type { FC } from 'react';
+import { useRef } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { getRoot } from '../../shares/react-roots';
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
+
+const RowActions: FC<{ label: string }> = ({ label }) => {
+	const toaster = ToasterService.getInstance(document);
+	const editButtonRef = useRef<HTMLKolButtonElement | null>(null);
+	const deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);
+
+	const handleEditClick = () => {
+		toaster.enqueue({
+			label: 'Edit clicked',
+			description: `The button "edit" has been clicked for ${label}`,
+			type: 'info',
+		});
+	};
+
+	const handleDeleteClick = () => {
+		toaster.enqueue({
+			label: 'Delete clicked',
+			description: `The button "delete" has been clicked for ${label}`,
+			type: 'warning',
+		});
+	};
+
+	const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		switch (event.code) {
+			case 'KeyE':
+				void editButtonRef.current?.kolFocus();
+				handleEditClick();
+				return;
+			case 'KeyD':
+				void deleteButtonRef.current?.kolFocus();
+				handleDeleteClick();
+				return;
+		}
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			style={{
+				display: 'flex',
+				gap: 'calc(10rem / var(--kolibri-root-font-size, 16))',
+			}}
+			onKeyUp={handleKeyUp}
+		>
+			<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />
+			<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />
+		</div>
+	);
+};
 
 export const ButtonShortKey: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -11,11 +64,50 @@ export const ButtonShortKey: FC = () => {
 		onClick: dummyClickEventHandler,
 	};
 
+	type Data = {
+		label: string;
+	};
+	const DATA: Data[] = [
+		{
+			label: 'Row 1',
+		},
+		{
+			label: 'Row 2',
+		},
+	];
+
+	const HEADERS: KoliBriTableHeaders = {
+		horizontal: [
+			[
+				{
+					label: 'Label',
+					key: 'label',
+					textAlign: 'left',
+				},
+				{
+					label: 'Actions',
+					key: 'actions',
+					textAlign: 'left',
+
+					render: (el, cell) => {
+						getRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);
+					},
+				},
+			],
+		],
+	};
+
 	return (
 		<>
 			<SampleDescription>
 				<p>
-					This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+					The first sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed
+					separately.
+				</p>
+				<p>
+					The second sample showcases a table where each row contains two KolButtons, each with its own shortcut key. To trigger an action, move the focus to
+					any of the &quot;Actions&quot; cells and press &quot;e&quot; or &quot;d.&quot; Doing so will activate the corresponding action and display a Toast
+					notification for demonstration purposes.
 				</p>
 			</SampleDescription>
 
@@ -34,6 +126,15 @@ export const ButtonShortKey: FC = () => {
 					_on={dummyEventHandler}
 				/>
 			</div>
+
+			<KolHeading _level={2} _label="Interactive sample" className="mt" />
+
+			<KolTableStateful
+				_label={`Move focus within one of the "Actions" cells and press "e" or "d" to trigger an action.`}
+				_data={DATA}
+				_headers={HEADERS}
+				_minWidth="400px"
+			/>
 		</>
 	);
 };

package/src/components/drawer/basic.tsx

@@ -30,11 +30,13 @@ export const DrawerBasic: FC = () => {
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
 			<div className="flex flex-wrap gap-4">
 				<KolDrawer ref={drawerElement} _label="I am a drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
-					<p>
-						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-						voluptua.
-					</p>
-					<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+					<div className={align === 'left' || align == 'right' ? 'drawer-content-vertical' : ''}>
+						<p>
+							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+							voluptua.
+						</p>
+						<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+					</div>
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
 			</div>

package/src/components/handout/basic.tsx

@@ -190,7 +190,7 @@ export const HandoutBasic: FC = () => {
 
 	return (
 		<div className="grid gap-4">
-			<div className="grid gap-4 grid-cols-[auto_1fr_1fr] items-center">
+			<div className="grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center">
 				<KolKolibri className="block w-75px" _labeled={false}></KolKolibri>
 				<KolHeading _label="" _level={1}>
 					<span slot="expert">
@@ -441,7 +441,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Input" _level={2}>
 					<KolForm slot="">
-						<div className="grid gap-4 grid-cols-3 p-2">
+						<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2">
 							<KolInputColor _label={`Color`} />
 							<KolInputFile _label={`Upload file`} />
 							<KolInputNumber _label={`Number input`} />
@@ -460,7 +460,9 @@ export const HandoutBasic: FC = () => {
 							<div className="grid gap-4">
 								<KolInputRadio _orientation="horizontal" _options="[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]" _value="0" _label={`Salutation`} />
 								<KolInputCheckbox _label="">
-									I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									<span slot="expert">
+										I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									</span>
 								</KolInputCheckbox>
 							</div>
 							<KolTextarea _rows={4} _label={`Textarea`} />

package/src/components/icon/basic.tsx

@@ -12,8 +12,9 @@ export const IconBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block w-[1em] h-[1em]" _label="" _icons="codicon codicon-home" />
 			<KolIcon
+				className="block w-[1em] h-[1em]"
 				style={{
 					color: 'red',
 				}}

package/src/components/input-date/partials/cases.tsx

@@ -8,7 +8,7 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 	return (
 		<div className="grid gap-4">
 			<div className="black-background">
-				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />{' '}
+				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />
 			</div>
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
 			<KolInputDate

package/src/components/link/short-key.tsx

@@ -8,7 +8,7 @@ export const LinkShortKey: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.{' '}
+				This sample shows KolButton with short key without functionality. The short key is purely visual. Its functionality needs to be developed separately.
 			</p>
 		</SampleDescription>
 

package/src/components/link-button/aria-description.tsx

@@ -9,7 +9,7 @@ export const LinkButtonAriaDescription: FC = () => (
 			<p>This sample shows KolLinkButton with aria-description</p>
 		</SampleDescription>
 
-		<div className="flex flex-wrap gap-4">
+		<div className="flex flex-wrap gap-2">
 			<KolLinkButton _href="#/back-page" _label="Link Button Text without area description"></KolLinkButton>
 			<KolLinkButton _href="#/back-page" _label="Link Button Text" _ariaDescription="Link Button Area Description"></KolLinkButton>
 		</div>

package/src/components/link-button/basic.tsx

@@ -15,16 +15,14 @@ export const LinkButtonBasic: FC = () => (
 			<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>
 		</SampleDescription>
 
-		<div className="grid gap-14">
-			<div className="flex flex-wrap gap-14">
-				<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
-				<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
-			</div>
+		<div className="flex flex-wrap gap-2">
+			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
+			<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
 		</div>
 	</>
 );

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

@@ -9,9 +9,8 @@ import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
-		label: 'No choice',
+		label: 'No salutation',
 		value: '',
-		disabled: true,
 	},
 	{
 		label: 'Mrs.',
@@ -27,6 +26,10 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
+const SALUTATION_OPTIONS_DISABLED = SALUTATION_OPTIONS.map((option, index) =>
+	index === 0 ? { label: 'Select salutation', value: '', disabled: true } : option,
+);
+
 type GroupedOptionsType = Record<string, Optgroup<StencilUnknown>>;
 
 const groupedOptions: GroupedOptionsType = COUNTRY_OPTIONS.reduce((acc, option) => {
@@ -59,7 +62,7 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS_DISABLED} _label="Salutation with error" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Multiple choice" _multiple />
 			<KolSelect
 				{...props}

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

@@ -84,7 +84,7 @@ const HEADERS: KoliBriTableHeaders = {
 			},
 			{
 				label: 'Action (react)',
-				key: 'order',
+				key: 'action',
 				width: '20em',
 
 				/* Example 4: Render function using React */

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

@@ -59,11 +59,11 @@ export const TableSortData: FC = () => (
 
 		<section className="w-full grid gap-4">
 			<section className="grid gap-4">
-				<KolHeading _level={2} _label="Vertical" />
+				<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" />
+				<KolHeading _level={2} _label="Horizontal headers" />
 				<KolTableStateful _label="Sort a date column" _minWidth="auto" _data={DATA} _headers={HEADERS_HORIZONTAL} className="block" />
 			</section>
 		</section>