From 7df5485bf265e50db0ac6dec8a66a7ffd2997d69 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Fri, 19 Jul 2024 16:22:55 +0200
Subject: [PATCH 01/13] refactor(KtTable): use composition API for Table*Cell
 files

---
 packages/documentation/tsconfig.json          |   1 +
 .../kotti-ui/source/kotti-table/KtTable.vue   |   2 +-
 .../source/kotti-table/KtTableColumn.ts       |   4 +-
 .../components/TableBodyEmptyRow.ts           |   6 +-
 .../kotti-table/components/TableHeader.vue    |  75 ++++----
 .../kotti-table/components/TableHeaderCell.ts |  52 ++++--
 .../kotti-table/components/TableRowCell.ts    | 165 ++++++++++--------
 .../kotti-ui/source/kotti-table/constants.ts  |  43 ++++-
 .../kotti-ui/source/kotti-table/mixins.ts     |   2 +-
 packages/kotti-ui/source/kotti-table/types.ts |  12 +-
 packages/kotti-ui/source/types/kotti.ts       |   2 +
 packages/kotti-ui/source/types/typed-emit.ts  |   6 +
 packages/kotti-ui/tsconfig.json               |   7 +-
 tsconfig.json                                 |   1 +
 14 files changed, 243 insertions(+), 135 deletions(-)
 create mode 100644 packages/kotti-ui/source/types/typed-emit.ts

diff --git a/packages/documentation/tsconfig.json b/packages/documentation/tsconfig.json
index 5a757fac82..305e74b490 100644
--- a/packages/documentation/tsconfig.json
+++ b/packages/documentation/tsconfig.json
@@ -23,6 +23,7 @@
 	"exclude": ["node_modules"],
 	"include": ["./**/*.ts", "./**/*.js", "./**/*.vue"],
 	"vueCompilerOptions": {
+		"skipTemplateCodegen": true,
 		"strictTemplates": true,
 		"target": 2.7
 	}
diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
index eedd7cf560..b56ee51201 100644
--- a/packages/kotti-ui/source/kotti-table/KtTable.vue
+++ b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -69,7 +69,7 @@ export default {
 	},
 	provide() {
 		return {
-			[KT_TABLE]: this,
+			[KT_TABLE as symbol]: this,
 			// @ts-expect-error store will exist at runtime
 			[KT_STORE]: this.store,
 			// @ts-expect-error layout will exist at runtime
diff --git a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
index a451941019..1ed104bd69 100644
--- a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
+++ b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
@@ -99,7 +99,7 @@ export const KtTableColumn: any = {
 		this.columnConfig = createColumn(this)
 	},
 	mounted(): void {
-		const columnIndex = this[KT_TABLE].$children.indexOf(this)
+		const columnIndex = this[KT_TABLE as symbol].$children.indexOf(this)
 		this[KT_STORE].commit('insertColumn', {
 			column: this.columnConfig,
 			...(columnIndex !== -1 ? { index: columnIndex } : {}),
@@ -120,7 +120,7 @@ function createColumn(column: any = {}) {
 	let columnId = column.id
 	if (!columnId) {
 		// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-		columnId = `${_self[KT_TABLE].tableId}_column_${columnIdSeed}`
+		columnId = `${_self[KT_TABLE as symbol].tableId}_column_${columnIdSeed}`
 		columnIdSeed++
 	}
 	// eslint-disable-next-line no-param-reassign
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
index b1779bb618..8113aba0b0 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
@@ -1,13 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import type { CreateElement, VNode } from 'vue'
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableBodyEmptyRow = {
+export const TableBodyEmptyRow: any = {
 	name: 'TableBodyEmptyRow',
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
 	render(h: CreateElement): VNode {
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		const { colSpan, render } = this as any
+		const { colSpan, render } = this
 		return h('tr', {}, [
 			h(
 				'td',
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
index f4c082a7bd..737557d176 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
@@ -30,16 +30,7 @@
 				@dragstart="dragStart($event, column)"
 				@drop="drop($event, column)"
 			>
-				<div
-					:class="[
-						'kt-table__cell',
-						'kt-table__header-cell',
-						column.headerCellClass,
-					]"
-					:data-prop="column.prop"
-				>
-					<TableHeaderCell v-bind="{ column, columnIndex }" />
-				</div>
+				<TableHeaderCell v-bind="{ column, columnIndex }" />
 				<div v-if="useQuickSortControl" class="kt-table__controls">
 					<div
 						v-if="useQuickSortControl && (canSort(column) || isSorted(column))"
@@ -60,14 +51,15 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
 import { KottiTable } from '../types'
 
 import { TableHeaderCell } from './TableHeaderCell'
 
-export default {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const KtTableHeader: any = {
 	name: 'KtTableHeader',
 	components: { TableHeaderCell },
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
@@ -78,61 +70,64 @@ export default {
 		}
 	},
 	computed: {
-		isAllRowsDisabled() {
+		isAllRowsDisabled(): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.isAllRowsDisabled
 		},
-		isAllSelected() {
+		isAllSelected(): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.isAllSelected
 		},
-		tableColumns() {
+		tableColumns(): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.columns
 		},
-		hasActions() {
+		hasActions(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].hasActions
 		},
-		isDraggable() {
+		isDraggable(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].useColumnDragToOrder
 		},
-		isDraggingColumn() {
+		isDraggingColumn(): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			return Boolean(this.draggingColumn)
 		},
-		isExpandable() {
+		isExpandable(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].isExpandable
 		},
-		isSelectable() {
+		isSelectable(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].isSelectable
 		},
-		useQuickSortControl() {
+		useQuickSortControl(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].useQuickSortControl
 		},
-		tableHeaderClass() {
+		tableHeaderClass(): any {
 			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return ['table-header-row', this[KT_TABLE].headerClass]
 		},
 	},
 	methods: {
-		handleSelectAll(_event: unknown) {
+		handleSelectAll(_event: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('toggleAllSelection')
 		},
-		handleThClick(column: unknown) {
+		handleThClick(column: unknown): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			if (this.useQuickSortControl && this.canSort(column)) {
 				this.changeSort(column)
 			}
 		},
-		getThClasses(column: any) {
+		getThClasses(column: any): any {
 			return [
 				{
 					['drag-over']: this.isDraggedOver(column),
 					sortable: this.canSort(column),
+					// @ts-expect-error vue's type resolution is broken for this file
 					dragging: this.isDraggable,
 					sorted: this.isSorted(column),
 					clickable: this.canSort(column),
@@ -142,52 +137,60 @@ export default {
 				column.thClass,
 			]
 		},
-		getThStyle(column: any) {
+		getThStyle(column: any): any {
 			return {
 				textAlign: column.align || KottiTable.Column.Align.LEFT,
 				width: column.width || 'auto',
 			}
 		},
-		canSort(column: unknown) {
+		canSort(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('canSort', column)
 		},
-		isSorted(column: unknown) {
+		isSorted(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSorted', column)
 		},
-		changeSort(column: unknown) {
+		changeSort(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('sort', { column })
 		},
-		isSortedByAsc(column: unknown) {
+		isSortedByAsc(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSortedByAsc', column)
 		},
-		isSortedByDsc(column: unknown) {
+		isSortedByDsc(column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSortedByDsc', column)
 		},
-		dragStart(_event: unknown, column: any) {
+		dragStart(_event: unknown, column: any): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.draggingColumn = column
 		},
-		dragEnter(_event: unknown, column: any) {
+		dragEnter(_event: unknown, column: any): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.columnDragOver = column
 		},
-		dragEnd() {
+		dragEnd(): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.columnDragOver = null
 		},
-		isDraggedOver(column: unknown) {
+		isDraggedOver(column: unknown): any {
+			// @ts-expect-error vue's type resolution is broken for this file
 			return column === this.columnDragOver && this.draggingColumn !== column
 		},
-		drop(_event: unknown, column: unknown) {
+		drop(_event: unknown, column: unknown): any {
 			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('orderBefore', this.draggingColumn, column)
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.draggingColumn = null
+			// @ts-expect-error vue's type resolution is broken for this file
 			this.columnDragOver = null
 		},
 	},
 }
+
+export default KtTableHeader
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
index 5ccd3070db..5cc3f6ebf8 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
@@ -1,19 +1,41 @@
-/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import type { CreateElement, VNode } from 'vue'
+import { defineComponent, h } from 'vue'
+import type { PropType } from 'vue'
+import type { KottiTable } from '../types'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableHeaderCell = {
+export const TableHeaderCell = defineComponent({
 	name: 'TableHeaderCell',
-	functional: true,
-	props: ['column', 'columnIndex'],
-	render(h: CreateElement, context: any): VNode {
-		const { column, columnIndex } = context.props
-		return column.renderHeader(h, {
-			column,
-			value: column.label,
-			columnIndex,
-		})
+	props: {
+		column: {
+			required: true,
+			type: Object as PropType<KottiTable.Column.PropsInternal>,
+		},
+		columnIndex: {
+			required: true,
+			type: Number,
+		},
+	},
+	setup(props) {
+		return () =>
+			h(
+				'div',
+				{
+					class: [
+						'kt-table__cell',
+						'kt-table__header-cell',
+						props.column.headerCellClass,
+					],
+					attrs: {
+						'data-prop': props.column.prop,
+					},
+				},
+				[
+					props.column.renderHeader(h, {
+						column: props.column,
+						columnIndex: props.columnIndex,
+						value: props.column.label,
+					}),
+				],
+			)
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
index 67c9d654a0..1cd2a111dc 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
@@ -1,95 +1,116 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import property from 'lodash/property.js'
+import type { PropType } from 'vue'
+import { computed, defineComponent, h, inject } from 'vue'
 
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
-import type { CreateElement } from 'vue'
+import { type KottiTable } from '../types'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableRowCell: any = {
+export const TableRowCell = defineComponent({
 	name: 'TableRowCell',
 	props: {
-		column: Object,
-		row: Object,
-		columnIndex: Number,
-		rowIndex: Number,
-	},
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	computed: {
-		value(): unknown {
-			// @ts-expect-error column and row will exist at runtime
-			return property(this.column.prop)(this.row)
+		column: {
+			required: true,
+			type: Object as PropType<KottiTable.Column.PropsInternal>,
+		},
+		columnIndex: {
+			required: true,
+			type: Number,
 		},
-		_tdClasses(): [unknown, unknown] {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return [this[KT_TABLE].tdClasses, this.column.tdClass]
+		row: {
+			required: true,
+			type: Object as PropType<KottiTable.Row.Props>,
 		},
-		_cellClass(): [unknown, unknown] {
-			// @ts-expect-error column will exist at runtime
-			return ['kt-table__cell', this.column.cellClass]
+		rowIndex: {
+			required: true,
+			type: Number,
 		},
-		_tdStyles(): unknown {
-			// @ts-expect-error column will exist at runtime
-			const { column } = this
+	},
+	setup(props) {
+		const tableState = inject(KT_TABLE)
+		const tableStore = inject(KT_STORE)
+		const tableLayout = inject(KT_LAYOUT)
+
+		if (!tableState || !tableStore || !tableLayout)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const value = computed(() => property(props.column.prop)(props.row))
+		const _tdClasses = computed(() => [
+			tableState.tdClasses,
+			props.column.tdClass,
+		])
+		const _cellClass = computed(() => [
+			'kt-table__cell',
+			props.column.cellClass,
+		])
+		const _tdStyles = computed(() => {
+			const { column } = props
 			return {
+				// @ts-expect-error not clear where styles is coming from, will fix later
 				...column.styles,
 				...(column.align ? { textAlign: column.align } : {}),
 				...(column.width ? { width: column.width } : {}),
 				...(column.maxWidth ? { maxWidth: column.maxWidth } : {}),
 				...(column.minWidth ? { minWidth: column.minWidth } : {}),
 			}
-		},
-	},
-	methods: {
-		cellClick($event: MouseEvent, data: any) {
+		})
+
+		const cellClick = (
+			$event: MouseEvent,
+			data: {
+				value: unknown
+				column: KottiTable.Column.PropsInternal
+				columnIndex: number
+				row: KottiTable.Row.Props
+				rowIndex: number
+			},
+		) => {
 			if (data.column.disableRowClick) {
 				$event.stopPropagation()
 			}
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			this[KT_TABLE].$emit('cellClick', data)
-		},
-	},
-	render(h: CreateElement) {
-		const {
-			column,
-			row,
-			rowIndex,
-			columnIndex,
-			cellClick,
-			_cellClass,
-			_tdClasses,
-			_tdStyles,
-			value,
-		} = this
-		return h(
-			'td',
-			{
-				class: _tdClasses,
-				on: {
-					click: ($event: MouseEvent) =>
-						cellClick($event, { value, column, row, columnIndex, rowIndex }),
-				},
-				style: _tdStyles,
-			},
-			[
-				h(
-					'div',
-					{
-						class: _cellClass,
-						attrs: {
-							'data-prop': column.prop,
+			tableState.$emit('cellClick', data)
+		}
+
+		return () =>
+			h(
+				'td',
+				{
+					class: _tdClasses,
+					on: {
+						click: ($event: MouseEvent) => {
+							cellClick($event, {
+								column: props.column,
+								columnIndex: props.columnIndex,
+								row: props.row,
+								rowIndex: props.rowIndex,
+								value: value.value,
+							})
 						},
 					},
-					[
-						column.renderCell(h, {
-							column,
-							row,
-							value,
-							columnIndex,
-							rowIndex,
-						}),
-					],
-				),
-			],
-		)
+					style: _tdStyles.value,
+				},
+				[
+					h(
+						'div',
+						{
+							class: _cellClass,
+							attrs: {
+								'data-prop': props.column.prop,
+							},
+						},
+						[
+							props.column.renderCell(h, {
+								column: props.column,
+								row: props.row,
+								value: value.value,
+								columnIndex: props.columnIndex,
+								rowIndex: props.rowIndex,
+							}),
+						],
+					),
+				],
+			)
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
index dae223bb07..92fa2d09f2 100644
--- a/packages/kotti-ui/source/kotti-table/constants.ts
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -1,11 +1,50 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import type { CreateElement } from 'vue'
+import type { CreateElement, InjectionKey } from 'vue'
+
+import type { KottiTable } from './types'
+import type { TypedEmit } from '../types/typed-emit'
 
 export const IS_ASC = /ascending|^1/
 export const IS_DSC = /descending|^-1/
 
-export const KT_TABLE = 'KT_TABLE'
+interface KottiTableContext {
+	$emit: TypedEmit<{
+		activateRow: unknown
+		cellClick: {
+			column: KottiTable.Column.PropsInternal
+			columnIndex: number
+			row: KottiTable.Row.Props
+			rowIndex: number
+			value: unknown
+		}
+		columnsChange: unknown
+		expand: unknown
+		expandChange: unknown
+		hiddenChange: unknown
+		orderChange: unknown
+		rowBlur: unknown
+		rowClick: unknown
+		rowFocus: unknown
+		select: unknown
+		selectAll: unknown
+		selectionChange: unknown
+		sortChange: unknown
+	}>
+	tdClasses: string | string[] | null
+}
+
+/**
+ * HACK: This is a string type-masquerading as a symbol, because
+ *   - using a string works perfectly fine at runtime
+ *   - an InjectionKey needs to be a symbol
+ *   - using a Symbol will produce strange runtime issues
+ *
+ * Plan for now: probably this needs to be done for the other injection keys as well.
+ * At a later stage of refactoring the table to composition API we can probably use actual symbols
+ */
+export const KT_TABLE: InjectionKey<KottiTableContext> =
+	'KT_TABLE' as unknown as symbol
 export const KT_STORE = 'KT_STORE'
 export const KT_LAYOUT = 'KT_LAYOUT'
 export const KT_TABLE_STATE_PROVIDER = 'KT_TABLE_STATE_PROVIDER'
diff --git a/packages/kotti-ui/source/kotti-table/mixins.ts b/packages/kotti-ui/source/kotti-table/mixins.ts
index 1cbd1288c0..3df37b90ce 100644
--- a/packages/kotti-ui/source/kotti-table/mixins.ts
+++ b/packages/kotti-ui/source/kotti-table/mixins.ts
@@ -3,7 +3,7 @@ import { KT_STORE, KT_TABLE_STATE_PROVIDER, KT_TABLE } from './constants'
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const TableColumnsStateMixin = {
 	inject: {
-		[KT_TABLE]: { default: false },
+		[KT_TABLE as symbol]: { default: false },
 		[KT_STORE]: { default: false },
 		[KT_TABLE_STATE_PROVIDER]: {
 			default: {
diff --git a/packages/kotti-ui/source/kotti-table/types.ts b/packages/kotti-ui/source/kotti-table/types.ts
index 96edfcef1a..7419d98738 100644
--- a/packages/kotti-ui/source/kotti-table/types.ts
+++ b/packages/kotti-ui/source/kotti-table/types.ts
@@ -1,4 +1,4 @@
-import type { CreateElement, VNode } from 'vue'
+import type { CreateElement, VNode, VNodeChildren } from 'vue'
 
 export module KottiTable {
 	export module Column {
@@ -28,7 +28,7 @@ export module KottiTable {
 			| 0
 
 		export interface Context {
-			column: Column.Props
+			column: Column.PropsInternal
 			columnIndex: number
 			row: Row.Props
 			rowIndex: number
@@ -97,6 +97,14 @@ export module KottiTable {
 			) => VNode
 		}
 
+		export type PropsInternal = Omit<Props, 'renderCell' | 'renderHeader'> & {
+			renderCell: (h: CreateElement, data: Context) => VNodeChildren
+			renderHeader: (
+				h: CreateElement,
+				data: Pick<Context, 'column' | 'columnIndex' | 'value'>,
+			) => VNodeChildren
+		}
+
 		export module Slots {
 			export type Default = Context
 
diff --git a/packages/kotti-ui/source/types/kotti.ts b/packages/kotti-ui/source/types/kotti.ts
index 2e05fe6da9..5ee72e74e9 100644
--- a/packages/kotti-ui/source/types/kotti.ts
+++ b/packages/kotti-ui/source/types/kotti.ts
@@ -8,6 +8,8 @@
 import type { ZodSchema } from 'zod'
 
 export * from './decimal-separator'
+export * from './typed-emit'
+
 export { KottiAccordion as Accordion } from '../kotti-accordion/types'
 export { KottiActionbar as Actionbar } from '../kotti-actionbar/types'
 export { KottiAvatar as Avatar } from '../kotti-avatar/types'
diff --git a/packages/kotti-ui/source/types/typed-emit.ts b/packages/kotti-ui/source/types/typed-emit.ts
new file mode 100644
index 0000000000..236394b76e
--- /dev/null
+++ b/packages/kotti-ui/source/types/typed-emit.ts
@@ -0,0 +1,6 @@
+export type TypedEmit<EVENTS extends Record<string, unknown>> = <
+	KEY extends keyof EVENTS,
+>(
+	key: KEY,
+	payload: EVENTS[KEY],
+) => void
diff --git a/packages/kotti-ui/tsconfig.json b/packages/kotti-ui/tsconfig.json
index d79b3267c3..2e69c4b5e4 100644
--- a/packages/kotti-ui/tsconfig.json
+++ b/packages/kotti-ui/tsconfig.json
@@ -51,5 +51,10 @@
 		{
 			"path": "../yoco"
 		}
-	]
+	],
+	"vueCompilerOptions": {
+		"skipTemplateCodegen": true,
+		"strictTemplates": true,
+		"target": 2.7
+	}
 }
diff --git a/tsconfig.json b/tsconfig.json
index b95173aae4..4d59a857d0 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -7,6 +7,7 @@
 		"strict": true
 	},
 	"vueCompilerOptions": {
+		"skipTemplateCodegen": true,
 		"strictTemplates": true,
 		"target": 2.7
 	}

From f297690bb0b2ade37dfe71532b0c1507bdc721a7 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Mon, 22 Jul 2024 15:50:02 +0200
Subject: [PATCH 02/13] refactor(KtTable): use Composition API for
 TableBody*Row components

---
 .../pages/usage/components/table.vue          |   3 +
 .../kotti-ui/source/kotti-table/KtTable.vue   |   9 +-
 .../source/kotti-table/KtTableColumn.ts       |   4 +-
 .../components/TableBodyEmptyRow.ts           |  54 +++--
 .../components/TableBodyExpandRow.ts          |  67 +++---
 .../components/TableBodyLoadingRow.ts         |  52 ++---
 .../kotti-ui/source/kotti-table/constants.ts  |  17 +-
 .../kotti-ui/source/kotti-table/mixins.ts     |   2 +-
 packages/vue-project/src/App.vue              | 218 ++++++++++++++++++
 9 files changed, 335 insertions(+), 91 deletions(-)
 create mode 100644 packages/vue-project/src/App.vue

diff --git a/packages/documentation/pages/usage/components/table.vue b/packages/documentation/pages/usage/components/table.vue
index 7f2f0199fc..b69fcb3dff 100644
--- a/packages/documentation/pages/usage/components/table.vue
+++ b/packages/documentation/pages/usage/components/table.vue
@@ -768,6 +768,9 @@ You can also use slots instead of render props. [`slot="loading"`, `slot="empty"
 	</div>
 </KtTable>
 </div>
+<div slot="vue">
+<KtTable :rows="emptyRows" :columns="columnsDefault" emptyText="Custom empty via prop"/>
+</div>
 
 <div slot="style">
 
diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
index b56ee51201..0404162888 100644
--- a/packages/kotti-ui/source/kotti-table/KtTable.vue
+++ b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -214,7 +214,14 @@ export default {
 			return Boolean(this.$scopedSlots.actions || this.renderActions)
 		},
 		_renderExpand() {
-			return (h: CreateElement, rowData: any) => {
+			return (
+				h: CreateElement,
+				rowData: {
+					data: KottiTable.Row.Props
+					row: KottiTable.Row.Props
+					rowIndex: number
+				},
+			) => {
 				if (this.renderExpand) return this.renderExpand(h, rowData)
 
 				// @ts-expect-error $slots will exist at runtime
diff --git a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
index 1ed104bd69..c48ca60bd8 100644
--- a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
+++ b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
@@ -100,7 +100,7 @@ export const KtTableColumn: any = {
 	},
 	mounted(): void {
 		const columnIndex = this[KT_TABLE as symbol].$children.indexOf(this)
-		this[KT_STORE].commit('insertColumn', {
+		this[KT_STORE as any].commit('insertColumn', {
 			column: this.columnConfig,
 			...(columnIndex !== -1 ? { index: columnIndex } : {}),
 		})
@@ -108,7 +108,7 @@ export const KtTableColumn: any = {
 	destroyed(): void {
 		if (!this.$parent) return
 		this.columnConfig &&
-			this[KT_STORE].commit('removeColumn', this.columnConfig)
+			this[KT_STORE as any].commit('removeColumn', this.columnConfig)
 	},
 	render: (): null => null,
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
index 8113aba0b0..b8f56e5938 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
@@ -1,32 +1,30 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement, VNode } from 'vue'
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { computed, defineComponent, h, inject } from 'vue'
+import { KT_TABLE } from '../constants'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableBodyEmptyRow: any = {
+export const TableBodyEmptyRow = defineComponent({
 	name: 'TableBodyEmptyRow',
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	render(h: CreateElement): VNode {
-		const { colSpan, render } = this
-		return h('tr', {}, [
-			h(
-				'td',
-				{
-					domProps: { colSpan },
-					class: 'kt-table__no-row',
-				},
-				[h('span', { class: 'kt-table__empty-text' }, [render(h)])],
-			),
-		])
-	},
-	computed: {
-		colSpan(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].colSpan
-		},
-		render(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE]._renderEmpty
-		},
+	setup() {
+		const tableState = inject(KT_TABLE)
+
+		if (!tableState)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const colSpan = computed(() => tableState.colSpan)
+		const render = computed(() => tableState._renderEmpty)
+
+		return () =>
+			h('tr', {}, [
+				h(
+					'td',
+					{
+						domProps: { colSpan: colSpan.value },
+						class: 'kt-table__no-row',
+					},
+					[h('span', { class: 'kt-table__empty-text' }, [render.value(h)])],
+				),
+			])
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts
index 2745293de8..7e8820dd38 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts
@@ -1,43 +1,50 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement, VNode } from 'vue'
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { computed, defineComponent, h, inject, type PropType } from 'vue'
+import { KT_TABLE, KT_STORE } from '../constants'
+import type { KottiTable } from '../types'
 
-export const TableBodyExpandRow: any = {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const TableBodyExpandRow = defineComponent({
 	name: 'TableBodyExpandRow',
 	props: {
-		row: Object,
-		rowIndex: Number,
+		row: {
+			type: Object as PropType<KottiTable.Row.Props>,
+			required: true,
+		},
+		rowIndex: {
+			type: Number,
+			required: true,
+		},
 	},
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	render(h: CreateElement): VNode {
-		const { isExpanded, row, rowIndex, colSpan, renderExpand } = this
-		return (
-			isExpanded &&
+	setup(props) {
+		const tableState = inject(KT_TABLE)
+		const tableStore = inject(KT_STORE)
+
+		if (!tableState || !tableStore)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const colSpan = computed(() => tableState.colSpan)
+		const isExpanded = computed(() => tableStore.get('isExpanded', props.row))
+		const render = computed(() => tableState._renderExpand)
+
+		return () =>
+			isExpanded.value &&
 			h('tr', {}, [
 				h(
 					'td',
 					{
-						attrs: { colSpan },
+						attrs: { colSpan: colSpan.value },
 						class: 'kt-table__expanded-cell',
 					},
-					[renderExpand?.(h, { row, data: row, rowIndex })],
+					[
+						render.value(h, {
+							row: props.row,
+							data: props.row,
+							rowIndex: props.rowIndex,
+						}),
+					],
 				),
 			])
-		)
-	},
-	computed: {
-		colSpan(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].colSpan
-		},
-		isExpanded(): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('isExpanded', this.row)
-		},
-		renderExpand(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE]._renderExpand
-		},
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts
index ca80b4db21..182f554b61 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts
@@ -1,33 +1,31 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement } from 'vue'
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { computed, defineComponent, h, inject } from 'vue'
+import { KT_TABLE } from '../constants'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableBodyLoadingRow: any = {
+export const TableBodyLoadingRow: any = defineComponent({
 	name: 'TableBodyLoadingRow',
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	computed: {
-		colSpan(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].colSpan
-		},
-		render(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE]._renderLoading
-		},
-	},
-	render(h: CreateElement) {
-		const { colSpan, render } = this
+	setup() {
+		const tableState = inject(KT_TABLE)
+
+		if (!tableState)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const colSpan = computed(() => tableState.colSpan)
+		const render = computed(() => tableState._renderLoading)
 
-		return h('tr', {}, [
-			h(
-				'td',
-				{
-					attrs: { colSpan },
-					class: 'kt-table__loader',
-				},
-				[render(h)],
-			),
-		])
+		return () =>
+			h('tr', {}, [
+				h(
+					'td',
+					{
+						attrs: { colSpan: colSpan.value },
+						class: 'kt-table__loader',
+					},
+					[render.value(h)],
+				),
+			])
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
index 92fa2d09f2..2e84d1c360 100644
--- a/packages/kotti-ui/source/kotti-table/constants.ts
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import type { CreateElement, InjectionKey } from 'vue'
+import type { CreateElement, InjectionKey, VNodeChildren } from 'vue'
 
 import type { KottiTable } from './types'
 import type { TypedEmit } from '../types/typed-emit'
+import type { TableStore } from './logic/store'
 
 export const IS_ASC = /ascending|^1/
 export const IS_DSC = /descending|^-1/
@@ -31,6 +32,17 @@ interface KottiTableContext {
 		selectionChange: unknown
 		sortChange: unknown
 	}>
+	_renderEmpty: (h: CreateElement) => VNodeChildren
+	_renderExpand: (
+		h: CreateElement,
+		payload: {
+			data: KottiTable.Row.Props
+			row: KottiTable.Row.Props
+			rowIndex: number
+		},
+	) => VNodeChildren
+	_renderLoading: (h: CreateElement) => VNodeChildren
+	colSpan: number
 	tdClasses: string | string[] | null
 }
 
@@ -45,7 +57,8 @@ interface KottiTableContext {
  */
 export const KT_TABLE: InjectionKey<KottiTableContext> =
 	'KT_TABLE' as unknown as symbol
-export const KT_STORE = 'KT_STORE'
+export const KT_STORE: InjectionKey<TableStore> =
+	'KT_STORE' as unknown as symbol
 export const KT_LAYOUT = 'KT_LAYOUT'
 export const KT_TABLE_STATE_PROVIDER = 'KT_TABLE_STATE_PROVIDER'
 export const COLUMN_TYPE = Symbol('kt-table-column')
diff --git a/packages/kotti-ui/source/kotti-table/mixins.ts b/packages/kotti-ui/source/kotti-table/mixins.ts
index 3df37b90ce..0296b680fe 100644
--- a/packages/kotti-ui/source/kotti-table/mixins.ts
+++ b/packages/kotti-ui/source/kotti-table/mixins.ts
@@ -4,7 +4,7 @@ import { KT_STORE, KT_TABLE_STATE_PROVIDER, KT_TABLE } from './constants'
 export const TableColumnsStateMixin = {
 	inject: {
 		[KT_TABLE as symbol]: { default: false },
-		[KT_STORE]: { default: false },
+		[KT_STORE as symbol]: { default: false },
 		[KT_TABLE_STATE_PROVIDER]: {
 			default: {
 				get store(): void {
diff --git a/packages/vue-project/src/App.vue b/packages/vue-project/src/App.vue
new file mode 100644
index 0000000000..f1656570e9
--- /dev/null
+++ b/packages/vue-project/src/App.vue
@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import '@3yourmind/kotti-ui/dist/style.css'
+import '@3yourmind/yoco/style.css'
+
+import {
+	KtButton,
+	KtFieldDate,
+	KtFieldText,
+	KtFieldToggle,
+	KtForm,
+	KtNavbar,
+	KtActionbar,
+	KtUserMenu,
+	KtI18nContext,
+} from '@3yourmind/kotti-ui'
+import { ref } from 'vue'
+
+const alerty = (some: string) => {
+	window.alert(some)
+}
+
+const formValue = ref({
+	name: null,
+	birthday: null,
+	isNice: false,
+})
+const isNarrow = ref(false)
+</script>
+
+<template>
+	<KtI18nContext locale="en-US">
+		<div class="kt-container">
+			<KtNavbar
+				:isNarrow="isNarrow"
+				logoUrl="https://c.tenor.com/KvQWsHSsiMwAAAAC/tenor.gif"
+				:sections="[
+					{
+						title: 'Order Management',
+						links: [
+							{
+								component: 'a',
+								icon: 'invoice',
+								isActive: false,
+								props: {
+									href: '#',
+								},
+								title: 'Orders',
+							},
+							{
+								component: 'a',
+								icon: 'request',
+								isActive: false,
+								props: {
+									href: '#',
+								},
+								title: 'Quotes',
+							},
+						],
+					},
+				]"
+				@setIsNarrow="(val) => (isNarrow = val)"
+			>
+				<template #navbar-footer>
+					<KtUserMenu
+						:sections="[
+							{
+								links: [
+									{
+										component: 'a',
+										props: {
+											href: '#',
+										},
+										title: 'User Panel',
+									},
+									{
+										component: 'a',
+										props: {
+											href: '#',
+										},
+										title: 'Service Panel',
+									},
+								],
+								title: 'Switch To',
+							},
+							{
+								links: [
+									{
+										component: 'a',
+										props: {
+											href: '#',
+										},
+										title: '2YOURMIND Service',
+									},
+									{
+										component: 'a',
+										props: {
+											href: '#',
+										},
+										title: '3YOURMIND Service',
+									},
+									{
+										component: 'a',
+										props: {
+											href: '#',
+										},
+										title: '4YOURMIND Service',
+									},
+								],
+								title: 'Recent Service',
+							},
+							{
+								links: [
+									{
+										component: 'a',
+										props: {
+											href: '#',
+										},
+										title: 'Settings',
+									},
+									{
+										component: 'nuxt-link',
+										props: {
+											to: '/usage/layouts/navbar',
+										},
+										title: 'Logout (Close Example)',
+									},
+								],
+								title: null,
+							},
+						]"
+						userName="Jony'O Five"
+						userStatus="Invisible"
+					/>
+				</template>
+			</KtNavbar>
+			<KtActionbar
+				slot="actionbar"
+				headerTitle="KtContainer Example"
+				:menu="[
+					{
+						label: 'First Link',
+						to: '/examples/layouts',
+						icon: 'user',
+						active: false,
+						disabled: false,
+					},
+					{
+						label: 'Second Link',
+						to: 'https://google.com',
+						icon: 'basket',
+						active: true,
+						disabled: false,
+					},
+					{
+						label: 'Third Link',
+						to: '/',
+						icon: 'bell',
+						active: false,
+						disabled: true,
+					},
+				]"
+			/>
+			<main class="workspace">
+				<KtButton label="hello" type="primary" @click="() => alerty('hello')" />
+				<KtForm v-model:value="formValue">
+					<KtFieldText formKey="name" label="name">
+						<template #helpText>
+							<strong> Let me help you </strong>
+						</template>
+					</KtFieldText>
+					<KtFieldDate formKey="birthday" label="birthday">
+						<template #helpText>
+							<strong> Let me help you </strong>
+						</template>
+					</KtFieldDate>
+					<KtFieldToggle formKey="isNice" label="toggle">
+						<template #helpText>
+							<strong> Let me help you </strong>
+						</template>
+					</KtFieldToggle>
+				</KtForm>
+			</main>
+		</div> </KtI18nContext
+	>locale
+</template>
+
+<style scoped>
+main {
+	padding: 80px;
+}
+
+/* header {
+	line-height: 1.5;
+}
+
+.logo {
+	display: block;
+	margin: 0 auto 2rem;
+}
+
+@media (min-width: 1024px) {
+	header {
+		display: flex;
+		place-items: center;
+		padding-right: calc(var(--section-gap) / 2);
+	}
+
+	.logo {
+		margin: 0 2rem 0 0;
+	}
+
+	header .wrapper {
+		display: flex;
+		place-items: flex-start;
+		flex-wrap: wrap;
+	}
+} */
+</style>

From 25825aa4ef171a24d6277f1e3ec4a2bc4f0369d6 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Mon, 22 Jul 2024 15:56:00 +0200
Subject: [PATCH 03/13] version(kotti-ui@6.1.0): Composition API for some kotti
 table subcomponents

---
 packages/kotti-ui/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
index 48073b31f7..58ba9d2a80 100644
--- a/packages/kotti-ui/package.json
+++ b/packages/kotti-ui/package.json
@@ -96,5 +96,5 @@
 	"style": "./dist/style.css",
 	"type": "module",
 	"types": "./dist/index.d.ts",
-	"version": "6.0.1"
+	"version": "6.1.0"
 }

From 2d3d100fa106740d731535a08b151b52b1ec475d Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Tue, 23 Jul 2024 09:36:52 +0200
Subject: [PATCH 04/13] version(kotti-ui@6.1.1): externalize translations

create helper function to handle eventual default keys when importing element-ui's translation objects
---
 packages/kotti-ui/package.json               |  2 +-
 packages/kotti-ui/source/kotti-i18n/hooks.ts | 69 +++++++++++++++-----
 packages/kotti-ui/vite.config.ts             |  2 +-
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
index 58ba9d2a80..3462beb148 100644
--- a/packages/kotti-ui/package.json
+++ b/packages/kotti-ui/package.json
@@ -96,5 +96,5 @@
 	"style": "./dist/style.css",
 	"type": "module",
 	"types": "./dist/index.d.ts",
-	"version": "6.1.0"
+	"version": "6.1.1"
 }
diff --git a/packages/kotti-ui/source/kotti-i18n/hooks.ts b/packages/kotti-ui/source/kotti-i18n/hooks.ts
index a137d8189f..90430e8d29 100644
--- a/packages/kotti-ui/source/kotti-i18n/hooks.ts
+++ b/packages/kotti-ui/source/kotti-i18n/hooks.ts
@@ -1,9 +1,4 @@
 import elementLocale from 'element-ui/lib/locale/index.js'
-import elementDe from 'element-ui/lib/locale/lang/de.js'
-import elementEn from 'element-ui/lib/locale/lang/en.js'
-import elementEs from 'element-ui/lib/locale/lang/es.js'
-import elementFr from 'element-ui/lib/locale/lang/fr.js'
-import elementJa from 'element-ui/lib/locale/lang/ja.js'
 import type { Ref, UnwrapRef } from 'vue'
 import { computed, inject, provide, reactive, watch } from 'vue'
 
@@ -59,6 +54,37 @@ export const useTranslationNamespace = <NS extends keyof KottiI18n.Messages>(
 	return computed(() => context.messages[namespace])
 }
 
+interface DefaultObject<R extends Record<string, unknown>> {
+	default: DefaultObject<R> | R
+}
+
+/**
+ * HACK: This function works around a CJS/ESM/EsModule interop issue.
+ *
+ * The objects we import at `element-ui/lib/locale/lang/[a-z]{2}.js` are EsModules
+ * (exports.__esModule = true). Due to current javascript flavour shenanigans,
+ * the imported object that we need can be found at the root, at the `.default` key,
+ * or even at the `.default.default` key.
+ * To mitigate we iterate down the potential default chain until we arrive at the
+ * right position.
+ */
+const accessDefaultKey = <R extends Record<string, unknown>>(
+	obj: DefaultObject<R>,
+): R => {
+	if (!('default' in obj)) return obj
+
+	let current: DefaultObject<R> | R = obj
+
+	// Practically, this should terminate after at most 2 iterations. Make it 10 for good measure
+	for (let i = 0; i < 10; i++) {
+		current = current.default as DefaultObject<R> | R
+		if (!('default' in current)) {
+			return current
+		}
+	}
+	throw new Error('accessDefaultKey: could not exhaust nested default keys')
+}
+
 /**
  * Provides the translation context to child components
  */
@@ -89,19 +115,26 @@ export const useI18nProvide = ({
 	 */
 	watch(
 		locale,
-		(newValue) => {
-			const elementUiTranslations = {
-				'en-US': elementEn,
-				'de-DE': elementDe,
-				'es-ES': elementEs,
-				'fr-FR': elementFr,
-				'ja-JP': elementJa,
-			}[newValue]
-
-			if ('default' in elementUiTranslations)
-				throw new Error('Detected Broken Build')
-
-			elementLocale.use(elementUiTranslations)
+		async (newValue) => {
+			try {
+				const elementUiTranslations = await {
+					/* eslint-disable @typescript-eslint/naming-convention */
+					'en-US': () => import('element-ui/lib/locale/lang/en.js'),
+					'de-DE': () => import('element-ui/lib/locale/lang/de.js'),
+					'es-ES': () => import('element-ui/lib/locale/lang/es.js'),
+					'fr-FR': () => import('element-ui/lib/locale/lang/fr.js'),
+					'ja-JP': () => import('element-ui/lib/locale/lang/ja.js'),
+					/* eslint-enable @typescript-eslint/naming-convention */
+				}[newValue]()
+
+				const resolvedEsModuleInterop = accessDefaultKey(elementUiTranslations)
+
+				elementLocale.use(resolvedEsModuleInterop)
+			} catch (error) {
+				// eslint-disable-next-line no-console
+				console.error(error)
+				throw error
+			}
 		},
 		{ immediate: true, flush: 'post' },
 	)
diff --git a/packages/kotti-ui/vite.config.ts b/packages/kotti-ui/vite.config.ts
index e81cdb5b88..cfeaeb58ae 100644
--- a/packages/kotti-ui/vite.config.ts
+++ b/packages/kotti-ui/vite.config.ts
@@ -56,7 +56,7 @@ export default defineConfig(({ mode }) => {
 	const external = [
 		...Object.keys(packageJSON.peerDependencies),
 		...Object.keys(packageJSON.dependencies),
-		/.*element-ui\/lib\/date-picker.js.*/,
+		/.*element-ui.*/,
 		/.*tippy\.js.*/,
 		/lodash\/.*/,
 		/vue\/.*/,

From 55d2c71a5537bf0a1ed6b1a5e57b14d689970476 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Wed, 24 Jul 2024 17:27:33 +0200
Subject: [PATCH 05/13] refactor(KtTable): use Composition API in
 TableHeader.vue

Co-Authored-By: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com>
---
 .../kotti-ui/source/kotti-table/KtTable.vue   |   2 +-
 .../kotti-table/components/TableHeader.vue    | 263 +++++++-----------
 .../kotti-table/components/TableRowCell.ts    |   1 +
 .../kotti-ui/source/kotti-table/constants.ts  |  13 +-
 .../source/kotti-table/logic/column.ts        | 119 ++++----
 .../source/kotti-table/logic/select.ts        |   1 +
 .../source/kotti-table/logic/types.ts         |  13 +-
 packages/kotti-ui/source/kotti-table/types.ts |  10 +-
 8 files changed, 191 insertions(+), 231 deletions(-)

diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
index 0404162888..96c4ed1229 100644
--- a/packages/kotti-ui/source/kotti-table/KtTable.vue
+++ b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -53,7 +53,7 @@ export const INITIAL_TABLE_STORE_PROPS = [
 	'sortable',
 	'sortedColumns',
 	'sortMultiple',
-]
+] as const
 
 export default {
 	name: 'KtTable',
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
index 737557d176..9e11220bcd 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
@@ -3,7 +3,7 @@
 		<tr :class="tableHeaderClass">
 			<th v-if="isExpandable" class="th-expandable" />
 			<th v-if="isSelectable" class="th-selectable kt-table__checkbox-col">
-				<div class="form-group">
+				<div class="form-group" @click="handleSelectAll">
 					<label class="form-checkbox">
 						<input :checked="isAllSelected" type="checkbox" />
 						<i
@@ -11,37 +11,33 @@
 							:style="isAllRowsDisabled ? { cursor: 'not-allowed' } : {}"
 						/>
 					</label>
-					<div
-						class="kt-table-checkbox-col__click-area"
-						@click="handleSelectAll($event)"
-					/>
 				</div>
 			</th>
 			<th
 				v-for="(column, columnIndex) in tableColumns"
 				:key="column.prop"
 				:class="getThClasses(column)"
-				:draggable="isDraggable"
+				:draggable="useColumnDragToOrder"
 				:style="getThStyle(column)"
 				@click="handleThClick(column)"
-				@dragend="dragEnd"
-				@dragenter="dragEnter($event, column)"
+				@dragend="handleDragEnd"
+				@dragenter="handleDragEnter(column)"
 				@dragover.prevent
-				@dragstart="dragStart($event, column)"
-				@drop="drop($event, column)"
+				@dragstart="handleDragStart(column)"
+				@drop="handleDrop(column)"
 			>
 				<TableHeaderCell v-bind="{ column, columnIndex }" />
-				<div v-if="useQuickSortControl" class="kt-table__controls">
-					<div
-						v-if="useQuickSortControl && (canSort(column) || isSorted(column))"
-						class="kt-table__quick-sort-control clickable"
-					>
-						<i :class="['yoco', { active: isSortedByAsc(column) }]"
-							>triangle_up</i
-						>
-						<i :class="['yoco', { active: isSortedByDsc(column) }]"
-							>triangle_down</i
-						>
+				<div
+					v-if="useQuickSortControl && (canSort(column) || isSorted(column))"
+					class="kt-table__controls"
+				>
+					<div class="kt-table__quick-sort-control clickable">
+						<i :class="{ active: isSortedByAsc(column), yoco: true }">
+							triangle_up
+						</i>
+						<i :class="{ active: isSortedByDsc(column), yoco: true }">
+							triangle_down
+						</i>
 					</div>
 				</div>
 			</th>
@@ -51,146 +47,102 @@
 </template>
 
 <script lang="ts">
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { KT_TABLE, KT_STORE } from '../constants'
 import { KottiTable } from '../types'
+import { computed, defineComponent, inject, ref } from 'vue'
 
 import { TableHeaderCell } from './TableHeaderCell'
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const KtTableHeader: any = {
+export default defineComponent({
 	name: 'KtTableHeader',
-	components: { TableHeaderCell },
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	data() {
-		return {
-			draggingColumn: null,
-			columnDragOver: null,
-		}
+	components: {
+		TableHeaderCell,
 	},
-	computed: {
-		isAllRowsDisabled(): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].state.isAllRowsDisabled
-		},
-		isAllSelected(): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].state.isAllSelected
-		},
-		tableColumns(): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].state.columns
-		},
-		hasActions(): any {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].hasActions
-		},
-		isDraggable(): any {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].useColumnDragToOrder
-		},
-		isDraggingColumn(): any {
-			// @ts-expect-error vue's type resolution is broken for this file
-			return Boolean(this.draggingColumn)
-		},
-		isExpandable(): any {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].isExpandable
-		},
-		isSelectable(): any {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].isSelectable
-		},
-		useQuickSortControl(): any {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].useQuickSortControl
-		},
-		tableHeaderClass(): any {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return ['table-header-row', this[KT_TABLE].headerClass]
-		},
-	},
-	methods: {
-		handleSelectAll(_event: unknown): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			this[KT_STORE].commit('toggleAllSelection')
-		},
-		handleThClick(column: unknown): any {
-			// @ts-expect-error vue's type resolution is broken for this file
-			if (this.useQuickSortControl && this.canSort(column)) {
-				this.changeSort(column)
-			}
-		},
-		getThClasses(column: any): any {
-			return [
+	setup() {
+		const tableState = inject(KT_TABLE)
+		const tableStore = inject(KT_STORE)
+
+		if (!tableState || !tableStore)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const dropTargetColumn = ref<KottiTable.Column.PropsInternal | null>(null)
+		const draggedColumn = ref<KottiTable.Column.PropsInternal | null>(null)
+
+		const useColumnDragToOrder = computed(() => tableState.useColumnDragToOrder)
+		const isDraggedOver = (column: unknown) =>
+			column === dropTargetColumn.value && draggedColumn.value !== column
+
+		const useQuickSortControl = computed(() => tableState.useQuickSortControl)
+
+		const canSort = (column: unknown) => tableStore.get('canSort', column)
+		const isSorted = (column: unknown) => tableStore.get('isSorted', column)
+
+		return {
+			canSort,
+			handleDragEnd: () => {
+				dropTargetColumn.value = null
+			},
+			handleDragEnter: (column: KottiTable.Column.PropsInternal) => {
+				dropTargetColumn.value = column
+			},
+			handleDragStart: (column: KottiTable.Column.PropsInternal) => {
+				draggedColumn.value = column
+			},
+			handleDrop: (column: KottiTable.Column.PropsInternal) => {
+				if (draggedColumn.value) {
+					tableStore.commit('orderBefore', draggedColumn.value, column)
+					draggedColumn.value = null
+				}
+				dropTargetColumn.value = null
+			},
+			getThClasses: (column: KottiTable.Column.PropsInternal) => [
 				{
-					['drag-over']: this.isDraggedOver(column),
-					sortable: this.canSort(column),
-					// @ts-expect-error vue's type resolution is broken for this file
-					dragging: this.isDraggable,
-					sorted: this.isSorted(column),
-					clickable: this.canSort(column),
+					'drag-over': isDraggedOver(column),
+					clickable: canSort(column),
+					dragging: useColumnDragToOrder.value,
+					sortable: canSort(column),
+					sorted: isSorted(column),
 				},
-				// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-				this[KT_TABLE].thClasses,
+				tableState.thClasses,
 				column.thClass,
-			]
-		},
-		getThStyle(column: any): any {
-			return {
-				textAlign: column.align || KottiTable.Column.Align.LEFT,
-				width: column.width || 'auto',
-			}
-		},
-		canSort(column: unknown): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('canSort', column)
-		},
-		isSorted(column: unknown): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('isSorted', column)
-		},
-		changeSort(column: unknown): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			this[KT_STORE].commit('sort', { column })
-		},
-		isSortedByAsc(column: unknown): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('isSortedByAsc', column)
-		},
-		isSortedByDsc(column: unknown): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('isSortedByDsc', column)
-		},
-		dragStart(_event: unknown, column: any): any {
-			// @ts-expect-error vue's type resolution is broken for this file
-			this.draggingColumn = column
-		},
-		dragEnter(_event: unknown, column: any): any {
-			// @ts-expect-error vue's type resolution is broken for this file
-			this.columnDragOver = column
-		},
-		dragEnd(): any {
-			// @ts-expect-error vue's type resolution is broken for this file
-			this.columnDragOver = null
-		},
-		isDraggedOver(column: unknown): any {
-			// @ts-expect-error vue's type resolution is broken for this file
-			return column === this.columnDragOver && this.draggingColumn !== column
-		},
-		drop(_event: unknown, column: unknown): any {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			this[KT_STORE].commit('orderBefore', this.draggingColumn, column)
-			// @ts-expect-error vue's type resolution is broken for this file
-			this.draggingColumn = null
-			// @ts-expect-error vue's type resolution is broken for this file
-			this.columnDragOver = null
-		},
+			],
+			getThStyle: (column: KottiTable.Column.PropsInternal) => ({
+				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+				textAlign: column.align ?? KottiTable.Column.Align.LEFT,
+				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+				width: column.width ?? 'auto',
+			}),
+			handleSelectAll: () => {
+				tableStore.commit('toggleAllSelection')
+			},
+			handleThClick: (column: KottiTable.Column.PropsInternal) => {
+				if (!useQuickSortControl.value) return
+				if (!canSort(column)) return
+
+				tableStore.commit('sort', { column })
+			},
+			hasActions: computed(() => tableState.hasActions),
+			isAllRowsDisabled: computed(() => tableStore.state.isAllRowsDisabled),
+			isAllSelected: computed(() => tableStore.state.isAllSelected),
+			isExpandable: computed(() => tableState.isExpandable),
+			isSelectable: computed(() => tableState.isSelectable),
+			isSorted,
+			isSortedByAsc: (column: KottiTable.Column.PropsInternal) =>
+				tableStore.get('isSortedByAsc', column),
+			isSortedByDsc: (column: KottiTable.Column.PropsInternal) =>
+				tableStore.get('isSortedByDsc', column),
+			tableColumns: computed(() => tableStore.state.columns),
+			tableHeaderClass: computed(() => [
+				'table-header-row',
+				tableState.headerClass,
+			]),
+			useColumnDragToOrder,
+			useQuickSortControl,
+		}
 	},
-}
-
-export default KtTableHeader
+})
 </script>
 
 <style lang="scss" scoped>
@@ -204,15 +156,6 @@ export default KtTableHeader
 	position: relative;
 }
 
-.kt-table-checkbox-col__click-area {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	cursor: pointer;
-}
-
 th {
 	box-sizing: border-box;
 	padding: var(--unit-2) var(--unit-1);
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
index 1cd2a111dc..5cd4ad7eca 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
@@ -50,6 +50,7 @@ export const TableRowCell = defineComponent({
 			return {
 				// @ts-expect-error not clear where styles is coming from, will fix later
 				...column.styles,
+				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- eslint might be correct here
 				...(column.align ? { textAlign: column.align } : {}),
 				...(column.width ? { width: column.width } : {}),
 				...(column.maxWidth ? { maxWidth: column.maxWidth } : {}),
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
index 2e84d1c360..94d2b52933 100644
--- a/packages/kotti-ui/source/kotti-table/constants.ts
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -43,7 +43,14 @@ interface KottiTableContext {
 	) => VNodeChildren
 	_renderLoading: (h: CreateElement) => VNodeChildren
 	colSpan: number
-	tdClasses: string | string[] | null
+	hasActions: boolean
+	headerClass: string | string[] | Record<string, unknown> | null
+	isExpandable: boolean
+	isSelectable: boolean
+	tdClasses: string | string[] | Record<string, unknown> | null
+	thClasses: string | string[] | Record<string, unknown> | null
+	useColumnDragToOrder: boolean
+	useQuickSortControl: boolean
 }
 
 /**
@@ -65,8 +72,8 @@ export const COLUMN_TYPE = Symbol('kt-table-column')
 
 export const DEFAULT_DISABLE_ROW = (): boolean => false
 
-export const PUBLIC_SORT_PROPS = ['prop', 'sortBy', 'sortOrder']
-export const PUBLIC_COLUMN_PROPS = ['prop', 'order', 'hidden']
+export const PUBLIC_SORT_PROPS = ['prop', 'sortBy', 'sortOrder'] as const
+export const PUBLIC_COLUMN_PROPS = ['prop', 'order', 'hidden'] as const
 
 export const DEFAULT_RENDER_CELL = function defaultRenderCell(
 	_h: CreateElement,
diff --git a/packages/kotti-ui/source/kotti-table/logic/column.ts b/packages/kotti-ui/source/kotti-table/logic/column.ts
index f760b3643f..c3a856d75f 100644
--- a/packages/kotti-ui/source/kotti-table/logic/column.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/column.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import pick from 'lodash/pick.js'
+import pickBy from 'lodash/pickBy.js'
 import Vue from 'vue'
 
 import { PUBLIC_COLUMN_PROPS } from '../constants'
@@ -16,51 +17,8 @@ export function getColumnRealIndex(state: any, column: any) {
 	return state._columnsArray.findIndex(({ id }: any) => id == column.id)
 }
 
-function getColumn(state: any, column: any = {}) {
-	return state._columns[column.prop]
-}
-
 export function getColumnIndex(state: any, column: any) {
-	return getColumn(state, column).index
-}
-
-function setColumn(state: any, { column, index, deleted }: any) {
-	const { _columns = {} } = state
-	let newColumn = column
-	const oldColumn = _columns[newColumn.prop]
-	if (oldColumn) {
-		if (deleted) {
-			_columns[newColumn.prop]._deleted = false
-		} else {
-			const isNewColumnPropDefined = newColumn.isPropDefined
-			const isOldColumnSlotDefined = oldColumn.isPropDefined === false
-			if (isNewColumnPropDefined && isOldColumnSlotDefined) {
-				newColumn = pick(newColumn, PUBLIC_COLUMN_PROPS)
-			}
-
-			const filteredColumn = Object.fromEntries(
-				Object.entries(newColumn).filter((kv) => kv[1] !== undefined),
-			)
-			newColumn = { ...oldColumn, ...filteredColumn }
-			Vue.set(_columns, newColumn.prop, newColumn)
-		}
-	} else {
-		// eslint-disable-next-line unicorn/explicit-length-check
-		newColumn.index = index || Object.keys(_columns).length
-		Vue.set(_columns, newColumn.prop, newColumn)
-	}
-
-	if (newColumn.sortOrder !== KottiTable.Column.SortOrders.NONE) {
-		setSortedColumn(state, newColumn)
-	}
-	if (newColumn.hidden === true) {
-		setHiddenColumn(state, newColumn)
-	}
-	if (newColumn.filter !== undefined) {
-		setFilteredColumn(state, newColumn)
-	}
-
-	return newColumn
+	return state._columns[column.prop].index
 }
 
 export function setColumnsArray(
@@ -73,7 +31,7 @@ export function setColumnsArray(
 	state[prop] = columns.map((column: any) => {
 		// eslint-disable-next-line no-param-reassign
 		column = pick(column, shapeKeys)
-		const oldColumn = getColumn(state, column) || {}
+		const oldColumn = state._columns[column.prop] ?? {}
 		return mergeStrategy(oldColumn, column)
 	})
 }
@@ -112,14 +70,62 @@ export const defaultState: Store.StateComponents.Column = {
 
 export const mutations: Store.MutationComponents.Column = {
 	insertColumn(store, { column, index }) {
-		const deleted = store.state._destroyedColumns[column.prop]
-		setColumn(store.state, { column, index, deleted })
-		deleted && (store.state._destroyedColumns[column.prop] = 0)
+		const { state } = store
+		const deleted = state._destroyedColumns[column.prop]
+
+		const newColumn: KottiTable.Column.PropsInternal = (() => {
+			const oldColumn = state._columns[column.prop]
+
+			if (!oldColumn) {
+				return {
+					...column,
+					index: index ?? Object.keys(state._columns).length,
+				}
+			}
+
+			if (deleted) {
+				return {
+					...oldColumn,
+					_deleted: false,
+				}
+			}
+
+			// migrate from slot to props
+			const isNewColumnPropDefined = column.isPropDefined
+			const isOldColumnSlotDefined = !oldColumn.isPropDefined
+
+			return pickBy(
+				{
+					...oldColumn,
+					...(isNewColumnPropDefined && isOldColumnSlotDefined
+						? pick(column, PUBLIC_COLUMN_PROPS)
+						: column),
+				},
+				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+				(value) => value !== undefined,
+			) as KottiTable.Column.PropsInternal
+		})()
+		Vue.set(state._columns, newColumn.prop, newColumn)
+
+		if (newColumn.sortOrder !== KottiTable.Column.SortOrders.NONE) {
+			setSortedColumn(state, newColumn)
+		}
+		if (newColumn.hidden === true) {
+			setHiddenColumn(state, newColumn)
+		}
+		// @ts-expect-error filter is a dead feature, can be ignored
+		if (newColumn.filter !== undefined) {
+			setFilteredColumn(state, newColumn)
+		}
+
+		if (deleted) {
+			Vue.set(state._destroyedColumns, column.prop, 0)
+		}
 		store.commit('updateColumns', { emitChange: false })
 	},
 	removeColumn(store, column) {
 		// eslint-disable-next-line no-param-reassign
-		column = getColumn(store.state, column)
+		column = store.state._columns[column.prop]
 		if (column) {
 			column._deleted = true
 			store.state._destroyedColumns[column.prop] = 1
@@ -127,18 +133,11 @@ export const mutations: Store.MutationComponents.Column = {
 		}
 	},
 	setColumns(store, columns = store.state._columnsArray) {
-		const { state } = store
-		const pickedColumns = columns.map((col: any) =>
-			pick(col, PUBLIC_COLUMN_PROPS),
-		)
-		for (const col of pickedColumns) {
-			const column = getColumn(state, col) //getColumn: returns state._columns[col.prop]
+		for (const columnsEntry of columns) {
+			const pickedColumn = pick(columnsEntry, PUBLIC_COLUMN_PROPS)
+			const column = store.state._columns[pickedColumn.prop]
 			if (column) {
-				Object.assign(column, col)
-				// FIXME: The following mutation literally only works because
-				// Object.assign modifies the state directly
-				// without committing/emitting, of course
-				// column.hidden = col.hidden
+				Object.assign(column, pickedColumn)
 			}
 		}
 		store.commit('updateColumns', {
diff --git a/packages/kotti-ui/source/kotti-table/logic/select.ts b/packages/kotti-ui/source/kotti-table/logic/select.ts
index 8418a6751d..89dca904fb 100644
--- a/packages/kotti-ui/source/kotti-table/logic/select.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/select.ts
@@ -92,6 +92,7 @@ export const mutations: Store.MutationComponents.Select = {
 		store.commit('updateDisabledRows')
 		const { rows = [], isAllRowsDisabled, enabledRows } = state
 		if (rows.length === 0 || isAllRowsDisabled) {
+			// FIXME: Maybe we should not commit anything here and only return
 			store.commit('setSelected', [])
 			return
 		}
diff --git a/packages/kotti-ui/source/kotti-table/logic/types.ts b/packages/kotti-ui/source/kotti-table/logic/types.ts
index 3129fc2538..2a6d1d9264 100644
--- a/packages/kotti-ui/source/kotti-table/logic/types.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/types.ts
@@ -1,15 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import type { Kotti } from '../../types'
+import type { KottiTable } from '../types'
 import type { TableStore } from './store'
 
 export module Store {
 	export module StateComponents {
 		export type Column = {
-			_columns: any
-			_columnsArray: any[]
+			_columns: Record<string, KottiTable.Column.PropsInternal>
+			_columnsArray: KottiTable.Column.PropsInternal[]
 			_destroyedColumns: Record<string, number>
-			columns: any
+			columns: KottiTable.Column.PropsInternal[]
 			refreshColumnArray: boolean
 		}
 
@@ -83,7 +84,7 @@ export module Store {
 			insertColumn(
 				this: TableStore,
 				store: TableStore,
-				payload: { column: any; index?: number },
+				payload: { column: KottiTable.Column.PropsInternal; index?: number },
 			): void
 			removeColumn(this: TableStore, store: TableStore, column: any): void
 			setColumns(this: TableStore, store: TableStore, columns: any): void
@@ -170,8 +171,8 @@ export module Store {
 				this: TableStore,
 				store: TableStore,
 				options: {
-					column: any
-					order: any
+					column: KottiTable.Column.PropsInternal
+					order?: any
 				},
 			): void
 		}
diff --git a/packages/kotti-ui/source/kotti-table/types.ts b/packages/kotti-ui/source/kotti-table/types.ts
index 7419d98738..250f5a3a8c 100644
--- a/packages/kotti-ui/source/kotti-table/types.ts
+++ b/packages/kotti-ui/source/kotti-table/types.ts
@@ -97,12 +97,20 @@ export module KottiTable {
 			) => VNode
 		}
 
-		export type PropsInternal = Omit<Props, 'renderCell' | 'renderHeader'> & {
+		export type PropsInternal = Omit<
+			Props,
+			'align' | 'renderCell' | 'renderHeader' | 'width'
+		> & {
+			_deleted: boolean
+			align: Align
+			id: string
+			isPropDefined: boolean
 			renderCell: (h: CreateElement, data: Context) => VNodeChildren
 			renderHeader: (
 				h: CreateElement,
 				data: Pick<Context, 'column' | 'columnIndex' | 'value'>,
 			) => VNodeChildren
+			width: string
 		}
 
 		export module Slots {

From d5eadade631888fbe35373c58d4369f2e85f8057 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Wed, 24 Jul 2024 22:12:49 +0200
Subject: [PATCH 06/13] dep(zod): lock version to v3.23.6

reasoning: (see also here -> <https://github.com/colinhacks/zod/issues/3435>)
other zod 3.23 version may lead to typescript may lead to ts errors like:
error TS2589: Type instantiation is excessively deep and possibly infinite.
---
 internals/scripts/package.json |  2 +-
 packages/kotti-ui/package.json |  2 +-
 packages/yoco/package.json     |  2 +-
 yarn.lock                      | 12 +-----------
 4 files changed, 4 insertions(+), 14 deletions(-)

diff --git a/internals/scripts/package.json b/internals/scripts/package.json
index 849af418e1..4e59c68794 100644
--- a/internals/scripts/package.json
+++ b/internals/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"dependencies": {
-		"zod": "^3.22.5"
+		"zod": "3.23.6"
 	},
 	"devDependencies": {
 		"@types/bun": "^1.1.2"
diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
index 3462beb148..67a44cf3bd 100644
--- a/packages/kotti-ui/package.json
+++ b/packages/kotti-ui/package.json
@@ -18,7 +18,7 @@
 		"normalize.css": "^8.0.1",
 		"shortid": "^2.2.15",
 		"tippy.js": "6.x",
-		"zod": "3.23.5"
+		"zod": "3.23.6"
 	},
 	"description": "Kotti Vue Component UI",
 	"devDependencies": {
diff --git a/packages/yoco/package.json b/packages/yoco/package.json
index 9792492a3e..68fe908f95 100644
--- a/packages/yoco/package.json
+++ b/packages/yoco/package.json
@@ -15,7 +15,7 @@
 		}
 	],
 	"dependencies": {
-		"zod": "3.23.5"
+		"zod": "3.23.6"
 	},
 	"description": "3YOURMIND Icon Font",
 	"devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index b57aec2be2..179c3ce81d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16056,17 +16056,7 @@ zod-validation-error@^3.0.3:
   resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.2.0.tgz#df2ef6a8531d959324990599fb58206ca9479093"
   integrity sha512-cYlPR6zuyrgmu2wRTdumEAJGuwI7eHVHGT+VyneAQxmRAKtGRL1/7pjz4wfLhz4J05f5qoSZc3rGacswgyTjjw==
 
-zod@3.23.5:
-  version "3.23.5"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.5.tgz#c7b7617d017d4a2f21852f533258d26a9a5ae09f"
-  integrity sha512-fkwiq0VIQTksNNA131rDOsVJcns0pfVUjHzLrNBiF/O/Xxb5lQyEXkhZWcJ7npWsYlvs+h0jFWXXy4X46Em1JA==
-
-zod@^3.22.4:
+zod@3.23.6, zod@^3.22.4:
   version "3.23.6"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.6.tgz#c08a977e2255dab1fdba933651584a05fcbf19e1"
   integrity sha512-RTHJlZhsRbuA8Hmp/iNL7jnfc4nZishjsanDAfEY1QpDQZCahUp3xDzl+zfweE9BklxMUcgBgS1b7Lvie/ZVwA==
-
-zod@^3.22.5:
-  version "3.23.8"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
-  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==

From a0444c2029f4fb90172958d73cfdf9ba6441a50c Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Wed, 24 Jul 2024 22:35:02 +0200
Subject: [PATCH 07/13] dep(zod): lock zod version to v3.22.5

after initially locking to v3.23.6 didn't fix the original issue and some
subsequent experimentation, v3.22.5 turned out to be the right choice

see also -> <https://github.com/colinhacks/zod/issues/3435>
---
 internals/scripts/package.json | 2 +-
 packages/kotti-ui/package.json | 2 +-
 packages/yoco/package.json     | 2 +-
 yarn.lock                      | 7 ++++++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/internals/scripts/package.json b/internals/scripts/package.json
index 4e59c68794..d4ffc5a5f3 100644
--- a/internals/scripts/package.json
+++ b/internals/scripts/package.json
@@ -1,6 +1,6 @@
 {
 	"dependencies": {
-		"zod": "3.23.6"
+		"zod": "3.22.5"
 	},
 	"devDependencies": {
 		"@types/bun": "^1.1.2"
diff --git a/packages/kotti-ui/package.json b/packages/kotti-ui/package.json
index 67a44cf3bd..e4720595e2 100644
--- a/packages/kotti-ui/package.json
+++ b/packages/kotti-ui/package.json
@@ -18,7 +18,7 @@
 		"normalize.css": "^8.0.1",
 		"shortid": "^2.2.15",
 		"tippy.js": "6.x",
-		"zod": "3.23.6"
+		"zod": "3.22.5"
 	},
 	"description": "Kotti Vue Component UI",
 	"devDependencies": {
diff --git a/packages/yoco/package.json b/packages/yoco/package.json
index 68fe908f95..7a7c9831d6 100644
--- a/packages/yoco/package.json
+++ b/packages/yoco/package.json
@@ -15,7 +15,7 @@
 		}
 	],
 	"dependencies": {
-		"zod": "3.23.6"
+		"zod": "3.22.5"
 	},
 	"description": "3YOURMIND Icon Font",
 	"devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 179c3ce81d..d983a2db76 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16056,7 +16056,12 @@ zod-validation-error@^3.0.3:
   resolved "https://registry.yarnpkg.com/zod-validation-error/-/zod-validation-error-3.2.0.tgz#df2ef6a8531d959324990599fb58206ca9479093"
   integrity sha512-cYlPR6zuyrgmu2wRTdumEAJGuwI7eHVHGT+VyneAQxmRAKtGRL1/7pjz4wfLhz4J05f5qoSZc3rGacswgyTjjw==
 
-zod@3.23.6, zod@^3.22.4:
+zod@3.22.5:
+  version "3.22.5"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.5.tgz#b9b09db03f6700b0d0b75bf0dbf0c5fc46155220"
+  integrity sha512-HqnGsCdVZ2xc0qWPLdO25WnseXThh0kEYKIdV5F/hTHO75hNZFp8thxSeHhiPrHZKrFTo1SOgkAj9po5bexZlw==
+
+zod@^3.22.4:
   version "3.23.6"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.6.tgz#c08a977e2255dab1fdba933651584a05fcbf19e1"
   integrity sha512-RTHJlZhsRbuA8Hmp/iNL7jnfc4nZishjsanDAfEY1QpDQZCahUp3xDzl+zfweE9BklxMUcgBgS1b7Lvie/ZVwA==

From c11643eaba97609ec330c045e4348b35a3621088 Mon Sep 17 00:00:00 2001
From: Florent Gallois <17473800+RueRivoli@users.noreply.github.com>
Date: Wed, 24 Jul 2024 18:25:24 +0300
Subject: [PATCH 08/13] feature(#970) : force internal comments for
 KtCommentInput

- added a prop forceInternal for KtCommentInput and KtComment
- if this prop is true, then the user cannot switch to public comments
- this prop is meaningful only if the prop allowInternal is true, otherwise it does nothing
---
 .../pages/usage/components/comment.vue             | 14 ++++++++++++++
 .../kotti-ui/source/kotti-comment/KtComment.vue    |  2 +-
 .../source/kotti-comment/KtCommentInput.vue        |  7 +++++--
 packages/kotti-ui/source/kotti-comment/types.ts    |  2 ++
 4 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/documentation/pages/usage/components/comment.vue b/packages/documentation/pages/usage/components/comment.vue
index 8456b2c7c4..6beaabd911 100644
--- a/packages/documentation/pages/usage/components/comment.vue
+++ b/packages/documentation/pages/usage/components/comment.vue
@@ -18,6 +18,7 @@
 					:key="comment.id"
 					v-bind="comment"
 					:allowInternal="settings.allowInternal"
+					:forceInternal="settings.forceInternal"
 					class="mb-block"
 					:dataTest="settings.dataTest"
 					:isReadOnly="settings.isReadOnly"
@@ -29,6 +30,8 @@
 				/>
 				<KtCommentInput
 					:allowInternal="settings.allowInternal"
+					:forceInternal="settings.forceInternal"
+					:isInternal="settings.isInternal"
 					:dataTest="settings.dataTest"
 					:placeholder="settings.placeholder"
 					:tabIndex="settings.tabIndex"
@@ -63,6 +66,13 @@
 							label="allowInternal"
 							type="switch"
 						/>
+						<KtFieldToggle
+							formKey="forceInternal"
+							helpText="Force Internal Comments i.e. No public access (only meaningful if allowInternal is true)"
+							isOptional
+							label="forceInternal"
+							type="switch"
+						/>
 						<KtFieldToggle
 							formKey="isReadOnly"
 							helpText="Hides KtComment action buttons"
@@ -212,6 +222,7 @@
 					:key="comment.id"
 					v-bind="comment"
 					:allowInternal="settings.allowInternal"
+					:forceInternal="settings.forceInternal"
 					class="mb-block"
 					:dangerouslyOverrideParser="dangerouslyOverrideParser"
 					:dataTest="settings.dataTest"
@@ -225,6 +236,7 @@
 				/>
 				<KtCommentInput
 					:allowInternal="settings.allowInternal"
+					:forceInternal="settings.forceInternal"
 					:dataTest="settings.dataTest"
 					:placeholder="settings.placeholder"
 					:tabIndex="settings.tabIndex"
@@ -340,6 +352,7 @@ export default defineComponent({
 		})
 		const settings = ref<{
 			allowInternal: Kotti.FieldToggle.Value
+			forceInternal: Kotti.FieldToggle.Value
 			dataTest: Kotti.FieldText.Value
 			isReadOnly: Kotti.FieldToggle.Value
 			locale: Kotti.I18n.SupportedLanguages
@@ -347,6 +360,7 @@ export default defineComponent({
 			tabIndex: Kotti.FieldNumber.Value
 		}>({
 			allowInternal: true,
+			forceInternal: false,
 			dataTest: null,
 			isReadOnly: false,
 			locale: 'en-US',
diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue
index f3407abe8b..610c5383b2 100644
--- a/packages/kotti-ui/source/kotti-comment/KtComment.vue
+++ b/packages/kotti-ui/source/kotti-comment/KtComment.vue
@@ -25,7 +25,7 @@
 			/>
 			<KtCommentInput
 				v-if="userToReply"
-				v-bind="{ isInternal, placeholder, tabIndex, userAvatar }"
+				v-bind="{ forceInternal, isInternal, placeholder, tabIndex, userAvatar }"
 				autofocus
 				:dataTest="rootDataTest"
 				isReply
diff --git a/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue b/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
index 0cf86f3194..e11ce68b7a 100644
--- a/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
+++ b/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
@@ -60,8 +60,8 @@ export default defineComponent({
 				const payload: KottiComment.Events.Add = {
 					isInternal: localIsInternal.value,
 					message: localMessage.value,
-					replyToUserId: props.replyToUserId,
 					parentId: props.parentId,
+					replyToUserId: props.replyToUserId,
 				}
 
 				emit('add', payload)
@@ -69,7 +69,10 @@ export default defineComponent({
 				localIsInternal.value = props.isInternal
 				localMessage.value = ''
 			},
-			onToggleInternal: () => (localIsInternal.value = !localIsInternal.value),
+			onToggleInternal: () => {
+				if (localIsInternal.value && props.allowInternal && props.forceInternal) return 
+				localIsInternal.value = !localIsInternal.value
+			},
 		}
 	},
 })
diff --git a/packages/kotti-ui/source/kotti-comment/types.ts b/packages/kotti-ui/source/kotti-comment/types.ts
index 17b2fad5a1..d9c8bf8493 100644
--- a/packages/kotti-ui/source/kotti-comment/types.ts
+++ b/packages/kotti-ui/source/kotti-comment/types.ts
@@ -27,6 +27,7 @@ export module KottiComment {
 
 	const sharedSchema = commentSchema.extend({
 		allowInternal: z.boolean().default(false),
+		forceInternal: z.boolean().default(false),
 		dangerouslyOverrideParser: parseFunctionSchema.default(defaultParser),
 		isReadOnly: z.boolean().default(false),
 		postEscapeParser: parseFunctionSchema.default(defaultPostEscapeParser),
@@ -169,6 +170,7 @@ export module KottiCommentInput {
 	export const propsSchema = KottiComment.propsSchema
 		.pick({
 			allowInternal: true,
+			forceInternal: true,
 			dataTest: true,
 			isInternal: true,
 			tabIndex: true,

From aec6e7b894da2a67392cb76a6c40250caca22cf4 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Wed, 24 Jul 2024 22:45:18 +0200
Subject: [PATCH 09/13] refactor(970): run eslint and prettier

---
 packages/documentation/pages/usage/components/comment.vue | 8 ++++----
 packages/kotti-ui/source/kotti-comment/KtComment.vue      | 8 +++++++-
 packages/kotti-ui/source/kotti-comment/KtCommentInput.vue | 3 ++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/documentation/pages/usage/components/comment.vue b/packages/documentation/pages/usage/components/comment.vue
index 6beaabd911..853a9db360 100644
--- a/packages/documentation/pages/usage/components/comment.vue
+++ b/packages/documentation/pages/usage/components/comment.vue
@@ -18,9 +18,9 @@
 					:key="comment.id"
 					v-bind="comment"
 					:allowInternal="settings.allowInternal"
-					:forceInternal="settings.forceInternal"
 					class="mb-block"
 					:dataTest="settings.dataTest"
+					:forceInternal="settings.forceInternal"
 					:isReadOnly="settings.isReadOnly"
 					:tabIndex="settings.tabIndex"
 					:userAvatar="currentUser.avatar"
@@ -30,9 +30,9 @@
 				/>
 				<KtCommentInput
 					:allowInternal="settings.allowInternal"
+					:dataTest="settings.dataTest"
 					:forceInternal="settings.forceInternal"
 					:isInternal="settings.isInternal"
-					:dataTest="settings.dataTest"
 					:placeholder="settings.placeholder"
 					:tabIndex="settings.tabIndex"
 					:userAvatar="currentUser.avatar"
@@ -222,10 +222,10 @@
 					:key="comment.id"
 					v-bind="comment"
 					:allowInternal="settings.allowInternal"
-					:forceInternal="settings.forceInternal"
 					class="mb-block"
 					:dangerouslyOverrideParser="dangerouslyOverrideParser"
 					:dataTest="settings.dataTest"
+					:forceInternal="settings.forceInternal"
 					:isReadOnly="settings.isReadOnly"
 					:postEscapeParser="postEscapeParser"
 					:tabIndex="settings.tabIndex"
@@ -236,8 +236,8 @@
 				/>
 				<KtCommentInput
 					:allowInternal="settings.allowInternal"
-					:forceInternal="settings.forceInternal"
 					:dataTest="settings.dataTest"
+					:forceInternal="settings.forceInternal"
 					:placeholder="settings.placeholder"
 					:tabIndex="settings.tabIndex"
 					:userAvatar="currentUser.avatar"
diff --git a/packages/kotti-ui/source/kotti-comment/KtComment.vue b/packages/kotti-ui/source/kotti-comment/KtComment.vue
index 610c5383b2..fa95624b6d 100644
--- a/packages/kotti-ui/source/kotti-comment/KtComment.vue
+++ b/packages/kotti-ui/source/kotti-comment/KtComment.vue
@@ -25,7 +25,13 @@
 			/>
 			<KtCommentInput
 				v-if="userToReply"
-				v-bind="{ forceInternal, isInternal, placeholder, tabIndex, userAvatar }"
+				v-bind="{
+					forceInternal,
+					isInternal,
+					placeholder,
+					tabIndex,
+					userAvatar,
+				}"
 				autofocus
 				:dataTest="rootDataTest"
 				isReply
diff --git a/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue b/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
index e11ce68b7a..d8c8e9c011 100644
--- a/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
+++ b/packages/kotti-ui/source/kotti-comment/KtCommentInput.vue
@@ -70,7 +70,8 @@ export default defineComponent({
 				localMessage.value = ''
 			},
 			onToggleInternal: () => {
-				if (localIsInternal.value && props.allowInternal && props.forceInternal) return 
+				if (localIsInternal.value && props.allowInternal && props.forceInternal)
+					return
 				localIsInternal.value = !localIsInternal.value
 			},
 		}

From 2fa0a3647ddf9802594e5b9b936db0c308476de2 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Thu, 25 Jul 2024 07:28:20 +0200
Subject: [PATCH 10/13] refactor(KtTable): use Composition API in TableBody
 component

---
 .../kotti-table/components/TableBody.ts       | 93 +++++++++----------
 .../kotti-ui/source/kotti-table/constants.ts  |  1 +
 2 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/packages/kotti-ui/source/kotti-table/components/TableBody.ts b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
index ffdd1a4e65..5a9d3161e6 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBody.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement } from 'vue'
+import { computed, defineComponent, h, inject } from 'vue'
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
 
 import { TableBodyEmptyRow } from './TableBodyEmptyRow'
@@ -8,61 +8,54 @@ import { TableBodyLoadingRow } from './TableBodyLoadingRow'
 import { TableRow } from './TableRow'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableBody: any = {
+export const TableBody = defineComponent({
 	name: 'TableBody',
 	components: { TableRow },
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	computed: {
-		rows(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].state.rows
-		},
-		loading(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].loading
-		},
-		showEmptyText(): unknown {
-			return this.rows.length === 0 && !this.loading
-		},
-		isExpandable(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].isExpandable
-		},
-	},
-	methods: {
-		getRowKey(row: unknown): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('getRowKey', row)
-		},
-	},
-	render(h: CreateElement) {
-		const { showEmptyText, loading, rows, isExpandable, getRowKey } = this
-		return h('tbody', {}, [
-			showEmptyText && h(TableBodyEmptyRow),
-			...(loading
-				? [h(TableBodyLoadingRow)]
-				: rows.flatMap((row: any, rowIndex: number) => {
-						const key = getRowKey(row) || rowIndex
+	setup() {
+		const tableState = inject(KT_TABLE)
+		const tableStore = inject(KT_STORE)
+		const tableLayout = inject(KT_LAYOUT)
+
+		if (!tableState || !tableStore || !tableLayout)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const rows = computed(() => tableStore.state.rows)
+		const loading = computed(() => tableState.loading)
+		const isExpandable = computed(() => tableState.isExpandable)
+		const showEmptyText = computed(
+			() => rows.value.length === 0 && !loading.value,
+		)
+
+		const getRowKey = (row: unknown) => tableStore.get('getRowKey', row)
+
+		return () =>
+			h('tbody', {}, [
+				showEmptyText.value && h(TableBodyEmptyRow),
+				...(loading.value
+					? [h(TableBodyLoadingRow)]
+					: rows.value.flatMap((row: any, rowIndex: number) => {
+							const key = getRowKey(row) || rowIndex
 
-						return [
-							h(TableRow, {
-								key,
-								props: {
-									row,
-									rowIndex,
-								},
-							}),
-							isExpandable &&
-								h(TableBodyExpandRow, {
-									// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-									key: `${key}-expansion`,
+							return [
+								h(TableRow, {
+									key,
 									props: {
 										row,
 										rowIndex,
 									},
 								}),
-						]
-					})),
-		])
+								isExpandable.value &&
+									h(TableBodyExpandRow, {
+										key: `${key}-expansion`,
+										props: {
+											row,
+											rowIndex,
+										},
+									}),
+							]
+						})),
+			])
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
index 94d2b52933..82cb3db1b0 100644
--- a/packages/kotti-ui/source/kotti-table/constants.ts
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -47,6 +47,7 @@ interface KottiTableContext {
 	headerClass: string | string[] | Record<string, unknown> | null
 	isExpandable: boolean
 	isSelectable: boolean
+	loading: boolean
 	tdClasses: string | string[] | Record<string, unknown> | null
 	thClasses: string | string[] | Record<string, unknown> | null
 	useColumnDragToOrder: boolean

From 47ab9c5981248079e52db91a560d12ac29e6fbd9 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Thu, 25 Jul 2024 12:23:08 +0200
Subject: [PATCH 11/13] refactor(KtTable): yeet table layout (dead code)

---
 packages/kotti-ui/source/kotti-table/KtTable.vue            | 6 ------
 packages/kotti-ui/source/kotti-table/KtTableColumn.ts       | 3 +--
 .../kotti-ui/source/kotti-table/components/TableBody.ts     | 5 ++---
 packages/kotti-ui/source/kotti-table/components/TableRow.ts | 4 ++--
 .../kotti-ui/source/kotti-table/components/TableRowCell.ts  | 5 ++---
 packages/kotti-ui/source/kotti-table/constants.ts           | 1 -
 packages/kotti-ui/source/kotti-table/table-layout.ts        | 6 ------
 7 files changed, 7 insertions(+), 23 deletions(-)
 delete mode 100644 packages/kotti-ui/source/kotti-table/table-layout.ts

diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
index 96c4ed1229..a427f5993b 100644
--- a/packages/kotti-ui/source/kotti-table/KtTable.vue
+++ b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -32,13 +32,11 @@ import TableHeader from './components/TableHeader.vue'
 import {
 	KT_TABLE,
 	KT_STORE,
-	KT_LAYOUT,
 	KT_TABLE_STATE_PROVIDER,
 	DEFAULT_DISABLE_ROW,
 } from './constants'
 import { KtTableColumn } from './KtTableColumn'
 import { TableStore } from './logic/store'
-import { TableLayout } from './table-layout'
 import type { CreateElement, PropType } from 'vue'
 import type { KottiTable } from './types'
 
@@ -72,8 +70,6 @@ export default {
 			[KT_TABLE as symbol]: this,
 			// @ts-expect-error store will exist at runtime
 			[KT_STORE]: this.store,
-			// @ts-expect-error layout will exist at runtime
-			[KT_LAYOUT]: this.layout,
 		}
 	},
 	props: {
@@ -166,10 +162,8 @@ export default {
 			localStore = new TableStore(this, initialState)
 		}
 
-		const layout = new TableLayout(this)
 		return {
 			localStore,
-			layout,
 		}
 	},
 	computed: {
diff --git a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
index c48ca60bd8..4d9b5ab631 100644
--- a/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
+++ b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
@@ -6,7 +6,6 @@ import {
 	DEFAULT_RENDER_CELL,
 	KT_TABLE,
 	KT_STORE,
-	KT_LAYOUT,
 	DEFAULT_RENDER_HEADER,
 } from './constants'
 import { KottiTable } from './types'
@@ -111,7 +110,7 @@ export const KtTableColumn: any = {
 			this[KT_STORE as any].commit('removeColumn', this.columnConfig)
 	},
 	render: (): null => null,
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
+	inject: { KT_TABLE, KT_STORE },
 }
 
 function createColumn(column: any = {}) {
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBody.ts b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
index 5a9d3161e6..ddfb0e8f90 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBody.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { computed, defineComponent, h, inject } from 'vue'
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { KT_TABLE, KT_STORE } from '../constants'
 
 import { TableBodyEmptyRow } from './TableBodyEmptyRow'
 import { TableBodyExpandRow } from './TableBodyExpandRow'
@@ -14,9 +14,8 @@ export const TableBody = defineComponent({
 	setup() {
 		const tableState = inject(KT_TABLE)
 		const tableStore = inject(KT_STORE)
-		const tableLayout = inject(KT_LAYOUT)
 
-		if (!tableState || !tableStore || !tableLayout)
+		if (!tableState || !tableStore)
 			throw new Error(
 				'TableRowCell: Component was used without providing the right contexts',
 			)
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRow.ts b/packages/kotti-ui/source/kotti-table/components/TableRow.ts
index 7d8774c433..f4c5c32e8d 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRow.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableRow.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { CreateElement } from 'vue'
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { KT_TABLE, KT_STORE } from '../constants'
 
 import { TableRowCell } from './TableRowCell'
 
@@ -11,7 +11,7 @@ export const TableRow: any = {
 		rowIndex: Number,
 		row: Object,
 	},
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
+	inject: { KT_TABLE, KT_STORE },
 	computed: {
 		_trClasses(): string[] {
 			const classes = []
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
index 5cd4ad7eca..3daf4ddc2a 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
@@ -2,7 +2,7 @@ import property from 'lodash/property.js'
 import type { PropType } from 'vue'
 import { computed, defineComponent, h, inject } from 'vue'
 
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import { KT_TABLE, KT_STORE } from '../constants'
 import { type KottiTable } from '../types'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -29,9 +29,8 @@ export const TableRowCell = defineComponent({
 	setup(props) {
 		const tableState = inject(KT_TABLE)
 		const tableStore = inject(KT_STORE)
-		const tableLayout = inject(KT_LAYOUT)
 
-		if (!tableState || !tableStore || !tableLayout)
+		if (!tableState || !tableStore)
 			throw new Error(
 				'TableRowCell: Component was used without providing the right contexts',
 			)
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
index 82cb3db1b0..de19c643a5 100644
--- a/packages/kotti-ui/source/kotti-table/constants.ts
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -67,7 +67,6 @@ export const KT_TABLE: InjectionKey<KottiTableContext> =
 	'KT_TABLE' as unknown as symbol
 export const KT_STORE: InjectionKey<TableStore> =
 	'KT_STORE' as unknown as symbol
-export const KT_LAYOUT = 'KT_LAYOUT'
 export const KT_TABLE_STATE_PROVIDER = 'KT_TABLE_STATE_PROVIDER'
 export const COLUMN_TYPE = Symbol('kt-table-column')
 
diff --git a/packages/kotti-ui/source/kotti-table/table-layout.ts b/packages/kotti-ui/source/kotti-table/table-layout.ts
deleted file mode 100644
index 2c72bd0d1a..0000000000
--- a/packages/kotti-ui/source/kotti-table/table-layout.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export class TableLayout {
-	table: unknown
-	constructor(table: unknown) {
-		this.table = table
-	}
-}

From 39314a5dab0659b3d218053b7acdf350730442b4 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Thu, 25 Jul 2024 10:54:36 +0200
Subject: [PATCH 12/13] refact(KtTable): use Composition API for TableRow

Co-Authored-By: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com>
---
 .../pages/usage/components/table.vue          |  25 +-
 .../kotti-table/components/TableBody.ts       |   1 +
 .../source/kotti-table/components/TableRow.ts | 487 ++++++++----------
 .../kotti-ui/source/kotti-table/constants.ts  |  65 ++-
 .../source/kotti-table/logic/types.ts         |   6 +-
 packages/kotti-ui/source/types/typed-emit.ts  |   4 +-
 6 files changed, 292 insertions(+), 296 deletions(-)

diff --git a/packages/documentation/pages/usage/components/table.vue b/packages/documentation/pages/usage/components/table.vue
index b69fcb3dff..ef76b3695f 100644
--- a/packages/documentation/pages/usage/components/table.vue
+++ b/packages/documentation/pages/usage/components/table.vue
@@ -146,7 +146,9 @@ Alignment would default to be `left`. It can be customized for common cases that
 When content should not be hidden, using horizontal scrolling is a better alternative.
 `isScrollable` will enable horizontal scrolling for the table.
 
-<KtTable :rows="rows2" :columns="columnsDefault" isScrollable />
+<div style="max-width: 300px; padding: 10px; border: 1px dashed var(--ui-03);">
+    <KtTable :rows="rows2" :columns="columnsScrollable" isScrollable />
+</div>
 
 ```html
 <KtTable :rows="rows" :columns="columns" isScrollable />
@@ -1154,6 +1156,12 @@ export default {
 				{ prop: 'date', label: 'Date' },
 				{ prop: ADDRESS_DOT_LINE, label: 'Address' },
 			],
+			columnsScrollable: [
+				{ prop: 'name', label: 'Name', width: '200px' },
+				{ prop: 'date', label: 'Date', width: '300px' },
+				{ prop: ADDRESS_DOT_LINE, label: 'Address', width: '500px' },
+				{ prop: 'gender', label: 'Gender', width: '100px' },
+			],
 			columnsWidth: [
 				{ prop: 'name', label: 'Name', width: '30%' },
 				{ prop: 'date', label: 'Date', width: '20%' },
@@ -1161,9 +1169,22 @@ export default {
 			],
 			rows2: [
 				{
+					address: { number: 119, line: 'No. 119, Grove St, Los Angeles' },
 					date: '2016-05-03',
+					gender: 'm',
 					name: 'Tom',
-					address: { number: 119, line: 'No. 119, Grove St, Los Angeles' },
+				},
+				{
+					address: { number: 331, line: 'No. 119, Grove St, Los Angeles' },
+					date: '2019-05-04',
+					gender: 'f',
+					name: 'Heinz Dieter',
+				},
+				{
+					address: { number: 10, line: 'No. 119, Grove St, Los Angeles' },
+					date: '2024-05-07',
+					gender: 'd',
+					name: 'Shabeer Mahood',
 				},
 			],
 			emptyRows: [],
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBody.ts b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
index ddfb0e8f90..9fb437f4c6 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBody.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
@@ -43,6 +43,7 @@ export const TableBody = defineComponent({
 									props: {
 										row,
 										rowIndex,
+										rowKey: key,
 									},
 								}),
 								isExpandable.value &&
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRow.ts b/packages/kotti-ui/source/kotti-table/components/TableRow.ts
index f4c5c32e8d..1616a76220 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRow.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableRow.ts
@@ -1,291 +1,246 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import type { CreateElement } from 'vue'
+import { type PropType, defineComponent, h, inject, computed } from 'vue'
 import { KT_TABLE, KT_STORE } from '../constants'
 
 import { TableRowCell } from './TableRowCell'
+import { Yoco } from '@3yourmind/yoco'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export const TableRow: any = {
+export const TableRow = defineComponent({
 	name: 'TableRow',
 	props: {
-		rowIndex: Number,
-		row: Object,
+		row: {
+			required: true,
+			type: Object as PropType<Record<string, unknown>>,
+		},
+		rowIndex: {
+			required: true,
+			type: Number,
+		},
+		rowKey: {
+			required: true,
+			type: [String, Number],
+		},
 	},
-	inject: { KT_TABLE, KT_STORE },
-	computed: {
-		_trClasses(): string[] {
-			const classes = []
+	setup(props) {
+		const tableState = inject(KT_TABLE)
+		const tableStore = inject(KT_STORE)
 
-			// @ts-expect-error isInteractive and hasClickListener will exist at runtime
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			if ((this.isInteractive || this.hasClickListener) && !this.isDisabled)
-				classes.push('clickable')
-			// @ts-expect-error isSelected will exist at runtime
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			if (this.isSelected) classes.push('selected')
-			// @ts-expect-error isDisabled will exist at runtime
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			if (this.isDisabled) classes.push('disabled')
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			if (this[KT_TABLE].trClasses) classes.push(this[KT_TABLE].trClasses)
+		if (!tableState || !tableStore)
+			throw new Error(
+				'TableRowCell: Component was used without providing the right contexts',
+			)
+
+		const hasActions = computed(() => Boolean(tableState.hasActions))
+		const hasClickListener = computed(() =>
+			Boolean(tableState.$listeners.rowClick),
+		)
+		const isDisabled = computed(() =>
+			tableState.disableRow({ row: props.row, rowIndex: props.rowIndex }),
+		)
+		const isFocusedRow = computed(() =>
+			tableStore.get('isFocusedRow', props.row),
+		)
+		const isExpandable = computed(() => tableState.isExpandable)
+		const isExpanded = computed(() => tableStore.get('isExpanded', props.row))
+		const isInteractive = computed(
+			() =>
+				tableState.isInteractive || Boolean(tableState.$listeners.activateRow),
+		)
+		const isSelectable = computed(() => tableState.isSelectable)
+		const isSelectedRow = computed(() =>
+			tableStore.get('isSelected', props.row),
+		)
 
+		const expandToggleIcon = computed(() =>
+			isExpanded.value ? Yoco.Icon.CHEVRON_UP : Yoco.Icon.CHEVRON_DOWN,
+		)
+		const renderActions = computed(() => tableState._renderActions)
+		const tableColumns = computed(() => tableStore.state.columns)
+		const _trClasses = computed(() => {
+			const classes: (string | string[] | Record<string, unknown>)[] = []
+
+			if ((isInteractive.value || hasClickListener.value) && !isDisabled.value)
+				classes.push('clickable')
+			if (isSelectedRow.value) classes.push('selected')
+			if (isDisabled.value) classes.push('disabled')
+			if (tableState.trClasses) classes.push(tableState.trClasses)
 			return classes
-		},
-		isExpanded(): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('isExpanded', this.row)
-		},
-		expandToggleIcon(): 'chevron_down' | 'chevron_right' {
-			// @ts-expect-error isExpanded will exist at runtime
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-			return this.isExpanded ? 'chevron_down' : 'chevron_right'
-		},
-		hasClickListener(): boolean {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return Boolean(this[KT_TABLE].$listeners.rowClick)
-		},
-		isInteractive(): boolean {
-			return (
-				// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-				this[KT_TABLE].isInteractive ||
-				// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-				Boolean(this[KT_TABLE].$listeners.activateRow)
+		})
+
+		const handleActionsClick = ($event: MouseEvent) => {
+			$event.stopPropagation()
+		}
+		const handleBlur = (row: unknown, index: number) => {
+			if (!isInteractive.value || isDisabled.value) return
+
+			tableStore.commit('blurRow', row)
+			tableState.$emit('rowBlur', row, index)
+		}
+		const handleClick = (row: unknown, index: number) => {
+			if (isDisabled.value) return
+
+			tableState.$emit('rowClick', row, index)
+			if (!isInteractive.value) return
+
+			tableState.$emit('activateRow', row, index)
+		}
+		const handleExpand = ($event: MouseEvent, row: unknown) => {
+			$event.stopPropagation()
+			tableStore.commit('expandRow', row)
+		}
+		const handleFocus = (row: unknown, index: number) => {
+			if (!isInteractive.value || isDisabled.value) return
+
+			tableStore.commit('focusRow', row)
+			tableState.$emit('rowFocus', row, index)
+		}
+		const handleKey = ($event: KeyboardEvent, row: unknown, index: number) => {
+			if (
+				$event.key !== 'Enter' ||
+				!isInteractive.value ||
+				isDisabled.value ||
+				!isFocusedRow.value
 			)
-		},
-		isSelectable(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].isSelectable
-		},
-		selection(): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].state.selection
-		},
-		tableColumns(): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].state.columns
-		},
-		isExpandable(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].isExpandable
-		},
-		hasActions(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].hasActions
-		},
-		renderActions(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE]._renderActions
-		},
-		isDisabled(): unknown {
-			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_TABLE].disableRow({
-				// @ts-expect-error row will exist at runtime
-				row: this.row,
-				// @ts-expect-error rowIndex will exist at runtime
-				rowIndex: this.rowIndex,
-			})
-		},
-		isSelected(): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('isSelected', this.row)
-		},
-		isFocused(): unknown {
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			return this[KT_STORE].get('isFocusedRow', this.row)
-		},
-	},
-	methods: {
-		handleSelect($event: InputEvent, row: unknown): void {
+				return
+
+			tableState.$emit('activateRow', row, index)
+		}
+		const handleSelect = ($event: InputEvent, row: unknown) => {
 			$event.stopPropagation()
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			this[KT_STORE].commit(
+			tableStore.commit(
 				'selectRow',
 				row,
 				($event.target as HTMLInputElement).checked,
 			)
-		},
-		handleExpand($event: MouseEvent, row: unknown): void {
-			$event.stopPropagation()
-			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-			this[KT_STORE].commit('expandRow', row)
-		},
-		handleActionsClick($event: MouseEvent): void {
-			$event.stopPropagation()
-		},
-		handleClick(_$event: MouseEvent, row: unknown, index: unknown): void {
-			// @ts-expect-error isDisabled will exist at runtime
-			if (!this.isDisabled) {
-				// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-				this[KT_TABLE].$emit('rowClick', row, index)
-				// @ts-expect-error isInteractive will exist at runtime
-				if (this.isInteractive) {
-					// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-					this[KT_TABLE].$emit('activateRow', row, index)
-				}
-			}
-		},
-		handleFocus(_$event: FocusEvent, row: unknown, index: unknown): void {
-			// @ts-expect-error isInteractive and isDisabled will exist at runtime
-			if (this.isInteractive && !this.isDisabled) {
-				// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-				this[KT_STORE].commit('focusRow', row)
-				// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-				this[KT_TABLE].$emit('rowFocus', row, index)
-			}
-		},
-		handleKey($event: KeyboardEvent, row: unknown, index: unknown): void {
-			if (
-				$event.key === 'Enter' &&
-				// @ts-expect-error isInteractive will exist at runtime
-				this.isInteractive &&
-				// @ts-expect-error isDisabled will exist at runtime
-				!this.isDisabled &&
-				// @ts-expect-error isFocused will exist at runtime
-				this.isFocused
-			) {
-				// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-				this[KT_TABLE].$emit('activateRow', row, index)
-			}
-		},
-		handleBlur(_$event: FocusEvent, row: unknown, index: unknown): void {
-			// @ts-expect-error isInteractive and isDisabled will exist at runtime
-			if (this.isInteractive && !this.isDisabled) {
-				// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
-				this[KT_STORE].commit('blurRow', row)
-				// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
-				this[KT_TABLE].$emit('rowBlur', row, index)
-			}
-		},
-	},
-	render(h: CreateElement) {
-		const {
-			row,
-			rowIndex,
-			isExpandable,
-			expandToggleIcon,
-			isInteractive,
-			_trClasses,
-			isSelectable,
-			isSelected,
-			tableColumns,
-			handleSelect,
-			handleClick,
-			handleFocus,
-			handleBlur,
-			handleKey,
-			handleExpand,
-			handleActionsClick,
-			hasActions,
-			renderActions,
-			isDisabled,
-		} = this
-		return h(
-			'tr',
-			{
-				class: _trClasses,
-				attrs: {
-					// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-					'data-test': `table:element:${row.number}:${row.title}`,
-					tabIndex: isInteractive && !isDisabled ? 0 : false,
-				},
-				domProps: {
-					role: isInteractive && !isDisabled ? 'button' : undefined,
-				},
-				on: {
-					click: ($event: MouseEvent) => handleClick($event, row, rowIndex),
-					focus: ($event: FocusEvent) => handleFocus($event, row, rowIndex),
-					blur: ($event: FocusEvent) => handleBlur($event, row, rowIndex),
-					keyup: ($event: KeyboardEvent) => handleKey($event, row, rowIndex),
-				},
-			},
-			[
-				isExpandable &&
-					h(
-						'td',
-						{
-							class: 'c-hand',
-							on: {
-								click: ($event: MouseEvent) =>
-									handleExpand($event, row, rowIndex),
-							},
+		}
+
+		return () =>
+			h(
+				'tr',
+				{
+					class: _trClasses.value,
+					attrs: {
+						'data-test': `table:element:${props.rowIndex}:${props.rowKey}`,
+						tabIndex: isInteractive.value && !isDisabled.value ? 0 : false,
+					},
+					domProps: {
+						role:
+							isInteractive.value && !isDisabled.value ? 'button' : undefined,
+					},
+					on: {
+						blur: () => {
+							handleBlur(props.row, props.rowIndex)
 						},
-						[
-							h('div', { class: 'expand-toggle' }, [
-								h('i', { class: 'yoco' }, [expandToggleIcon]),
-							]),
-						],
-					),
-				isSelectable &&
-					h(
-						'td',
-						{
-							class: 'td-selectable kt-table__checkbox-col',
-							on: {
-								click: ($event: MouseEvent) => {
-									$event.stopPropagation()
-								},
-							},
+						click: () => {
+							handleClick(props.row, props.rowIndex)
 						},
-						[
-							h(
-								'div',
-								{
-									class: 'form-group',
-								},
-								[
-									h('label', { class: 'form-checkbox' }, [
-										h('input', {
-											attrs: {
-												checked: isSelected,
-												disabled: isDisabled,
-											},
-											domProps: {
-												type: 'checkbox',
-											},
-											on: {
-												change: ($event: InputEvent) =>
-													handleSelect($event, row),
-											},
-										}),
-										h('i', {
-											class: 'form-icon',
-											style: isDisabled ? { cursor: 'not-allowed' } : undefined,
-										}),
-									]),
-								],
-							),
-						],
-					),
-				...tableColumns.map((column: any, columnIndex: number) =>
-					h(TableRowCell, {
-						key: column.prop || columnIndex,
-						props: {
-							column,
-							columnIndex,
-							row,
-							rowIndex,
+						focus: () => {
+							handleFocus(props.row, props.rowIndex)
 						},
-					}),
-				),
-				hasActions &&
-					h(
-						'td',
-						{
-							on: {
-								click: handleActionsClick,
-							},
+						keyup: ($event: KeyboardEvent) => {
+							handleKey($event, props.row, props.rowIndex)
 						},
-						[
-							h(
-								'div',
-								{
-									class: 'table-actions',
+					},
+				},
+				[
+					isExpandable.value &&
+						h(
+							'td',
+							{
+								class: 'c-hand',
+								on: {
+									click: ($event: MouseEvent) => {
+										handleExpand($event, props.row)
+									},
 								},
-								[renderActions(h, { row, data: row, rowIndex })],
-							),
-						],
+							},
+							[
+								h('div', { class: 'expand-toggle' }, [
+									h('i', { class: 'yoco' }, [expandToggleIcon.value]),
+								]),
+							],
+						),
+					isSelectable.value &&
+						h(
+							'td',
+							{
+								class: 'td-selectable kt-table__checkbox-col',
+								on: {
+									click: ($event: MouseEvent) => {
+										$event.stopPropagation()
+									},
+								},
+							},
+							[
+								h(
+									'div',
+									{
+										class: 'form-group',
+									},
+									[
+										h('label', { class: 'form-checkbox' }, [
+											h('input', {
+												attrs: {
+													checked: isSelectedRow.value,
+													disabled: isDisabled.value,
+												},
+												domProps: {
+													type: 'checkbox',
+												},
+												on: {
+													change: ($event: InputEvent) => {
+														handleSelect($event, props.row)
+													},
+												},
+											}),
+											h('i', {
+												class: 'form-icon',
+												style: isDisabled.value
+													? { cursor: 'not-allowed' }
+													: undefined,
+											}),
+										]),
+									],
+								),
+							],
+						),
+					...tableColumns.value.map((column: any, columnIndex: number) =>
+						h(TableRowCell, {
+							key: column.prop || columnIndex,
+							props: {
+								column,
+								columnIndex,
+								row: props.row,
+								rowIndex: props.rowIndex,
+							},
+						}),
 					),
-			],
-		)
+					hasActions.value &&
+						h(
+							'td',
+							{
+								on: {
+									click: handleActionsClick,
+								},
+							},
+							[
+								h(
+									'div',
+									{
+										class: 'table-actions',
+									},
+									[
+										renderActions.value(h, {
+											row: props.row,
+											data: props.row,
+											rowIndex: props.rowIndex,
+										}),
+									],
+								),
+							],
+						),
+				],
+			)
 	},
-}
+})
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
index de19c643a5..854c540cc6 100644
--- a/packages/kotti-ui/source/kotti-table/constants.ts
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -5,33 +5,45 @@ import type { CreateElement, InjectionKey, VNodeChildren } from 'vue'
 import type { KottiTable } from './types'
 import type { TypedEmit } from '../types/typed-emit'
 import type { TableStore } from './logic/store'
+import type { Vue as VueType } from 'vue/types/vue'
 
 export const IS_ASC = /ascending|^1/
 export const IS_DSC = /descending|^-1/
 
 interface KottiTableContext {
 	$emit: TypedEmit<{
-		activateRow: unknown
-		cellClick: {
-			column: KottiTable.Column.PropsInternal
-			columnIndex: number
+		activateRow: [unknown, number]
+		cellClick: [
+			{
+				column: KottiTable.Column.PropsInternal
+				columnIndex: number
+				row: KottiTable.Row.Props
+				rowIndex: number
+				value: unknown
+			},
+		]
+		columnsChange: unknown[]
+		expand: unknown[]
+		expandChange: unknown[]
+		hiddenChange: unknown[]
+		orderChange: unknown[]
+		rowBlur: [unknown, number]
+		rowClick: [unknown, number]
+		rowFocus: [unknown, number]
+		select: unknown[]
+		selectAll: unknown[]
+		selectionChange: unknown[]
+		sortChange: unknown[]
+	}>
+	$listeners: VueType['$listeners']
+	_renderActions: (
+		h: CreateElement,
+		payload: {
+			data: KottiTable.Row.Props
 			row: KottiTable.Row.Props
 			rowIndex: number
-			value: unknown
-		}
-		columnsChange: unknown
-		expand: unknown
-		expandChange: unknown
-		hiddenChange: unknown
-		orderChange: unknown
-		rowBlur: unknown
-		rowClick: unknown
-		rowFocus: unknown
-		select: unknown
-		selectAll: unknown
-		selectionChange: unknown
-		sortChange: unknown
-	}>
+		},
+	) => VNodeChildren
 	_renderEmpty: (h: CreateElement) => VNodeChildren
 	_renderExpand: (
 		h: CreateElement,
@@ -43,15 +55,18 @@ interface KottiTableContext {
 	) => VNodeChildren
 	_renderLoading: (h: CreateElement) => VNodeChildren
 	colSpan: number
+	disableRow: KottiTable.Props['disableRow']
 	hasActions: boolean
-	headerClass: string | string[] | Record<string, unknown> | null
+	headerClass: KottiTable.Props['headerClass']
 	isExpandable: boolean
-	isSelectable: boolean
+	isInteractive: KottiTable.Props['isInteractive']
+	isSelectable: KottiTable.Props['isSelectable']
 	loading: boolean
-	tdClasses: string | string[] | Record<string, unknown> | null
-	thClasses: string | string[] | Record<string, unknown> | null
-	useColumnDragToOrder: boolean
-	useQuickSortControl: boolean
+	tdClasses: KottiTable.Props['tdClasses']
+	thClasses: KottiTable.Props['thClasses']
+	trClasses: KottiTable.Props['trClasses']
+	useColumnDragToOrder: KottiTable.Props['useColumnDragToOrder']
+	useQuickSortControl: KottiTable.Props['useQuickSortControl']
 }
 
 /**
diff --git a/packages/kotti-ui/source/kotti-table/logic/types.ts b/packages/kotti-ui/source/kotti-table/logic/types.ts
index 2a6d1d9264..f7f5152505 100644
--- a/packages/kotti-ui/source/kotti-table/logic/types.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/types.ts
@@ -134,7 +134,11 @@ export module Store {
 			setOrderedColumns(this: TableStore, store: TableStore, columns: any): void
 		}
 		export type Row = {
-			blurRow(this: TableStore, store: TableStore): void
+			blurRow(
+				this: TableStore,
+				store: TableStore,
+				row: State['focusedRow'],
+			): void
 			focusRow(
 				this: TableStore,
 				store: TableStore,
diff --git a/packages/kotti-ui/source/types/typed-emit.ts b/packages/kotti-ui/source/types/typed-emit.ts
index 236394b76e..b7c256d021 100644
--- a/packages/kotti-ui/source/types/typed-emit.ts
+++ b/packages/kotti-ui/source/types/typed-emit.ts
@@ -1,6 +1,6 @@
-export type TypedEmit<EVENTS extends Record<string, unknown>> = <
+export type TypedEmit<EVENTS extends Record<string, unknown[]>> = <
 	KEY extends keyof EVENTS,
 >(
 	key: KEY,
-	payload: EVENTS[KEY],
+	...payload: EVENTS[KEY]
 ) => void

From b605145e0b51536703c53641b8ef8aa0ff477b9f Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Thu, 25 Jul 2024 22:01:50 +0200
Subject: [PATCH 13/13] refactor(KtTable): make type for store specific data
 more explicit

---
 .../kotti-table/components/TableHeader.vue    | 23 ++++----
 .../kotti-table/components/TableHeaderCell.ts |  4 +-
 .../kotti-table/components/TableRowCell.ts    |  5 +-
 .../kotti-ui/source/kotti-table/constants.ts  | 17 ++++--
 .../source/kotti-table/logic/column.ts        | 31 ++++++-----
 .../source/kotti-table/logic/order.ts         |  2 +-
 .../source/kotti-table/logic/types.ts         | 27 +++++++---
 packages/kotti-ui/source/kotti-table/types.ts | 53 ++++++++-----------
 8 files changed, 95 insertions(+), 67 deletions(-)

diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
index 9e11220bcd..c64a8da139 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
@@ -49,6 +49,7 @@
 <script lang="ts">
 import { KT_TABLE, KT_STORE } from '../constants'
 import { KottiTable } from '../types'
+import type { Store } from '../logic/types'
 import { computed, defineComponent, inject, ref } from 'vue'
 
 import { TableHeaderCell } from './TableHeaderCell'
@@ -67,8 +68,10 @@ export default defineComponent({
 				'TableRowCell: Component was used without providing the right contexts',
 			)
 
-		const dropTargetColumn = ref<KottiTable.Column.PropsInternal | null>(null)
-		const draggedColumn = ref<KottiTable.Column.PropsInternal | null>(null)
+		const dropTargetColumn =
+			ref<Store.StateComponents.ColumnRepresentation | null>(null)
+		const draggedColumn =
+			ref<Store.StateComponents.ColumnRepresentation | null>(null)
 
 		const useColumnDragToOrder = computed(() => tableState.useColumnDragToOrder)
 		const isDraggedOver = (column: unknown) =>
@@ -84,20 +87,20 @@ export default defineComponent({
 			handleDragEnd: () => {
 				dropTargetColumn.value = null
 			},
-			handleDragEnter: (column: KottiTable.Column.PropsInternal) => {
+			handleDragEnter: (column: Store.StateComponents.ColumnRepresentation) => {
 				dropTargetColumn.value = column
 			},
-			handleDragStart: (column: KottiTable.Column.PropsInternal) => {
+			handleDragStart: (column: Store.StateComponents.ColumnRepresentation) => {
 				draggedColumn.value = column
 			},
-			handleDrop: (column: KottiTable.Column.PropsInternal) => {
+			handleDrop: (column: Store.StateComponents.ColumnRepresentation) => {
 				if (draggedColumn.value) {
 					tableStore.commit('orderBefore', draggedColumn.value, column)
 					draggedColumn.value = null
 				}
 				dropTargetColumn.value = null
 			},
-			getThClasses: (column: KottiTable.Column.PropsInternal) => [
+			getThClasses: (column: Store.StateComponents.ColumnRepresentation) => [
 				{
 					'drag-over': isDraggedOver(column),
 					clickable: canSort(column),
@@ -108,7 +111,7 @@ export default defineComponent({
 				tableState.thClasses,
 				column.thClass,
 			],
-			getThStyle: (column: KottiTable.Column.PropsInternal) => ({
+			getThStyle: (column: Store.StateComponents.ColumnRepresentation) => ({
 				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 				textAlign: column.align ?? KottiTable.Column.Align.LEFT,
 				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -117,7 +120,7 @@ export default defineComponent({
 			handleSelectAll: () => {
 				tableStore.commit('toggleAllSelection')
 			},
-			handleThClick: (column: KottiTable.Column.PropsInternal) => {
+			handleThClick: (column: Store.StateComponents.ColumnRepresentation) => {
 				if (!useQuickSortControl.value) return
 				if (!canSort(column)) return
 
@@ -129,9 +132,9 @@ export default defineComponent({
 			isExpandable: computed(() => tableState.isExpandable),
 			isSelectable: computed(() => tableState.isSelectable),
 			isSorted,
-			isSortedByAsc: (column: KottiTable.Column.PropsInternal) =>
+			isSortedByAsc: (column: Store.StateComponents.ColumnRepresentation) =>
 				tableStore.get('isSortedByAsc', column),
-			isSortedByDsc: (column: KottiTable.Column.PropsInternal) =>
+			isSortedByDsc: (column: Store.StateComponents.ColumnRepresentation) =>
 				tableStore.get('isSortedByDsc', column),
 			tableColumns: computed(() => tableStore.state.columns),
 			tableHeaderClass: computed(() => [
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
index 5cc3f6ebf8..a0d4a7f199 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
@@ -1,6 +1,6 @@
 import { defineComponent, h } from 'vue'
 import type { PropType } from 'vue'
-import type { KottiTable } from '../types'
+import type { Store } from '../logic/types'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const TableHeaderCell = defineComponent({
@@ -8,7 +8,7 @@ export const TableHeaderCell = defineComponent({
 	props: {
 		column: {
 			required: true,
-			type: Object as PropType<KottiTable.Column.PropsInternal>,
+			type: Object as PropType<Store.StateComponents.ColumnRepresentation>,
 		},
 		columnIndex: {
 			required: true,
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
index 3daf4ddc2a..e1804cd1cb 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
+++ b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
@@ -4,6 +4,7 @@ import { computed, defineComponent, h, inject } from 'vue'
 
 import { KT_TABLE, KT_STORE } from '../constants'
 import { type KottiTable } from '../types'
+import type { Store } from '../logic/types'
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const TableRowCell = defineComponent({
@@ -11,7 +12,7 @@ export const TableRowCell = defineComponent({
 	props: {
 		column: {
 			required: true,
-			type: Object as PropType<KottiTable.Column.PropsInternal>,
+			type: Object as PropType<Store.StateComponents.ColumnRepresentation>,
 		},
 		columnIndex: {
 			required: true,
@@ -61,7 +62,7 @@ export const TableRowCell = defineComponent({
 			$event: MouseEvent,
 			data: {
 				value: unknown
-				column: KottiTable.Column.PropsInternal
+				column: Store.StateComponents.ColumnRepresentation
 				columnIndex: number
 				row: KottiTable.Row.Props
 				rowIndex: number
diff --git a/packages/kotti-ui/source/kotti-table/constants.ts b/packages/kotti-ui/source/kotti-table/constants.ts
index 854c540cc6..91f819a88e 100644
--- a/packages/kotti-ui/source/kotti-table/constants.ts
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -1,11 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import type { CreateElement, InjectionKey, VNodeChildren } from 'vue'
+import type { Vue as VueType } from 'vue/types/vue'
 
 import type { KottiTable } from './types'
 import type { TypedEmit } from '../types/typed-emit'
 import type { TableStore } from './logic/store'
-import type { Vue as VueType } from 'vue/types/vue'
+import type { Store } from './logic/types'
 
 export const IS_ASC = /ascending|^1/
 export const IS_DSC = /descending|^-1/
@@ -15,7 +16,7 @@ interface KottiTableContext {
 		activateRow: [unknown, number]
 		cellClick: [
 			{
-				column: KottiTable.Column.PropsInternal
+				column: Store.StateComponents.ColumnRepresentation
 				columnIndex: number
 				row: KottiTable.Row.Props
 				rowIndex: number
@@ -87,8 +88,16 @@ export const COLUMN_TYPE = Symbol('kt-table-column')
 
 export const DEFAULT_DISABLE_ROW = (): boolean => false
 
-export const PUBLIC_SORT_PROPS = ['prop', 'sortBy', 'sortOrder'] as const
-export const PUBLIC_COLUMN_PROPS = ['prop', 'order', 'hidden'] as const
+export const PUBLIC_SORT_PROPS = [
+	'prop',
+	'sortBy',
+	'sortOrder',
+] satisfies (keyof Store.StateComponents.ColumnRepresentation)[]
+export const PUBLIC_COLUMN_PROPS = [
+	'prop',
+	'order',
+	'hidden',
+] satisfies (keyof Store.StateComponents.ColumnRepresentation)[]
 
 export const DEFAULT_RENDER_CELL = function defaultRenderCell(
 	_h: CreateElement,
diff --git a/packages/kotti-ui/source/kotti-table/logic/column.ts b/packages/kotti-ui/source/kotti-table/logic/column.ts
index c3a856d75f..3bc7010b2d 100644
--- a/packages/kotti-ui/source/kotti-table/logic/column.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/column.ts
@@ -13,26 +13,33 @@ import { resolveColumnsOrder, getOrderedColumns } from './order'
 import { setSortedColumn } from './sort'
 import type { Store } from './types'
 
-export function getColumnRealIndex(state: any, column: any) {
-	return state._columnsArray.findIndex(({ id }: any) => id == column.id)
+export function getColumnRealIndex(
+	state: Store.State,
+	column: Store.StateComponents.ColumnRepresentation,
+) {
+	return state._columnsArray.findIndex(({ id }) => id == column.id)
 }
 
-export function getColumnIndex(state: any, column: any) {
-	return state._columns[column.prop].index
+export function getColumnIndex(state: Store.State, columnProp: string): number {
+	const columnInStore = state._columns[columnProp]
+
+	if (!columnInStore?.index)
+		throw new Error(`Could not find column ${columnProp} in KtTable Store`)
+
+	return columnInStore.index
 }
 
 export function setColumnsArray(
-	state: any,
-	prop: any,
-	shapeKeys: any,
-	columns: any,
-	mergeStrategy = Object.assign,
+	state: Store.State,
+	prop: keyof Store.State,
+	shapeKeys: (keyof Store.StateComponents.ColumnRepresentation)[],
+	columns: Store.StateComponents.ColumnRepresentation[],
 ) {
 	state[prop] = columns.map((column: any) => {
 		// eslint-disable-next-line no-param-reassign
 		column = pick(column, shapeKeys)
 		const oldColumn = state._columns[column.prop] ?? {}
-		return mergeStrategy(oldColumn, column)
+		return Object.assign(oldColumn, column)
 	})
 }
 
@@ -73,7 +80,7 @@ export const mutations: Store.MutationComponents.Column = {
 		const { state } = store
 		const deleted = state._destroyedColumns[column.prop]
 
-		const newColumn: KottiTable.Column.PropsInternal = (() => {
+		const newColumn: Store.StateComponents.ColumnRepresentation = (() => {
 			const oldColumn = state._columns[column.prop]
 
 			if (!oldColumn) {
@@ -103,7 +110,7 @@ export const mutations: Store.MutationComponents.Column = {
 				},
 				// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 				(value) => value !== undefined,
-			) as KottiTable.Column.PropsInternal
+			) as Store.StateComponents.ColumnRepresentation
 		})()
 		Vue.set(state._columns, newColumn.prop, newColumn)
 
diff --git a/packages/kotti-ui/source/kotti-table/logic/order.ts b/packages/kotti-ui/source/kotti-table/logic/order.ts
index 03fbe9ee25..ba03144979 100644
--- a/packages/kotti-ui/source/kotti-table/logic/order.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/order.ts
@@ -57,7 +57,7 @@ export const mutations: Store.MutationComponents.Order = {
 	orderBefore(store, fromColumn, toColumn) {
 		const { state } = store
 		if (fromColumn.id === toColumn.id) return
-		const fromIndex = getColumnIndex(state, fromColumn)
+		const fromIndex = getColumnIndex(state, fromColumn.prop)
 		state._columnsArray.splice(fromIndex, 1)
 
 		const toIndex = getColumnRealIndex(state, toColumn)
diff --git a/packages/kotti-ui/source/kotti-table/logic/types.ts b/packages/kotti-ui/source/kotti-table/logic/types.ts
index f7f5152505..5036bc795e 100644
--- a/packages/kotti-ui/source/kotti-table/logic/types.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/types.ts
@@ -1,16 +1,28 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-
 import type { Kotti } from '../../types'
 import type { KottiTable } from '../types'
 import type { TableStore } from './store'
 
 export module Store {
 	export module StateComponents {
+		export type ColumnRepresentation = Omit<
+			KottiTable.Column.Props,
+			'align' | 'renderCell' | 'renderHeader' | 'width'
+		> & {
+			_deleted: boolean
+			align: KottiTable.Column.Align
+			id: string
+			isPropDefined: boolean
+			renderCell: KottiTable.Column.RenderCell
+			renderHeader: KottiTable.Column.RenderHeader
+			width: string
+		}
+
 		export type Column = {
-			_columns: Record<string, KottiTable.Column.PropsInternal>
-			_columnsArray: KottiTable.Column.PropsInternal[]
+			_columns: Record<string, ColumnRepresentation>
+			_columnsArray: ColumnRepresentation[]
 			_destroyedColumns: Record<string, number>
-			columns: KottiTable.Column.PropsInternal[]
+			columns: ColumnRepresentation[]
 			refreshColumnArray: boolean
 		}
 
@@ -84,7 +96,10 @@ export module Store {
 			insertColumn(
 				this: TableStore,
 				store: TableStore,
-				payload: { column: KottiTable.Column.PropsInternal; index?: number },
+				payload: {
+					column: Store.StateComponents.ColumnRepresentation
+					index?: number
+				},
 			): void
 			removeColumn(this: TableStore, store: TableStore, column: any): void
 			setColumns(this: TableStore, store: TableStore, columns: any): void
@@ -175,7 +190,7 @@ export module Store {
 				this: TableStore,
 				store: TableStore,
 				options: {
-					column: KottiTable.Column.PropsInternal
+					column: Store.StateComponents.ColumnRepresentation
 					order?: any
 				},
 			): void
diff --git a/packages/kotti-ui/source/kotti-table/types.ts b/packages/kotti-ui/source/kotti-table/types.ts
index 250f5a3a8c..7e764c68bc 100644
--- a/packages/kotti-ui/source/kotti-table/types.ts
+++ b/packages/kotti-ui/source/kotti-table/types.ts
@@ -1,4 +1,5 @@
 import type { CreateElement, VNode, VNodeChildren } from 'vue'
+import type { Store } from './logic/types'
 
 export module KottiTable {
 	export module Column {
@@ -27,8 +28,10 @@ export module KottiTable {
 			| -1
 			| 0
 
+		export type SortMethod = <T>(a: T, b: T) => number
+
 		export interface Context {
-			column: Column.PropsInternal
+			column: Store.StateComponents.ColumnRepresentation
 			columnIndex: number
 			row: Row.Props
 			rowIndex: number
@@ -56,6 +59,21 @@ export module KottiTable {
 			sortOrder: SortOrder
 		}
 
+		export type Formatter = (
+			value: Context['value'],
+			row: Context['row'],
+			column: Context['column'],
+			columnIndex: Context['columnIndex'],
+			rowIndex: Context['rowIndex'],
+		) => unknown
+
+		export type RenderCell = (h: CreateElement, data: Context) => VNodeChildren
+
+		export type RenderHeader = (
+			h: CreateElement,
+			data: Pick<Context, 'column' | 'columnIndex' | 'value'>,
+		) => VNodeChildren
+
 		export type Props = {
 			index?: number // Unused
 			label?: string
@@ -75,7 +93,7 @@ export module KottiTable {
 			hidden?: boolean
 
 			sortBy?: SortBy
-			sortMethod?: ((a: unknown, b: unknown) => number) | null
+			sortMethod?: SortMethod
 			sortOrder?: SortOrder
 			sortOrders?: SortOrders[]
 			// whether this column is sortable, string means sortOrder is remote
@@ -83,34 +101,9 @@ export module KottiTable {
 
 			default?: string
 			disableRowClick?: boolean
-			formatter?: (
-				value: Context['value'],
-				row: Context['row'],
-				column: Context['column'],
-				columnIndex: Context['columnIndex'],
-				rowIndex: Context['rowIndex'],
-			) => unknown
-			renderCell?: (h: CreateElement, data: Context) => VNode
-			renderHeader?: (
-				h: CreateElement,
-				data: Pick<Context, 'column' | 'columnIndex' | 'value'>,
-			) => VNode
-		}
-
-		export type PropsInternal = Omit<
-			Props,
-			'align' | 'renderCell' | 'renderHeader' | 'width'
-		> & {
-			_deleted: boolean
-			align: Align
-			id: string
-			isPropDefined: boolean
-			renderCell: (h: CreateElement, data: Context) => VNodeChildren
-			renderHeader: (
-				h: CreateElement,
-				data: Pick<Context, 'column' | 'columnIndex' | 'value'>,
-			) => VNodeChildren
-			width: string
+			formatter?: Formatter
+			renderCell?: RenderCell
+			renderHeader?: RenderHeader
 		}
 
 		export module Slots {