fix: table customRender cell überschreiben beim Neuanordnen andere cells

packages/components/src/components/table-stateless/component.tsx

@@ -84,6 +84,8 @@ export class KolTableStatelessWc implements TableStatelessAPI {
 	private fixedOffsets: number[] = [];
 	private resizeDebounceTimeout?: ReturnType<typeof setTimeout>;
 
+	private settingsChangedCounter = 0;
+
 	@State()
 	private tableDivElementHasScrollbar = false;
 
@@ -228,6 +230,7 @@ export class KolTableStatelessWc implements TableStatelessAPI {
 	public handleSettingsChange(event: CustomEvent<KoliBriTableHeaderCell[][]>) {
 		const updatedHeaderCells = { ...this.state._headerCells, horizontal: event.detail };
 		setState(this, '_headerCells', updatedHeaderCells);
+		this.settingsChangedCounter++;
 
 		// Call the onChangeHeaderCells callback if provided
 		if (typeof this.state._on?.[Callback.onChangeHeaderCells] === 'function') {
@@ -784,10 +787,12 @@ export class KolTableStatelessWc implements TableStatelessAPI {
 			const fixed = this.isFixedCol(colIndex);
 			const offsetLeft = fixed === 'left' ? this.getOffsetString(cell.colIndex, true) : undefined;
 			const offsetRight = fixed === 'right' ? this.getOffsetString(cell.colIndex) : undefined;
+			const hasCustomRender = typeof cell.render === 'function';
 
 			return (
 				<td
-					key={`cell-${key}`}
+					// settingsChangedCounter is needed so every cell has a unique key after a settings change and gets rerenderd
+					key={`cell-${key}-${this.settingsChangedCounter}`}
 					class={clsx(
 						'kol-table__cell kol-table__cell--body',
 						cell.textAlign && `kol-table__cell--align-${cell.textAlign}`,
@@ -805,18 +810,14 @@ export class KolTableStatelessWc implements TableStatelessAPI {
 						right: offsetRight,
 					}}
 					ref={
-						typeof cell.render === 'function'
+						hasCustomRender
 							? (el) => {
 									this.cellRender(cell as KoliBriTableHeaderCellWithLogic & { render: KoliBriTableRender }, el);
 								}
 							: undefined
 					}
 				>
-					{isActionColumn && actionColumn && cell.data
-						? this.renderActionItems(actionColumn, cell.data, key)
-						: typeof cell.render !== 'function'
-							? cell.label
-							: ''}
+					{isActionColumn && actionColumn && cell.data ? this.renderActionItems(actionColumn, cell.data, key) : !hasCustomRender ? cell.label : ''}
 				</td>
 			);
 		}

packages/samples/react/src/components/table/action-render.tsx

@@ -0,0 +1,81 @@
+import type { KoliBriTableCell, 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;
+	react: string;
+};
+
+const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
+	horizontal: [
+		[
+			{ key: 'project', label: 'Project' },
+			{ key: 'owner', label: 'Owner', width: 140 },
+			{
+				label: 'ID',
+				key: 'id',
+				width: 100,
+
+				render: (_el, cell: KoliBriTableCell) => {
+					const { label } = cell as { label: string };
+					return `Index: ${label}`;
+				},
+			},
+			{
+				type: 'action',
+				key: 'actions',
+				label: 'Actions',
+				width: 100,
+				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}`),
+							},
+						},
+					];
+				},
+			},
+		],
+	],
+};
+
+const DATA: ProjectTask[] = [
+	{
+		id: 'T-01',
+		project: 'Onboarding checklist',
+		owner: 'Alex Rivera',
+		react: 'test',
+	},
+	{
+		id: 'T-02',
+		project: 'Accessibility audit',
+		owner: 'Jamie Chen',
+		react: 'test',
+	},
+];
+
+export const TableActionAndRenderColumns: 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" _hasSettingsMenu />
+		</section>
+	</>
+);

packages/samples/react/src/components/table/render-cell.tsx

@@ -97,6 +97,7 @@ const HEADERS: KoliBriTableHeaders = {
 			},
 			{
 				label: 'Action (react)',
+				key: 'action',
 				width: 200,
 
 				/* Example 4: Render function using React */
@@ -127,6 +128,6 @@ export const TableRenderCell: FC = () => (
 			<p>This sample shows KolTableStateful using React render functions for the cell contents.</p>
 		</SampleDescription>
 
-		<KolTableStateful _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" />
+		<KolTableStateful _label="Sort by date column" _data={DATA} _headers={HEADERS} className="w-full" _hasSettingsMenu />
 	</>
 );

packages/samples/react/src/components/table/routes.ts

@@ -1,6 +1,7 @@
 import type { Routes } from '../../shares/types';
 import { TableActionColumns } from './action-columns';
 import { TableActionColumnPerformance } from './action-columns-performance';
+import { TableActionAndRenderColumns } from './action-render';
 import { TableBig } from './big-table';
 import { TableColumnAlignment } from './column-alignment';
 import { TableComplexHeaders } from './complex-headers';
@@ -56,5 +57,6 @@ export const TABLE_ROUTES: Routes = {
 		'with-footer': TableWithFooter,
 		'with-pagination': TableWithPagination,
 		big: TableBig,
+		'action-and-render': TableActionAndRenderColumns,
 	},
 };