fix: table customRender cell überschreiben beim Neuanordnen andere cells

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

@@ -229,6 +229,11 @@ export class KolTableStatelessWc implements TableStatelessAPI {
 		const updatedHeaderCells = { ...this.state._headerCells, horizontal: event.detail };
 		setState(this, '_headerCells', updatedHeaderCells);
 
+		// versuch rerender zu erzwingen...
+		// const resetData = [...this._data] as KoliBriTableDataType[];
+		// this._data = resetData;
+		// forceUpdate(this);
+
 		// Call the onChangeHeaderCells callback if provided
 		if (typeof this.state._on?.[Callback.onChangeHeaderCells] === 'function') {
 			this.state._on[Callback.onChangeHeaderCells](event, updatedHeaderCells);
@@ -784,6 +789,7 @@ 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
@@ -804,19 +810,35 @@ export class KolTableStatelessWc implements TableStatelessAPI {
 						left: offsetLeft,
 						right: offsetRight,
 					}}
-					ref={
-						typeof cell.render === 'function'
-							? (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
-							: ''}
+					{/* 
+						Ich hätte ja gerne, dass das Obere funktioniert, aber das räumt beim verschieben den inhalt des Divs nicht weg...
+						Der untere Ansatz funktioniert aber damit haben wir immer ein zusätzliches meist leeres div
+						Ideen?
+					{hasCustomRender ? (
+						<div
+							ref={(el) => {
+								this.cellRender(cell as KoliBriTableHeaderCellWithLogic & { render: KoliBriTableRender }, el);
+							}}
+						/>
+					) : isActionColumn && actionColumn && cell.data ? (
+						this.renderActionItems(actionColumn, cell.data, key)
+					) : (
+						cell.label
+					)} */}
+
+					<div
+						ref={
+							hasCustomRender
+								? (el) => {
+										this.cellRender(cell as KoliBriTableHeaderCellWithLogic & { render: KoliBriTableRender }, el);
+									}
+								: (el) => {
+										if (el) el.textContent = '';
+									}
+						}
+					/>
+					{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,
 	},
 };