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

package/src/components/popover-button/inline.tsx

@@ -0,0 +1,36 @@
+import { KolHeading, KolPopoverButton } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const PopoverButtonInline: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					A PopoverButton inline with some dummy text. Here the PopoverButton has the height of the surrounding text. As statet in
+					<a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Understanding SC 2.5.5</a> target size of a help icon in text can be smaller
+					than 44px by 44px.
+				</p>
+			</SampleDescription>
+			<div className="flex flex-col gap-4">
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+					<KolPopoverButton _inline={true} _label="Help" _icons="fa-solid fa-circle-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+						<div className="w-sm p-2 border border-solid border-gray">
+							<KolHeading _label="Help Information" _level={0}></KolHeading>
+							<p>
+								<u>Lorem ipsum dolor sit amet</u>, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+								Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+							</p>
+						</div>
+					</KolPopoverButton>
+					<br />
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
+					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
+				</p>
+			</div>
+		</>
+	);
+};

package/src/components/popover-button/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { PopoverButtonBasic } from './basic';
+import { PopoverButtonInline } from './inline';
 
 export const POPOVER_BUTTON_ROUTES: Routes = {
 	'popover-button': {
 		basic: PopoverButtonBasic,
+		inline: PopoverButtonInline,
 	},
 };

package/src/components/select/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { SelectVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { SelectVariants } from './partials/variants';
 
 export const SelectBasic: FC = () => (
 	<>

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

@@ -54,10 +54,10 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				_label="Salutation"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'kolicon-chevron-left',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'kolicon-chevron-right',
 					},
 				}}
 			/>

package/src/components/single-select/basic.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
 import { FormWrap } from '../FormWrap';
 import { SampleDescription } from '../SampleDescription';
 import { SingleSelectVariants } from './partials/variants';

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

@@ -4,9 +4,8 @@ import { KolSingleSelect } from '@public-ui/react-v19';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Option, StencilUnknown } from '@public-ui/components';
+import type { Components, Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
-import type { Components } from '@public-ui/components';
 import { LONG_OPTIONS } from '../../../shares/longOptions';
 
 export const SingleSelectCases = (props: Components.KolSingleSelect) => {
@@ -40,7 +39,100 @@ export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
 			<KolSingleSelect {...props} _label="With long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
-			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
+			<KolSingleSelect
+				{...props}
+				_label="With hidden clear button"
+				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+				_value={'de'}
+				_hasClearButton={false}
+			/>
+			<KolSingleSelect
+				{...props}
+				_hint={HINT_MSG}
+				_label="With disabled options"
+				_options={
+					[
+						{
+							value: 'bw',
+							label: 'Baden-Württemberg',
+						},
+						{
+							value: 'by',
+							label: 'Bayern',
+							disabled: true,
+						},
+						{
+							value: 'be',
+							label: 'Berlin',
+						},
+						{
+							value: 'bb',
+							label: 'Brandenburg',
+						},
+						{
+							value: 'hb',
+							label: 'Bremen',
+						},
+						{
+							value: 'hh',
+							label: 'Hamburg',
+						},
+						{
+							value: 'he',
+							label: 'Hessen',
+						},
+						{
+							value: 'mv',
+							label: 'Mecklenburg-Vorpommern',
+							disabled: true,
+						},
+						{
+							value: 'ni',
+							label: 'Niedersachsen',
+							disabled: true,
+						},
+						{
+							value: 'nw',
+							label: 'Nordrhein-Westfalen',
+						},
+						{
+							value: 'rp',
+							label: 'Rheinland-Pfalz',
+							disabled: true,
+						},
+						{
+							value: 'sl',
+							label: 'Saarland',
+						},
+						{
+							value: 'sn',
+							label: 'Sachsen',
+						},
+						{
+							value: 'st',
+							label: 'Sachsen-Anhalt',
+							disabled: true,
+						},
+						{
+							value: 'sh',
+							label: 'Schleswig-Holstein',
+							disabled: true,
+						},
+						{
+							value: 'th',
+							label: 'Thüringen',
+						},
+					] as Option<StencilUnknown>[]
+				}
+				_value={'be'}
+				_on={{
+					onBlur: console.log,
+					onInput: console.log,
+					onChange: console.log,
+					onClick: console.log,
+					onFocus: console.log,
+				}}
+			/>
 		</div>
 	);
 };

package/src/components/single-select/partials/variants.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { SingleSelectCases } from './cases';
 import type { Components } from '@public-ui/components';
 import { SampleColumns } from '../../SampleColumns';
+import { SingleSelectCases } from './cases';
 
 export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (

package/src/components/skip-nav/basic.tsx

@@ -1,33 +1,42 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 
 import { KolSkipNav } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 
-export const SkipNavBasic: FC = () => (
-	<div className="grid gap-4">
-		<SampleDescription>
-			<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
-			<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
-		</SampleDescription>
+export const SkipNavBasic: FC = () => {
+	const skipNavRef = useRef<HTMLKolSkipNavElement>(null);
 
-		<KolSkipNav
-			_label="Hidden navigation"
-			_links={[
-				{
-					_label: 'To the top',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'To the form',
-					_href: '#/back-page',
-				},
-				{
-					_label: 'To the end',
-					_href: '#/back-page',
-				},
-			]}
-		></KolSkipNav>
-	</div>
-);
+	useEffect(() => {
+		skipNavRef.current?.kolFocus();
+	}, []);
+
+	return (
+		<div className="grid gap-4">
+			<SampleDescription>
+				<p>KolSkipNav renders a list of navigation links that are visually hidden by default and only visible on focus.</p>
+				<p>For testing purposes, click into the example and press the tab-key in order to focus the first link.</p>
+			</SampleDescription>
+
+			<KolSkipNav
+				ref={skipNavRef}
+				_label="Hidden navigation"
+				_links={[
+					{
+						_label: 'To the top',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'To the form',
+						_href: '#/back-page',
+					},
+					{
+						_label: 'To the end',
+						_href: '#/back-page',
+					},
+				]}
+			></KolSkipNav>
+		</div>
+	);
+};

package/src/components/spin/custom.tsx

@@ -1,5 +1,5 @@
-import './custom.css';
 import { SampleDescription } from '../SampleDescription';
+import './custom.css';
 
 import React from 'react';
 

package/src/components/spin/label.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from 'react';
 import { KolSpin } from '@public-ui/react-v19';
 import type { FC } from 'react';
+import React, { useEffect, useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const SpinLabel: FC = () => {

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

@@ -1,8 +1,9 @@
 import React from 'react';
 
+import type { ToolbarItemsPropType } from '@public-ui/components';
 import { KolSplitButton, KolToolbar } from '@public-ui/react-v19';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 
@@ -11,20 +12,23 @@ export const SplitButtonBasic: FC = () => {
 	const dummyEventHandler = {
 		onClick: buttonWithTextClickEventHandler,
 	};
-	const TOOLBAR_ITEMS = [
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
+			type: 'button',
 			_label: 'Save',
-			_icons: 'codicon codicon-save',
+			_icons: 'fa-solid fa-floppy-disk',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Move',
-			_icons: 'codicon codicon-move',
+			_icons: 'fa-solid fa-arrows-up-down-left-right',
 			_on: dummyEventHandler,
 		},
 		{
+			type: 'button',
 			_label: 'Delete',
-			_icons: 'codicon codicon-trash',
+			_icons: 'fa-solid fa-trash',
 			_on: dummyEventHandler,
 		},
 	];

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

@@ -1,6 +1,6 @@
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableComplexHeaders: FC = () => (

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

@@ -5,8 +5,8 @@ import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react
 
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
-import { DATA as tableData } from './test-data';
 import type { Data } from './test-data';
+import { DATA as tableData } from './test-data';
 
 import type { KoliBriTableHeaders } from '@public-ui/components';
 

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

@@ -2,9 +2,9 @@ import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTable
 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();
@@ -26,7 +26,7 @@ const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeader
 			const commonProps = {
 				_label: capitalizedVariant,
 				_variant: variant,
-				_icons: { right: 'codicon codicon-squirrel' },
+				_icons: { right: 'kolicon-kolibri' },
 			};
 			getRoot(createReactRenderElement(element)).render(
 				cell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
@@ -91,7 +91,7 @@ export const InteractiveChildElements: FC = () => (
 								render: (element: HTMLElement, cell: KoliBriTableCell) => {
 									const commonProps = {
 										_label: cell.label,
-										_icons: { right: 'codicon codicon-squirrel' },
+										_icons: { right: 'kolicon-kolibri' },
 									};
 									getRoot(createReactRenderElement(element)).render(
 										cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,

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

@@ -1,10 +1,8 @@
 import type { FC } from 'react';
 import React, { useState } from 'react';
 
-import { KolHeading, KolInputCheckbox, KolTableStateful } from '@public-ui/react-v19';
-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,103 +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 KolTableStateful 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>
+					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setVerticalHeader({ vertical: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_minWidth="auto"
-						_data={DATA.slice(0, 10)}
-						_headers={HEADERS_VERTICAL}
+						_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>
+					<KolButtonLink _label="Reset Table" _on={{ onClick: () => setHorizontalHeader({ horizontal: [[...TABLE_HEADER_CELLS]] }) }}></KolButtonLink>
 					<KolTableStateful
 						_label="Sort Table with Order and Date"
 						_minWidth="auto"
-						_data={DATA}
-						_headers={HEADERS_HORIZONTAL}
+						_data={BACKLOG_DATA}
+						_headers={horizontalHeader}
 						className="block"
-						_allowMultiSort={allowMultiSortHorizontal}
+						_allowMultiSort={true}
 					/>
 				</section>
 			</section>