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] 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 {