@public-ui/sample-react 4.0.1-rc.2 → 4.0.2-rc.0

package/src/components/link/icons.tsx

@@ -12,43 +12,43 @@ export const LinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _icons="fa-solid fa-house" _label="I am a link with an icon on the left" _href="#/back-page" />
+			<KolLink _icons="kolicon-house" _label="I am a link with an icon on the left" _href="#/back-page" />
 			<KolLink
 				_icons={{
-					right: 'fa-solid fa-house',
+					right: 'kolicon-house',
 				}}
 				_label="I am a link with an icon on the right"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
+					top: 'kolicon-house',
 				}}
 				_label="I am a link with an icon at the top"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'fa-solid fa-house',
+					bottom: 'kolicon-house',
 				}}
 				_label="I am a link with icon below"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
-					right: 'fa-solid fa-house',
-					bottom: 'fa-solid fa-house',
-					left: 'fa-solid fa-house',
+					top: 'kolicon-house',
+					right: 'kolicon-house',
+					bottom: 'kolicon-house',
+					left: 'kolicon-house',
 				}}
 				_label="I am a link with all icons"
 				_href="#/back-page"
 			/>
 
-			<KolLink _icons="fa-solid fa-house" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
+			<KolLink _icons="kolicon-house" _href="https://public-ui.github.io/" _label="I am a external link with an icon on the left" _target="_blank" />
 			<KolLink
 				_icons={{
-					right: 'fa-solid fa-house',
+					right: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external linkwith an icon on the right"
@@ -56,7 +56,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					top: 'fa-solid fa-house',
+					top: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with an icon at the top"
@@ -64,7 +64,7 @@ export const LinkIcons: FC = () => (
 			/>
 			<KolLink
 				_icons={{
-					bottom: 'fa-solid fa-house',
+					bottom: 'kolicon-house',
 				}}
 				_href="https://public-ui.github.io/"
 				_label="I am a external link with icon below"
@@ -75,10 +75,10 @@ export const LinkIcons: FC = () => (
 				_label="I am a external link with all icons"
 				_target="_blank"
 				_icons={{
-					top: 'fa-solid fa-house',
-					right: 'fa-solid fa-house',
-					bottom: 'fa-solid fa-house',
-					left: 'fa-solid fa-house',
+					top: 'kolicon-house',
+					right: 'kolicon-house',
+					bottom: 'kolicon-house',
+					left: 'kolicon-house',
 				}}
 			/>
 		</div>

package/src/components/link/linked-headline.tsx

@@ -0,0 +1,79 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolHeading, KolLink } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+export const LinkHeadline: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows a linked headline with anchor.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolLink _href="/#/link/linked-headline#headline1" _label="">
+				<KolHeading _label="I'm H2-heading number one" _level={2} slot="expert" id="headline1" />
+			</KolLink>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+			<KolLink _href="/#/link/linked-headline#headline2" _label="">
+				<KolHeading _label="I'm H2-heading number two" _level={2} slot="expert" id="headline2" />
+			</KolLink>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+			<KolLink _href="/#/link/linked-headline#headline3" _label="">
+				<KolHeading _label="I'm H2-heading number three" _level={2} slot="expert" id="headline3" />
+			</KolLink>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+			<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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+				voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+			</p>
+		</div>
+	</>
+);

package/src/components/link/routes.ts

@@ -5,6 +5,7 @@ import { LinkBasic } from './basic';
 import { LinkIcons } from './icons';
 import { LinkImage } from './image';
 import { LinkReactRouter } from './link-react-router';
+import { LinkHeadline } from './linked-headline';
 import { LinkShortKey } from './short-key';
 import { LinkTarget } from './target';
 
@@ -18,5 +19,6 @@ export const LINK_ROUTES: Routes = {
 		'access-key': LinkAccessKey,
 		'short-key': LinkShortKey,
 		'react-router': LinkReactRouter,
+		'linked-headline': LinkHeadline,
 	},
 };

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

@@ -16,7 +16,7 @@ export const LinkShortKey: FC = () => (
 			<KolLink _href="#/back-page" _label="With S short key" _shortKey="S" />
 			<KolLink _href="#/back-page" _label="Very small s" _shortKey="s" />
 			<KolLink _href="#/back-page" _label="Short key does not appear in label" _shortKey="s" />
-			<KolLink _hideLabel _icons="fa-solid fa-house" _href="#/back-page" _label="short key without label" _shortKey="s" />
+			<KolLink _hideLabel _icons="kolicon-house" _href="#/back-page" _label="short key without label" _shortKey="s" />
 		</div>
 	</>
 );

package/src/components/link/target.tsx

@@ -25,13 +25,13 @@ export const LinkTarget: FC = () => (
 					<KolLink _href="#/back-page" _label="Link with target (_blank)" _target="_blank" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link without target" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link without target" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_self)" _target="_self" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link with target (_self)" _target="_self" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
+					<KolLink _href="#/back-page" _icons="kolicon-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
 				</li>
 			</ul>
 		</div>

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

@@ -16,20 +16,20 @@ export const PopoverButtonBasic: FC = () => {
 	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
 			type: 'button',
-			_label: 'Edit',
-			_icons: 'fa-solid fa-pen',
+			_label: 'Show',
+			_icons: 'kolicon-eye',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'fa-solid fa-trash',
+			_icons: 'kolicon-minus',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
-			_label: 'Duplicate',
-			_icons: 'fa-solid fa-copy',
+			_label: 'Add',
+			_icons: 'kolicon-plus',
 			_on: dummyEventHandler,
 		},
 	];

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

@@ -17,7 +17,7 @@ export const PopoverButtonInline: FC = () => {
 				<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>
+					<KolPopoverButton _inline={true} _label="Help" _icons="kolicon-alert-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 						<div className="w-sm p-2 border border-solid border-gray">
 							<KolHeading _label="Help Information" _level={0}></KolHeading>
 							<p>

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

@@ -16,19 +16,19 @@ export const SplitButtonBasic: FC = () => {
 		{
 			type: 'button',
 			_label: 'Save',
-			_icons: 'fa-solid fa-floppy-disk',
+			_icons: 'kolicon-check',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
-			_label: 'Move',
-			_icons: 'fa-solid fa-arrows-up-down-left-right',
+			_label: 'Move Up',
+			_icons: 'kolicon-chevron-up',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'fa-solid fa-trash',
+			_icons: 'kolicon-minus',
 			_on: dummyEventHandler,
 		},
 	];

package/src/components/table/action-columns-performance.tsx

@@ -0,0 +1,190 @@
+import type { KoliBriTableDataType, KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+const ROWS_COUNT = 50;
+
+type DataRow = {
+	id: number;
+	name: string;
+	email: string;
+	status: string;
+};
+
+const FIRST_NAMES = [
+	'Max',
+	'Erika',
+	'John',
+	'Jane',
+	'Peter',
+	'Anna',
+	'Michael',
+	'Sarah',
+	'Thomas',
+	'Lisa',
+	'Daniel',
+	'Maria',
+	'Christian',
+	'Laura',
+	'Stefan',
+	'Julia',
+	'Andreas',
+	'Sophie',
+	'Markus',
+	'Emma',
+];
+const LAST_NAMES = [
+	'Mustermann',
+	'Musterfrau',
+	'Doe',
+	'Smith',
+	'Schmidt',
+	'Müller',
+	'Weber',
+	'Meyer',
+	'Wagner',
+	'Becker',
+	'Fischer',
+	'Schneider',
+	'Hoffmann',
+	'Koch',
+	'Bauer',
+	'Richter',
+	'Klein',
+	'Wolf',
+	'Schröder',
+	'Neumann',
+];
+const STATUSES = ['active', 'inactive', 'pending'];
+
+const generateData = (count: number): DataRow[] => {
+	return Array.from({ length: count }, (_, i) => {
+		const firstName = FIRST_NAMES[i % FIRST_NAMES.length];
+		const lastName = LAST_NAMES[Math.floor(i / FIRST_NAMES.length) % LAST_NAMES.length];
+		const status = STATUSES[i % STATUSES.length];
+		const id = i + 1;
+
+		return {
+			id,
+			name: `${firstName} ${lastName}`,
+			email: `${firstName.toLowerCase()}.${lastName.toLowerCase()}${id > 20 ? id : ''}@example.com`,
+			status,
+		};
+	});
+};
+
+const DATA: DataRow[] = generateData(ROWS_COUNT);
+
+const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
+	horizontal: [
+		[
+			{
+				key: 'id',
+				label: 'ID',
+				textAlign: 'left',
+				width: 60,
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) => (data0 as unknown as DataRow).id - (data1 as unknown as DataRow).id,
+				sortDirection: 'ASC',
+			},
+			{
+				key: 'name',
+				label: 'Name',
+				textAlign: 'left',
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+					(data0 as unknown as DataRow).name.localeCompare((data1 as unknown as DataRow).name, 'de'),
+				sortDirection: 'ASC',
+			},
+			{
+				key: 'email',
+				label: 'E-Mail',
+				textAlign: 'left',
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+					(data0 as unknown as DataRow).email.localeCompare((data1 as unknown as DataRow).email, 'de'),
+				sortDirection: 'ASC',
+			},
+			{
+				key: 'status',
+				label: 'Status',
+				textAlign: 'center',
+				width: 100,
+				compareFn: (data0: KoliBriTableDataType, data1: KoliBriTableDataType) =>
+					(data0 as unknown as DataRow).status.localeCompare((data1 as unknown as DataRow).status, 'de'),
+				sortDirection: 'ASC',
+			},
+			{
+				type: 'action',
+				key: 'actions',
+				label: 'Aktionen',
+				textAlign: 'center',
+				width: 180,
+				actions: (row) => {
+					const dataRow = row as unknown as DataRow;
+					return [
+						{
+							type: 'button',
+							_label: 'Bearbeiten',
+							_icons: 'kolicon-eye',
+							_hideLabel: true,
+							_tooltipAlign: 'top',
+							_variant: 'secondary',
+							_on: {
+								onClick: () => {
+									console.log('Edit clicked for:', dataRow);
+									alert(`Bearbeiten: ${dataRow.name}`);
+								},
+							},
+						},
+						{
+							type: 'button',
+							_label: 'Löschen',
+							_icons: 'kolicon-alert-error',
+							_hideLabel: true,
+							_tooltipAlign: 'top',
+							_variant: 'danger',
+							_on: {
+								onClick: () => {
+									console.log('Delete clicked for:', dataRow);
+									alert(`Löschen: ${dataRow.name}`);
+								},
+							},
+						},
+						{
+							type: 'button',
+							_label: 'Details anzeigen',
+							_icons: 'kolicon-alert-info',
+							_hideLabel: true,
+							_tooltipAlign: 'top',
+							_variant: 'normal',
+							_on: {
+								onClick: () => {
+									console.log('Details clicked for:', dataRow);
+									alert(`Details: ${JSON.stringify(dataRow, null, 2)}`);
+								},
+							},
+						},
+					];
+				},
+			},
+		],
+	],
+};
+
+export const TableActionColumnPerformance: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Performance demo: {ROWS_COUNT} rows with action buttons defined once in the column header using the refactored approach. The factory function generates
+				actions for each row on demand, eliminating redundant data and improving maintainability.
+			</p>
+			<p>
+				Actions stay type-safe with <code>ActionColumnPropType</code> (ButtonProps or LinkProps), and no custom render functions are needed.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full">
+			<KolTableStateful _label="Benutzerverwaltung mit Action-Spalte" _headers={HEADERS} _data={DATA} className="block" />
+		</section>
+	</>
+);

package/src/components/table/action-columns.tsx

@@ -0,0 +1,105 @@
+import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+type ProjectTask = {
+	id: string;
+	project: string;
+	owner: string;
+};
+
+const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
+	horizontal: [
+		[
+			{ key: 'id', label: 'ID', width: 80 },
+			{ key: 'project', label: 'Project' },
+			{ key: 'owner', label: 'Owner', width: 140 },
+			{
+				type: 'action',
+				key: 'actions',
+				label: 'Actions',
+				width: 250,
+				actions: (row) => {
+					const simpleRow = row as ProjectTask;
+					return [
+						{
+							type: 'button',
+							_label: 'Details',
+							_icons: 'kolicon-eye',
+							_hideLabel: true,
+							_on: {
+								onClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),
+							},
+						},
+						{
+							type: 'button',
+							_label: 'Start',
+							_icons: 'kolicon-chevron-right',
+							_variant: 'secondary',
+							_on: {
+								onClick: () => alert(`Start task ${simpleRow.id}`),
+							},
+						},
+						{
+							type: 'link',
+							_label: 'View',
+							_href: `#/back-page?taskId=${simpleRow.id}`,
+							_target: '_blank',
+							_icons: 'kolicon-external-link',
+							_hideLabel: false,
+						},
+					];
+				},
+			},
+			{
+				type: 'action',
+				key: 'externalActions',
+				label: 'External Actions',
+				width: 280,
+				actions: (row) => {
+					const simpleRow = row as ProjectTask;
+					return [
+						{
+							type: 'link',
+							_label: 'View on Dashboard',
+							_href: `#/back-page?taskId=${simpleRow.id}`,
+							_target: '_blank',
+							_icons: 'kolicon-external-link',
+							_hideLabel: false,
+						},
+					];
+				},
+			},
+		],
+	],
+};
+
+const DATA: ProjectTask[] = [
+	{
+		id: 'T-01',
+		project: 'Onboarding checklist',
+		owner: 'Alex Rivera',
+	},
+	{
+		id: 'T-02',
+		project: 'Accessibility audit',
+		owner: 'Jamie Chen',
+	},
+];
+
+export const TableActionColumns: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Simple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with
+				inline action buttons demonstrate clean separation between data and UI behavior.
+			</p>
+		</SampleDescription>
+
+		<section className="w-full">
+			<KolTableStateful _label="Tasks with action buttons" _headers={HEADERS} _data={DATA} className="block" />
+		</section>
+	</>
+);

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

@@ -15,23 +15,30 @@ type Data = {
 	date: Date;
 	shipped: boolean;
 };
-const DATA: Data[] = [
-	{
-		order: 0,
-		shipped: false,
-		date: new Date('1981-05-26T21:33:43.612Z'),
-	},
-	{
-		order: 1,
-		shipped: true,
-		date: new Date('1971-04-25T19:44:17.014Z'),
-	},
-	{
-		order: 2,
-		shipped: false,
-		date: new Date('1986-07-10T11:39:29.539Z'),
-	},
-];
+
+/**
+ * Generates n data entries with random dates and shipping status
+ * @param n - Number of data entries to generate
+ * @returns Array of Data objects
+ */
+function generateDataEntries(n: number): Data[] {
+	const entries: Data[] = [];
+	const startDate = new Date('1970-01-01').getTime();
+	const endDate = new Date('2025-12-31').getTime();
+
+	for (let i = 0; i < n; i++) {
+		const randomTimestamp = startDate + Math.random() * (endDate - startDate);
+		entries.push({
+			order: i,
+			shipped: Math.random() > 0.5,
+			date: new Date(randomTimestamp),
+		});
+	}
+
+	return entries;
+}
+
+const DATA: Data[] = generateDataEntries(100);
 
 function KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {
 	const { dummyClickEventHandler } = useToasterService();
@@ -105,7 +112,7 @@ const HEADERS: KoliBriTableHeaders = {
 							}}
 						>
 							<KolInputText _label="Input" />
-							<KolButtonWrapper label="Save" icons={{ left: 'fa-solid fa-floppy-disk' }} />
+							<KolButtonWrapper label="Save" icons={{ left: 'kolicon-check' }} />
 						</div>,
 					);
 				},

package/src/components/table/routes.ts

@@ -1,4 +1,6 @@
 import { Routes } from '../../shares/types';
+import { TableActionColumns } from './action-columns';
+import { TableActionColumnPerformance } from './action-columns-performance';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
 import { TableDirectionAwareSort } from './direction-aware-sort';
@@ -32,6 +34,8 @@ export const TABLE_ROUTES: Routes = {
 		'non-hidable-columns': TableNonHidableColumns,
 		'pagination-position': PaginationPosition,
 		'predefined-settings': PredefinedSettings,
+		'action-columns': TableActionColumns,
+		'action-columns-performance': TableActionColumnPerformance,
 		'render-cell': TableRenderCell,
 		'settings-column-options': TableSettingsColumnOptions,
 		'sort-data': TableSortData,