From ec749a836736290118bff44ed2dceb9786d257b7 Mon Sep 17 00:00:00 2001
From: Moritz Vetter <16950410+Isokaeder@users.noreply.github.com>
Date: Tue, 4 Jun 2024 14:17:07 +0200
Subject: [PATCH] refact(KtTable): move all other js and vue files in
 kotti-table to typescript

Co-Authored-By: Florian Wendelborn <1133858+FlorianWendelborn@users.noreply.github.com>
---
 .../kotti-ui/source/kotti-table/KtTable.vue   |  69 ++++-
 .../source/kotti-table/KtTableColumn.d.ts     |   3 -
 .../{KtTableColumn.js => KtTableColumn.ts}    |  38 ++-
 .../source/kotti-table/KtTableConsumer.d.ts   |   4 -
 ...{KtTableConsumer.js => KtTableConsumer.ts} |  12 +-
 .../source/kotti-table/KtTableProvider.d.ts   |   3 -
 ...{KtTableProvider.js => KtTableProvider.ts} |  32 +-
 .../components/{TableBody.js => TableBody.ts} |  25 +-
 .../components/TableBodyEmptyRow.js           |  27 --
 .../components/TableBodyEmptyRow.ts           |  32 ++
 .../components/TableBodyExpandRow.js          |  39 ---
 .../components/TableBodyExpandRow.ts          |  45 +++
 .../components/TableBodyLoadingRow.js         |  23 --
 .../components/TableBodyLoadingRow.ts         |  28 ++
 .../kotti-table/components/TableHeader.vue    |  46 ++-
 .../kotti-table/components/TableHeaderCell.js |  13 -
 .../kotti-table/components/TableHeaderCell.ts |  19 ++
 .../source/kotti-table/components/TableRow.js | 234 --------------
 .../source/kotti-table/components/TableRow.ts | 285 ++++++++++++++++++
 .../{TableRowCell.js => TableRowCell.ts}      |  25 +-
 .../{constants.js => constants.ts}            |  22 +-
 .../source/kotti-table/logic/column.ts        |   7 +-
 .../source/kotti-table/logic/select.ts        |   1 +
 .../kotti-ui/source/kotti-table/mixins.d.ts   |   4 -
 .../kotti-ui/source/kotti-table/mixins.js     |  52 ----
 .../kotti-ui/source/kotti-table/mixins.ts     |  71 +++++
 .../{table-layout.js => table-layout.ts}      |   3 +-
 27 files changed, 673 insertions(+), 489 deletions(-)
 delete mode 100644 packages/kotti-ui/source/kotti-table/KtTableColumn.d.ts
 rename packages/kotti-ui/source/kotti-table/{KtTableColumn.js => KtTableColumn.ts} (78%)
 delete mode 100644 packages/kotti-ui/source/kotti-table/KtTableConsumer.d.ts
 rename packages/kotti-ui/source/kotti-table/{KtTableConsumer.js => KtTableConsumer.ts} (70%)
 delete mode 100644 packages/kotti-ui/source/kotti-table/KtTableProvider.d.ts
 rename packages/kotti-ui/source/kotti-table/{KtTableProvider.js => KtTableProvider.ts} (52%)
 rename packages/kotti-ui/source/kotti-table/components/{TableBody.js => TableBody.ts} (57%)
 delete mode 100644 packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.js
 create mode 100644 packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
 delete mode 100644 packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.js
 create mode 100644 packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts
 delete mode 100644 packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.js
 create mode 100644 packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts
 delete mode 100644 packages/kotti-ui/source/kotti-table/components/TableHeaderCell.js
 create mode 100644 packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
 delete mode 100644 packages/kotti-ui/source/kotti-table/components/TableRow.js
 create mode 100644 packages/kotti-ui/source/kotti-table/components/TableRow.ts
 rename packages/kotti-ui/source/kotti-table/components/{TableRowCell.js => TableRowCell.ts} (63%)
 rename packages/kotti-ui/source/kotti-table/{constants.js => constants.ts} (55%)
 delete mode 100644 packages/kotti-ui/source/kotti-table/mixins.d.ts
 delete mode 100644 packages/kotti-ui/source/kotti-table/mixins.js
 create mode 100644 packages/kotti-ui/source/kotti-table/mixins.ts
 rename packages/kotti-ui/source/kotti-table/{table-layout.js => table-layout.ts} (53%)

diff --git a/packages/kotti-ui/source/kotti-table/KtTable.vue b/packages/kotti-ui/source/kotti-table/KtTable.vue
index 942f4776e8..204e5280d7 100644
--- a/packages/kotti-ui/source/kotti-table/KtTable.vue
+++ b/packages/kotti-ui/source/kotti-table/KtTable.vue
@@ -6,6 +6,7 @@
 			<slot />
 			<!-- NOTE: As the column prop should be the source of truth in case of conflict -->
 			<!-- the prop columns need to be added after the columns from the slot. -->
+			<!-- @vue-expect-error -->
 			<KtTableColumn
 				v-for="(column, index) in formattedColumns"
 				:key="`${column.prop}_${index}`"
@@ -20,8 +21,9 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import isEqual from 'lodash/isEqual'
 import pick from 'lodash/pick'
 
@@ -37,6 +39,7 @@ import {
 import { KtTableColumn } from './KtTableColumn'
 import { TableStore } from './logic/store'
 import { TableLayout } from './table-layout'
+import type { CreateElement } from 'vue'
 
 let tableIdSeed = 1
 
@@ -66,7 +69,9 @@ export default {
 	provide() {
 		return {
 			[KT_TABLE]: 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,
 		}
 	},
@@ -138,16 +143,21 @@ export default {
 	data() {
 		let localStore
 		const initialState = pick(this, INITIAL_TABLE_STORE_PROPS)
+		// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
 		if (this[KT_TABLE_STATE_PROVIDER]) {
 			if (this.id) {
 				localStore = new TableStore(this, initialState)
+				// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
 				this[KT_TABLE_STATE_PROVIDER].addStore(this.id, localStore)
+				// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
 				this[KT_TABLE_STATE_PROVIDER].selectedTableId(this.id)
 			} else {
+				// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
 				localStore = this[KT_TABLE_STATE_PROVIDER].store
 				localStore.setTable(this)
 				localStore.setInitialState(initialState)
 			}
+			// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
 			this[KT_TABLE_STATE_PROVIDER].addTable(this)
 		} else {
 			localStore = new TableStore(this, initialState)
@@ -161,13 +171,16 @@ export default {
 	},
 	computed: {
 		store() {
+			// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE_STATE_PROVIDER]
-				? this[KT_TABLE_STATE_PROVIDER].store
-				: this.localStore
+				? // @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
+					this[KT_TABLE_STATE_PROVIDER].store
+				: // @ts-expect-error localStore will exist at runtime
+					this.localStore
 		},
-		formattedColumns() {
+		formattedColumns(): unknown[] {
 			return this.columns
-				? this.columns.map((column) => {
+				? this.columns.map((column: any) => {
 						if (column.key) {
 							// eslint-disable-next-line
 							console.warn(
@@ -181,8 +194,10 @@ export default {
 				: []
 		},
 		colSpan() {
+			// @ts-expect-error store will exist at runtime
 			let colSpan = this.store.state.columns.length
 
+			// @ts-expect-error isExpandable will exist at runtime
 			// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
 			if (this.isExpandable) colSpan++
 			if (this.isSelectable) colSpan++
@@ -196,34 +211,37 @@ export default {
 			return Boolean(this.$slots.actions || this.renderActions)
 		},
 		_renderExpand() {
-			return (h, rowData) => {
+			return (h: CreateElement, rowData: any) => {
 				if (this.renderExpand) return this.renderExpand(h, rowData)
 
+				// @ts-expect-error $slots will exist at runtime
 				return this.$slots.expand(rowData)
 			}
 		},
 		_renderActions() {
-			return (h, rowData) => {
+			return (h: CreateElement, rowData: any) => {
 				if (this.renderActions) return this.renderActions(h, rowData)
 
+				// @ts-expect-error $slots will exist at runtime
 				return this.$slots.actions(rowData)
 			}
 		},
 		_renderLoading() {
-			return (h) => {
+			return (h: CreateElement) => {
 				if (this.renderLoading) return this.renderLoading(h)
 
 				return this.$slots.loading || h('div', { class: 'loading lg' })
 			}
 		},
 		_renderEmpty() {
-			return (h) => {
+			return (h: CreateElement) => {
 				if (this.renderEmpty) return this.renderEmpty(h)
 
 				return (
 					this.$slots.empty ||
 					this.emptyText ||
 					// FIXME: $t is not supposed to be used in kotti, probably a hack
+					// @ts-expect-error $t will exist at runtime (?)
 					this.$t?.('table.emptyText') ||
 					'No Data'
 				)
@@ -232,11 +250,13 @@ export default {
 	},
 	watch: {
 		id(newId, id) {
+			// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
 			this[KT_TABLE_STATE_PROVIDER].updateStoreId(id, newId)
 		},
 		rows: {
 			immediate: true,
 			handler(value) {
+				// @ts-expect-error localStore will exist at runtime
 				this.localStore.commit('setRows', value)
 			},
 		},
@@ -244,6 +264,7 @@ export default {
 			immediate: true,
 			handler(value, oldValue) {
 				if (!isEqual(value, oldValue)) {
+					// @ts-expect-error localStore will exist at runtime
 					this.localStore.commit('setSelected', value)
 				}
 			},
@@ -252,6 +273,7 @@ export default {
 			immediate: true,
 			handler(value, oldValue) {
 				if (value && !isEqual(value, oldValue)) {
+					// @ts-expect-error store will exist at runtime
 					this.store.commit('setColumns', value)
 				}
 			},
@@ -260,6 +282,7 @@ export default {
 			immediate: true,
 			handler(value, oldValue) {
 				if (value && !isEqual(value, oldValue)) {
+					// @ts-expect-error store will exist at runtime
 					this.store.commit('setSortedColumns', value)
 				}
 			},
@@ -268,6 +291,7 @@ export default {
 			immediate: true,
 			handler(value, oldValue) {
 				if (value && !isEqual(value, oldValue)) {
+					// @ts-expect-error store will exist at runtime
 					this.store.commit('setHiddenColumns', value)
 				}
 			},
@@ -276,6 +300,7 @@ export default {
 			immediate: true,
 			handler(value, oldValue) {
 				if (value && !isEqual(value, oldValue)) {
+					// @ts-expect-error store will exist at runtime
 					this.store.commit('setFilteredColumns', value)
 				}
 			},
@@ -284,52 +309,66 @@ export default {
 			immediate: true,
 			handler(value, oldValue) {
 				if (value && !isEqual(value, oldValue)) {
+					// @ts-expect-error store will exist at runtime
 					this.store.commit('setOrderedColumns', value)
 				}
 			},
 		},
 		disableRow: {
 			handler() {
+				// @ts-expect-error store will exist at runtime
 				this.store.commit('updateDisabledRows')
 			},
 		},
 	},
 	beforeCreate() {
+		// @ts-expect-error tableId will exist at runtime
 		this.tableId = `kt-table_${String(tableIdSeed)}`
 		tableIdSeed += 1
 	},
 	mounted() {
+		// @ts-expect-error $ready will exist at runtime
 		this.$ready = true
+		// @ts-expect-error store will exist at runtime
 		this.store.commit('updateColumns', { emitChange: false })
 		// eslint-disable-next-line vue/no-deprecated-events-api
-		this.$on('selectionChange', (selection) => {
+		this.$on('selectionChange', (selection: any) => {
+			// @ts-expect-error value will exist at runtime
 			if (this.value) {
 				this.$emit(
 					'input',
-					selection.map((row) => this.store.get('getIndexByRow', row)),
+					// @ts-expect-error store will exist at runtime
+					selection.map((row: any) => this.store.get('getIndexByRow', row)),
 				)
 			}
 		})
 	},
 	methods: {
-		isSelected(index) {
+		isSelected(index: unknown): unknown {
+			// @ts-expect-error store will exist at runtime
 			return this.store.isSelected(
+				// @ts-expect-error store will exist at runtime
 				this.store.get('getRowByVisibleIndex', index),
 			)
 		},
-		toggleExpand(index) {
+		toggleExpand(index: unknown): void {
+			// @ts-expect-error store will exist at runtime
 			this.store.commit(
 				'expandRow',
+				// @ts-expect-error store will exist at runtime
 				this.store.get('getRowByVisibleIndex', index),
 			)
 		},
-		toggleSelect(index) {
+		toggleSelect(index: unknown): void {
+			// @ts-expect-error store will exist at runtime
 			this.store.commit(
 				'selectRow',
+				// @ts-expect-error store will exist at runtime
 				this.store.get('getRowByVisibleIndex', index),
 			)
 		},
-		toggleSelectAll() {
+		toggleSelectAll(): void {
+			// @ts-expect-error store will exist at runtime
 			this.store.commit('toggleAllSelection')
 		},
 	},
diff --git a/packages/kotti-ui/source/kotti-table/KtTableColumn.d.ts b/packages/kotti-ui/source/kotti-table/KtTableColumn.d.ts
deleted file mode 100644
index 0f5ac85756..0000000000
--- a/packages/kotti-ui/source/kotti-table/KtTableColumn.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/naming-convention
-declare const KtTableColumn: any
-export { KtTableColumn }
diff --git a/packages/kotti-ui/source/kotti-table/KtTableColumn.js b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
similarity index 78%
rename from packages/kotti-ui/source/kotti-table/KtTableColumn.js
rename to packages/kotti-ui/source/kotti-table/KtTableColumn.ts
index 1fccf9d741..ccc8e12159 100644
--- a/packages/kotti-ui/source/kotti-table/KtTableColumn.js
+++ b/packages/kotti-ui/source/kotti-table/KtTableColumn.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import pick from 'lodash/pick'
 
 import {
@@ -9,19 +10,24 @@ import {
 	DEFAULT_RENDER_HEADER,
 } from './constants'
 import { KottiTable } from './types'
+import type { CreateElement } from 'vue'
 
 let columnIdSeed = 1
 
-function updateColumnsfor(prop) {
-	return function updateColumnProp(newVal) {
+function updateColumnsfor(prop: any) {
+	return function updateColumnProp(newVal: unknown) {
+		// @ts-expect-error columnConfig will exist at runtime
 		if (this.columnConfig) {
+			// @ts-expect-error columnConfig will exist at runtime
 			this.columnConfig[prop] = newVal
+			// @ts-expect-error columnConfig will exist at runtime
 			this[KT_STORE].commit('updateColumns')
 		}
 	}
 }
 
-export const KtTableColumn = {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const KtTableColumn: any = {
 	name: 'KtTableColumn',
 	inheritAttrs: false,
 	props: {
@@ -49,7 +55,8 @@ export const KtTableColumn = {
 			type: [String, Number],
 		},
 		sortOrders: {
-			default: () => Object.values(KottiTable.Column.SortOrders),
+			default: (): KottiTable.Column.SortOrders[] =>
+				Object.values(KottiTable.Column.SortOrders),
 			type: Array,
 		},
 		// whether this column is sortable, string means sortOrder is remote
@@ -84,14 +91,14 @@ export const KtTableColumn = {
 		align: updateColumnsfor('align'),
 		default: updateColumnsfor('default'),
 	},
-	beforeCreate() {
+	beforeCreate(): void {
 		this.columnConfig = {}
 	},
-	created() {
+	created(): void {
 		// eslint-disable-next-line @typescript-eslint/no-use-before-define
 		this.columnConfig = createColumn(this)
 	},
-	mounted() {
+	mounted(): void {
 		const columnIndex = this[KT_TABLE].$children.indexOf(this)
 		this[KT_STORE].commit('insertColumn', {
 			column: this.columnConfig,
@@ -99,20 +106,21 @@ export const KtTableColumn = {
 			fromTableColumn: true,
 		})
 	},
-	destroyed() {
+	destroyed(): void {
 		if (!this.$parent) return
 		this.columnConfig &&
 			this[KT_STORE].commit('removeColumn', this.columnConfig)
 	},
-	render: () => null,
+	render: (): null => null,
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
 }
 
-function createColumn(column = {}) {
+function createColumn(column: any = {}) {
 	const _self = column
 
 	let columnId = column.id
 	if (!columnId) {
+		// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
 		columnId = `${_self[KT_TABLE].tableId}_column_${columnIdSeed}`
 		columnIdSeed++
 	}
@@ -122,7 +130,7 @@ function createColumn(column = {}) {
 	column.sortOrder = column.sortOrder || KottiTable.Column.SortOrders.NONE
 	column.sortOrders =
 		column.sortOrders || Object.values(KottiTable.Column.SortOrders)
-	column.formatter = column.formatter || ((value) => value)
+	column.formatter = column.formatter || ((value: any) => value)
 
 	column.id = columnId
 	column.type = COLUMN_TYPE
@@ -132,8 +140,8 @@ function createColumn(column = {}) {
 	let renderCell = column.renderCell
 	let renderHeader = column.renderHeader
 
-	column.renderCell = function render(h, data) {
-		if (_self.$scopedSlots && _self.$scopedSlots.default) {
+	column.renderCell = function render(h: CreateElement, data: any) {
+		if (_self.$scopedSlots?.default) {
 			renderCell = () => _self.$scopedSlots.default(data)
 		}
 
@@ -143,8 +151,8 @@ function createColumn(column = {}) {
 		return renderCell(h, data)
 	}
 
-	column.renderHeader = function render(h, data) {
-		if (_self.$scopedSlots && _self.$scopedSlots.header) {
+	column.renderHeader = function render(h: CreateElement, data: any) {
+		if (_self.$scopedSlots?.header) {
 			renderHeader = () => _self.$scopedSlots.header(data)
 		}
 
diff --git a/packages/kotti-ui/source/kotti-table/KtTableConsumer.d.ts b/packages/kotti-ui/source/kotti-table/KtTableConsumer.d.ts
deleted file mode 100644
index 35617d9f8e..0000000000
--- a/packages/kotti-ui/source/kotti-table/KtTableConsumer.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/naming-convention
-declare const KtTableConsumer: any
-
-export { KtTableConsumer }
diff --git a/packages/kotti-ui/source/kotti-table/KtTableConsumer.js b/packages/kotti-ui/source/kotti-table/KtTableConsumer.ts
similarity index 70%
rename from packages/kotti-ui/source/kotti-table/KtTableConsumer.js
rename to packages/kotti-ui/source/kotti-table/KtTableConsumer.ts
index d307c04584..bb49a0211a 100644
--- a/packages/kotti-ui/source/kotti-table/KtTableConsumer.js
+++ b/packages/kotti-ui/source/kotti-table/KtTableConsumer.ts
@@ -1,20 +1,23 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { TableColumnsStateMixin } from './mixins'
 
-const KtTableConsumer = {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+const KtTableConsumer: any = {
 	name: 'KtTableConsumer',
 	mixins: [TableColumnsStateMixin],
 	props: {
 		id: { default: null, type: String },
 	},
 	watch: {
-		id(id) {
+		id(id: any) {
+			// @ts-expect-error KtSelectedTableId will exist at runtime
 			this.KtSelectedTableId = id
 		},
 	},
-	created() {
+	created(): void {
 		this.KtSelectedTableId = this.id
 	},
-	render() {
+	render(): any {
 		const {
 			KtTableStore: store,
 			KtTableColumns: columns,
@@ -26,6 +29,7 @@ const KtTableConsumer = {
 			KtTableOrderBeforeColumn: orderBeforeColumn,
 		} = this
 
+		// eslint-disable-next-line unicorn/consistent-destructuring
 		return this.$scopedSlots.default({
 			store,
 			columns,
diff --git a/packages/kotti-ui/source/kotti-table/KtTableProvider.d.ts b/packages/kotti-ui/source/kotti-table/KtTableProvider.d.ts
deleted file mode 100644
index 0dd62c8ac0..0000000000
--- a/packages/kotti-ui/source/kotti-table/KtTableProvider.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/naming-convention
-declare const KtTableProvider: any
-export { KtTableProvider }
diff --git a/packages/kotti-ui/source/kotti-table/KtTableProvider.js b/packages/kotti-ui/source/kotti-table/KtTableProvider.ts
similarity index 52%
rename from packages/kotti-ui/source/kotti-table/KtTableProvider.js
rename to packages/kotti-ui/source/kotti-table/KtTableProvider.ts
index a81361b512..f85e98fd62 100644
--- a/packages/kotti-ui/source/kotti-table/KtTableProvider.js
+++ b/packages/kotti-ui/source/kotti-table/KtTableProvider.ts
@@ -1,16 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import pick from 'lodash/pick'
 
 import { KT_TABLE_STATE_PROVIDER } from './constants'
 import KtTable, { INITIAL_TABLE_STORE_PROPS } from './KtTable.vue'
 import { TableStore } from './logic/store'
+import type { CreateElement } from 'vue'
 
 let tableProviderIdSeed = 1
 
-export const KtTableProvider = {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const KtTableProvider: any = {
 	name: 'KtTableProvider',
 	components: {},
 	props: { ...KtTable.props, rows: Array },
-	data() {
+	data(): any {
 		const defaultStore = new TableStore(
 			this,
 			pick(this, INITIAL_TABLE_STORE_PROPS),
@@ -23,36 +26,45 @@ export const KtTableProvider = {
 		}
 	},
 	computed: {
-		store() {
+		store(): unknown {
+			// @ts-expect-error getStore and selectedTableId will exist at runtime
 			return this.getStore(this.selectedTableId)
 		},
 	},
-	beforeCreate() {
+	beforeCreate(): void {
 		this.tableId = `kt-table-provider_${tableProviderIdSeed}`
 		tableProviderIdSeed += 1
 	},
 	methods: {
-		addTable(table) {
+		addTable(table: any): void {
+			// @ts-expect-error tables and $set will exist at runtime
 			this.$set(this.tables, table.tableId, table)
 		},
-		addStore(id, store) {
+		addStore(id: unknown, store: any): void {
+			// @ts-expect-error stores and $set will exist at runtime
 			this.$set(this.stores, id, store)
 		},
-		updateStoreId(id, newId) {
+		updateStoreId(id: any, newId: any) {
+			// @ts-expect-error stores and $set will exist at runtime
 			this.$set(this.stores, newId, this.stores[id])
+			// @ts-expect-error stores and $delete will exist at runtime
 			this.$delete(this.stores, id)
+			// @ts-expect-error selectedTableId will exist at runtime
 			if (this.selectedTableId === id) {
+				// @ts-expect-error selectedTableId will exist at runtime
 				this.selectedTableId = newId
 			}
 		},
-		setSelectedTableId(id) {
+		setSelectedTableId(id: unknown): void {
+			// @ts-expect-error selectedTableId will exist at runtime
 			this.selectedTableId = id
 		},
-		getStore(id) {
+		getStore(id: any): unknown {
+			// @ts-expect-error stores and defaultStore will exist at runtime
 			return this.stores[id] || this.defaultStore
 		},
 	},
-	render(h) {
+	render(h: CreateElement) {
 		return h('div', {}, [this.$slots.default])
 	},
 	provide() {
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBody.js b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
similarity index 57%
rename from packages/kotti-ui/source/kotti-table/components/TableBody.js
rename to packages/kotti-ui/source/kotti-table/components/TableBody.ts
index 904744eb43..6994f7d0a2 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableBody.js
+++ b/packages/kotti-ui/source/kotti-table/components/TableBody.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { CreateElement } from 'vue'
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
 
 import { TableBodyEmptyRow } from './TableBodyEmptyRow'
@@ -5,41 +7,47 @@ import { TableBodyExpandRow } from './TableBodyExpandRow'
 import { TableBodyLoadingRow } from './TableBodyLoadingRow'
 import { TableRow } from './TableRow'
 
-export const TableBody = {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const TableBody: any = {
 	name: 'TableBody',
 	components: { TableRow },
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
 	computed: {
-		rows() {
+		rows(): unknown {
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.rows
 		},
-		loading() {
+		loading(): unknown {
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].loading
 		},
-		showEmptyText() {
+		showEmptyText(): unknown {
 			return this.rows.length === 0 && !this.loading
 		},
-		isExpandable() {
+		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) {
+		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) {
+	render(h: CreateElement) {
 		const { showEmptyText, loading, rows, isExpandable, getRowKey } = this
 		return h('tbody', {}, [
 			showEmptyText && h(TableBodyEmptyRow),
 			...(loading
 				? [h(TableBodyLoadingRow)]
-				: rows.flatMap((row, rowIndex) => {
+				: rows.flatMap((row: any, rowIndex: number) => {
 						const key = getRowKey(row) || rowIndex
 
 						return [
 							h(TableRow, {
 								domProps: {
+									// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
 									'data-test': `table:element:${row.number}:${row.title}`,
 								},
 								key,
@@ -50,6 +58,7 @@ export const TableBody = {
 							}),
 							isExpandable &&
 								h(TableBodyExpandRow, {
+									// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
 									key: `${key}-expansion`,
 									props: {
 										row,
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.js b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.js
deleted file mode 100644
index c8e5328ccc..0000000000
--- a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
-
-export const TableBodyEmptyRow = {
-	name: 'TableBodyEmptyRow',
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	render(h) {
-		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() {
-			return this[KT_TABLE].colSpan
-		},
-		render() {
-			return this[KT_TABLE]._renderEmpty
-		},
-	},
-}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
new file mode 100644
index 0000000000..b1779bb618
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-table/components/TableBodyEmptyRow.ts
@@ -0,0 +1,32 @@
+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 = {
+	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
+		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
+		},
+	},
+}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.js b/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.js
deleted file mode 100644
index dc3763133a..0000000000
--- a/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
-
-export const TableBodyExpandRow = {
-	name: 'TableBodyExpandRow',
-	props: {
-		row: Object,
-		rowIndex: Number,
-	},
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	render(h) {
-		const { isExpanded, row, rowIndex, colSpan, renderExpand } = this
-		return (
-			isExpanded &&
-			h('tr', {}, [
-				h(
-					'td',
-					{
-						domProps: {
-							colSpan,
-						},
-						class: 'kt-table__expanded-cell',
-					},
-					[renderExpand && renderExpand(h, { row, data: row, rowIndex })],
-				),
-			])
-		)
-	},
-	computed: {
-		colSpan() {
-			return this[KT_TABLE].colSpan
-		},
-		isExpanded() {
-			return this[KT_STORE].get('isExpanded', this.row)
-		},
-		renderExpand() {
-			return this[KT_TABLE]._renderExpand
-		},
-	},
-}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts
new file mode 100644
index 0000000000..2533b58840
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-table/components/TableBodyExpandRow.ts
@@ -0,0 +1,45 @@
+/* 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'
+
+export const TableBodyExpandRow: any = {
+	name: 'TableBodyExpandRow',
+	props: {
+		row: Object,
+		rowIndex: Number,
+	},
+	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
+	render(h: CreateElement): VNode {
+		const { isExpanded, row, rowIndex, colSpan, renderExpand } = this
+		return (
+			isExpanded &&
+			h('tr', {}, [
+				h(
+					'td',
+					{
+						domProps: {
+							colSpan,
+						},
+						class: 'kt-table__expanded-cell',
+					},
+					[renderExpand?.(h, { row, data: row, 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.js b/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.js
deleted file mode 100644
index ca060a9666..0000000000
--- a/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
-
-export const TableBodyLoadingRow = {
-	name: 'TableBodyLoadingRow',
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	computed: {
-		colSpan() {
-			return this[KT_TABLE].colSpan
-		},
-		render() {
-			return this[KT_TABLE]._renderLoading
-		},
-	},
-	render(h) {
-		const { colSpan, render } = this
-
-		return h('tr', {}, [
-			h('td', { domProps: { colSpan }, class: 'kt-table__loader' }, [
-				render(h),
-			]),
-		])
-	},
-}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts b/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts
new file mode 100644
index 0000000000..c045a0e24b
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-table/components/TableBodyLoadingRow.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { CreateElement } from 'vue'
+import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const TableBodyLoadingRow: any = {
+	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
+
+		return h('tr', {}, [
+			h('td', { domProps: { colSpan }, class: 'kt-table__loader' }, [
+				render(h),
+			]),
+		])
+	},
+}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
index d548b3bc24..f4c082a7bd 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeader.vue
@@ -59,8 +59,9 @@
 	</thead>
 </template>
 
-<script>
+<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'
 
@@ -78,46 +79,56 @@ export default {
 	},
 	computed: {
 		isAllRowsDisabled() {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.isAllRowsDisabled
 		},
 		isAllSelected() {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.isAllSelected
 		},
 		tableColumns() {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].state.columns
 		},
 		hasActions() {
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].hasActions
 		},
 		isDraggable() {
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].useColumnDragToOrder
 		},
 		isDraggingColumn() {
 			return Boolean(this.draggingColumn)
 		},
 		isExpandable() {
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].isExpandable
 		},
 		isSelectable() {
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].isSelectable
 		},
 		useQuickSortControl() {
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_TABLE].useQuickSortControl
 		},
 		tableHeaderClass() {
+			// @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() {
+		handleSelectAll(_event: unknown) {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('toggleAllSelection')
 		},
-		handleThClick(column) {
+		handleThClick(column: unknown) {
 			if (this.useQuickSortControl && this.canSort(column)) {
 				this.changeSort(column)
 			}
 		},
-		getThClasses(column) {
+		getThClasses(column: any) {
 			return [
 				{
 					['drag-over']: this.isDraggedOver(column),
@@ -126,44 +137,51 @@ export default {
 					sorted: this.isSorted(column),
 					clickable: this.canSort(column),
 				},
+				// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 				this[KT_TABLE].thClasses,
 				column.thClass,
 			]
 		},
-		getThStyle(column) {
+		getThStyle(column: any) {
 			return {
 				textAlign: column.align || KottiTable.Column.Align.LEFT,
 				width: column.width || 'auto',
 			}
 		},
-		canSort(column) {
+		canSort(column: unknown) {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('canSort', column)
 		},
-		isSorted(column) {
+		isSorted(column: unknown) {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSorted', column)
 		},
-		changeSort(column) {
+		changeSort(column: unknown) {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('sort', { column })
 		},
-		isSortedByAsc(column) {
+		isSortedByAsc(column: unknown) {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSortedByAsc', column)
 		},
-		isSortedByDsc(column) {
+		isSortedByDsc(column: unknown) {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			return this[KT_STORE].get('isSortedByDsc', column)
 		},
-		dragStart(event, column) {
+		dragStart(_event: unknown, column: any) {
 			this.draggingColumn = column
 		},
-		dragEnter(event, column) {
+		dragEnter(_event: unknown, column: any) {
 			this.columnDragOver = column
 		},
 		dragEnd() {
 			this.columnDragOver = null
 		},
-		isDraggedOver(column) {
+		isDraggedOver(column: unknown) {
 			return column === this.columnDragOver && this.draggingColumn !== column
 		},
-		drop(event, column) {
+		drop(_event: unknown, column: unknown) {
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_STORE].commit('orderBefore', this.draggingColumn, column)
 			this.draggingColumn = null
 			this.columnDragOver = null
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.js b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.js
deleted file mode 100644
index 64c8385637..0000000000
--- a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.js
+++ /dev/null
@@ -1,13 +0,0 @@
-export const TableHeaderCell = {
-	name: 'TableHeaderCell',
-	functional: true,
-	props: ['column', 'columnIndex'],
-	render(h, context) {
-		const { column, columnIndex } = context.props
-		return column.renderHeader(h, {
-			column,
-			value: column.label,
-			columnIndex,
-		})
-	},
-}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
new file mode 100644
index 0000000000..5ccd3070db
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-table/components/TableHeaderCell.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { CreateElement, VNode } from 'vue'
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const TableHeaderCell = {
+	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,
+		})
+	},
+}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRow.js b/packages/kotti-ui/source/kotti-table/components/TableRow.js
deleted file mode 100644
index 35a09b165f..0000000000
--- a/packages/kotti-ui/source/kotti-table/components/TableRow.js
+++ /dev/null
@@ -1,234 +0,0 @@
-import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
-
-import { TableRowCell } from './TableRowCell'
-
-export const TableRow = {
-	name: 'TableRow',
-	props: {
-		rowIndex: Number,
-		row: Object,
-	},
-	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
-	computed: {
-		_trClasses() {
-			const classes = []
-
-			if ((this.isInteractive || this.hasClickListener) && !this.isDisabled)
-				classes.push('clickable')
-			if (this.isSelected) classes.push('selected')
-			if (this.isDisabled) classes.push('disabled')
-			if (this[KT_TABLE].trClasses) classes.push(this[KT_TABLE].trClasses)
-
-			return classes
-		},
-		isExpanded() {
-			return this[KT_STORE].get('isExpanded', this.row)
-		},
-		expandToggleIcon() {
-			return this.isExpanded ? 'chevron_down' : 'chevron_right'
-		},
-		hasClickListener() {
-			return Boolean(this[KT_TABLE].$listeners['rowClick'])
-		},
-		isInteractive() {
-			return (
-				this[KT_TABLE].isInteractive ||
-				Boolean(this[KT_TABLE].$listeners['activateRow'])
-			)
-		},
-		isSelectable() {
-			return this[KT_TABLE].isSelectable
-		},
-		selection() {
-			return this[KT_STORE].state.selection
-		},
-		tableColumns() {
-			return this[KT_STORE].state.columns
-		},
-		isExpandable() {
-			return this[KT_TABLE].isExpandable
-		},
-		hasActions() {
-			return this[KT_TABLE].hasActions
-		},
-		renderActions() {
-			return this[KT_TABLE]._renderActions
-		},
-		isDisabled() {
-			return this[KT_TABLE].disableRow({
-				row: this.row,
-				rowIndex: this.rowIndex,
-			})
-		},
-		isSelected() {
-			return this[KT_STORE].get('isSelected', this.row)
-		},
-		isFocused() {
-			return this[KT_STORE].get('isFocusedRow', this.row)
-		},
-	},
-	methods: {
-		handleSelect($event, row) {
-			$event.stopPropagation()
-			this[KT_STORE].commit('selectRow', row, $event.target.checked)
-		},
-		handleExpand($event, row) {
-			$event.stopPropagation()
-			this[KT_STORE].commit('expandRow', row)
-		},
-		handleActionsClick($event) {
-			$event.stopPropagation()
-		},
-		handleClick($event, row, index) {
-			if (!this.isDisabled) {
-				this[KT_TABLE].$emit('rowClick', row, index)
-				if (this.isInteractive) {
-					this[KT_TABLE].$emit('activateRow', row, index)
-				}
-			}
-		},
-		handleFocus($event, row, index) {
-			if (this.isInteractive && !this.isDisabled) {
-				this[KT_STORE].commit('focuseRow', row)
-				this[KT_TABLE].$emit('rowFocus', row, index)
-			}
-		},
-		handleKey($event, row, index) {
-			if (
-				$event.key === 'Enter' &&
-				this.isInteractive &&
-				!this.isDisabled &&
-				this.isFocused
-			) {
-				this[KT_TABLE].$emit('activateRow', row, index)
-			}
-		},
-		handleBlur($event, row, index) {
-			if (this.isInteractive && !this.isDisabled) {
-				this[KT_STORE].commit('blurRow', row)
-				this[KT_TABLE].$emit('rowBlur', row, index)
-			}
-		},
-	},
-	render(h) {
-		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,
-				domProps: {
-					role: isInteractive && !isDisabled ? 'button' : false,
-					tabIndex: isInteractive && !isDisabled ? 0 : false,
-				},
-				on: {
-					click: ($event) => handleClick($event, row, rowIndex),
-					focus: ($event) => handleFocus($event, row, rowIndex),
-					blur: ($event) => handleBlur($event, row, rowIndex),
-					keyup: ($event) => handleKey($event, row, rowIndex),
-				},
-			},
-			[
-				isExpandable &&
-					h(
-						'td',
-						{
-							class: 'c-hand',
-							on: {
-								click: ($event) => handleExpand($event, row, rowIndex),
-							},
-						},
-						[
-							h('div', { class: 'expand-toggle' }, [
-								h('i', { class: 'yoco' }, [expandToggleIcon]),
-							]),
-						],
-					),
-				isSelectable &&
-					h(
-						'td',
-						{
-							class: 'td-selectable kt-table__checkbox-col',
-							on: {
-								click: ($event) => $event.stopPropagation(),
-							},
-						},
-						[
-							h(
-								'div',
-								{
-									class: 'form-group',
-								},
-								[
-									h('label', { class: 'form-checkbox' }, [
-										h('input', {
-											domProps: {
-												checked: isSelected,
-												disabled: isDisabled,
-												type: 'checkbox',
-											},
-											on: {
-												change: ($event) => handleSelect($event, row),
-											},
-										}),
-										h('i', {
-											class: 'form-icon',
-											style: isDisabled ? { cursor: 'not-allowed' } : undefined,
-										}),
-									]),
-								],
-							),
-						],
-					),
-				...tableColumns.map((column, columnIndex) =>
-					h(TableRowCell, {
-						key: column.prop || columnIndex,
-						props: {
-							column,
-							columnIndex,
-							row,
-							rowIndex,
-						},
-					}),
-				),
-				hasActions &&
-					h(
-						'td',
-						{
-							on: {
-								click: handleActionsClick,
-							},
-						},
-						[
-							h(
-								'div',
-								{
-									class: 'table-actions',
-								},
-								[renderActions(h, { row, data: row, rowIndex })],
-							),
-						],
-					),
-			],
-		)
-	},
-}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRow.ts b/packages/kotti-ui/source/kotti-table/components/TableRow.ts
new file mode 100644
index 0000000000..262324dc4a
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-table/components/TableRow.ts
@@ -0,0 +1,285 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { CreateElement } from 'vue'
+import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+
+import { TableRowCell } from './TableRowCell'
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const TableRow: any = {
+	name: 'TableRow',
+	props: {
+		rowIndex: Number,
+		row: Object,
+	},
+	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
+	computed: {
+		_trClasses(): string[] {
+			const classes = []
+
+			// @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)
+
+			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)
+			)
+		},
+		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 {
+			$event.stopPropagation()
+			// @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
+			this[KT_STORE].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('focuseRow', 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,
+				domProps: {
+					role: isInteractive && !isDisabled ? 'button' : false,
+					tabIndex: isInteractive && !isDisabled ? 0 : false,
+				},
+				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),
+							},
+						},
+						[
+							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()
+								},
+							},
+						},
+						[
+							h(
+								'div',
+								{
+									class: 'form-group',
+								},
+								[
+									h('label', { class: 'form-checkbox' }, [
+										h('input', {
+											domProps: {
+												checked: isSelected,
+												disabled: isDisabled,
+												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,
+						},
+					}),
+				),
+				hasActions &&
+					h(
+						'td',
+						{
+							on: {
+								click: handleActionsClick,
+							},
+						},
+						[
+							h(
+								'div',
+								{
+									class: 'table-actions',
+								},
+								[renderActions(h, { row, data: row, rowIndex })],
+							),
+						],
+					),
+			],
+		)
+	},
+}
diff --git a/packages/kotti-ui/source/kotti-table/components/TableRowCell.js b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
similarity index 63%
rename from packages/kotti-ui/source/kotti-table/components/TableRowCell.js
rename to packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
index be0d2ca728..53d8e78dec 100644
--- a/packages/kotti-ui/source/kotti-table/components/TableRowCell.js
+++ b/packages/kotti-ui/source/kotti-table/components/TableRowCell.ts
@@ -1,8 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import property from 'lodash/property'
 
 import { KT_TABLE, KT_STORE, KT_LAYOUT } from '../constants'
+import type { CreateElement } from 'vue'
 
-export const TableRowCell = {
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const TableRowCell: any = {
 	name: 'TableRowCell',
 	props: {
 		column: Object,
@@ -12,16 +15,20 @@ export const TableRowCell = {
 	},
 	inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
 	computed: {
-		value() {
+		value(): unknown {
+			// @ts-expect-error column and row will exist at runtime
 			return property(this.column.prop)(this.row)
 		},
-		_tdClasses() {
+		_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]
 		},
-		_cellClass() {
+		_cellClass(): [unknown, unknown] {
+			// @ts-expect-error column will exist at runtime
 			return ['kt-table__cell', this.column.cellClass]
 		},
-		_tdStyles() {
+		_tdStyles(): unknown {
+			// @ts-expect-error column will exist at runtime
 			const { column } = this
 			return {
 				...column.styles,
@@ -33,14 +40,16 @@ export const TableRowCell = {
 		},
 	},
 	methods: {
-		cellClick($event, data) {
+		cellClick($event: MouseEvent, data: any) {
 			if (data.column.disableRowClick) {
+				// @ts-expect-error likely supposed to mean stopPropagation
 				$event.stopPropogation()
 			}
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
 			this[KT_TABLE].$emit('cellClick', data)
 		},
 	},
-	render(h) {
+	render(h: CreateElement) {
 		const {
 			column,
 			row,
@@ -57,7 +66,7 @@ export const TableRowCell = {
 			{
 				class: _tdClasses,
 				on: {
-					click: ($event) =>
+					click: ($event: MouseEvent) =>
 						cellClick($event, { value, column, row, columnIndex, rowIndex }),
 				},
 				style: _tdStyles,
diff --git a/packages/kotti-ui/source/kotti-table/constants.js b/packages/kotti-ui/source/kotti-table/constants.ts
similarity index 55%
rename from packages/kotti-ui/source/kotti-table/constants.js
rename to packages/kotti-ui/source/kotti-table/constants.ts
index 8fd5c82830..dae223bb07 100644
--- a/packages/kotti-ui/source/kotti-table/constants.js
+++ b/packages/kotti-ui/source/kotti-table/constants.ts
@@ -1,3 +1,7 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import type { CreateElement } from 'vue'
+
 export const IS_ASC = /ascending|^1/
 export const IS_DSC = /descending|^-1/
 
@@ -7,24 +11,24 @@ export const KT_LAYOUT = 'KT_LAYOUT'
 export const KT_TABLE_STATE_PROVIDER = 'KT_TABLE_STATE_PROVIDER'
 export const COLUMN_TYPE = Symbol('kt-table-column')
 
-export const DEFAULT_DISABLE_ROW = () => false
+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 DEFAULT_RENDER_CELL = function DEFAULT_RENDER_CELL(
-	h,
-	{ row, rowIndex, column, columnIndex, value },
-) {
+export const DEFAULT_RENDER_CELL = function defaultRenderCell(
+	_h: CreateElement,
+	{ row, rowIndex, column, columnIndex, value }: any,
+): [any] {
 	return [
 		column.formatter(value, row, column, columnIndex, rowIndex) ??
 			column.default,
 	]
 }
 
-export const DEFAULT_RENDER_HEADER = function DEFAULT_RENDER_HEADER(
-	h,
-	{ column },
-) {
+export const DEFAULT_RENDER_HEADER = function defaultRenderHeader(
+	_h: CreateElement,
+	{ column }: any,
+): [any] {
 	return [column.label === undefined ? column.prop : column.label]
 }
diff --git a/packages/kotti-ui/source/kotti-table/logic/column.ts b/packages/kotti-ui/source/kotti-table/logic/column.ts
index f92f88d4d3..02eca5606a 100644
--- a/packages/kotti-ui/source/kotti-table/logic/column.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/column.ts
@@ -87,7 +87,7 @@ function emitColumnsChange(store: any) {
 		)
 }
 
-function didRestorDestroyedColumns({
+function didRestoreDestroyedColumns({
 	_destroyedColumns,
 }: {
 	_destroyedColumns: any
@@ -95,7 +95,8 @@ function didRestorDestroyedColumns({
 	const columns = Object.values(_destroyedColumns)
 
 	return (
-		columns.length > 0 &&
+		// eslint-disable-next-line unicorn/explicit-length-check
+		columns.length &&
 		columns.reduce((sum, n) => (sum as number) + (n as number) === 0)
 	)
 }
@@ -153,7 +154,7 @@ export const mutations = {
 	): void {
 		const { table, state } = store
 		if (table.$ready) {
-			if (refreshColumnArray || didRestorDestroyedColumns(state)) {
+			if (refreshColumnArray || didRestoreDestroyedColumns(state)) {
 				state._columnsArray = resolveColumnsOrder(state)
 				state.orderedColumns = getOrderedColumns(state)
 				state._destroyedColumns = {}
diff --git a/packages/kotti-ui/source/kotti-table/logic/select.ts b/packages/kotti-ui/source/kotti-table/logic/select.ts
index f9c1e0f8ba..b3516f2030 100644
--- a/packages/kotti-ui/source/kotti-table/logic/select.ts
+++ b/packages/kotti-ui/source/kotti-table/logic/select.ts
@@ -91,6 +91,7 @@ export const mutations = {
 			return
 		}
 
+		// eslint-disable-next-line unicorn/consistent-destructuring
 		const shouldSelectAll = !state.isAllSelected
 
 		store.commit('setSelected', shouldSelectAll ? [...enabledRows] : [])
diff --git a/packages/kotti-ui/source/kotti-table/mixins.d.ts b/packages/kotti-ui/source/kotti-table/mixins.d.ts
deleted file mode 100644
index 9b86092423..0000000000
--- a/packages/kotti-ui/source/kotti-table/mixins.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-declare const TableColumnsStateMixin: any
-export { TableColumnsStateMixin }
diff --git a/packages/kotti-ui/source/kotti-table/mixins.js b/packages/kotti-ui/source/kotti-table/mixins.js
deleted file mode 100644
index 7f104ddd5c..0000000000
--- a/packages/kotti-ui/source/kotti-table/mixins.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { KT_STORE, KT_TABLE_STATE_PROVIDER, KT_TABLE } from './constants'
-
-export const TableColumnsStateMixin = {
-	inject: {
-		[KT_TABLE]: { default: false },
-		[KT_STORE]: { default: false },
-		[KT_TABLE_STATE_PROVIDER]: {
-			default: {
-				get store() {
-					throw new Error(
-						'tried to capture table state without KtTable or KtTableProvider',
-					)
-				},
-			},
-		},
-	},
-	data() {
-		return {
-			KtSelectedTableId: null,
-		}
-	},
-	computed: {
-		KtTableStore() {
-			return this[KT_TABLE]
-				? this[KT_STORE]
-				: this[KT_TABLE_STATE_PROVIDER].getStore(this.KtSelectedTableId)
-		},
-		KtTableColumns() {
-			return this.KtTableStore.state._columnsArray
-		},
-		KtTableHiddenColumns() {
-			return this.KtTableStore.state.hiddenColumns
-		},
-		KtTableSortedColumns() {
-			return this.KtTableStore.state.sortedColumns
-		},
-		KtTableFilteredColumns() {
-			return this.KtTableStore.state.filteredColumns
-		},
-	},
-	methods: {
-		KtTableHideColumn(column, toggle = true) {
-			this.KtTableStore.commit('hide', column, toggle)
-		},
-		KtTableShowAllColumns() {
-			this.KtTableStore.commit('showAll')
-		},
-		KtTableOrderBeforeColumn(fromColumn, toColumn) {
-			this.KtTableStore.commit('orderBefore', fromColumn, toColumn)
-		},
-	},
-}
diff --git a/packages/kotti-ui/source/kotti-table/mixins.ts b/packages/kotti-ui/source/kotti-table/mixins.ts
new file mode 100644
index 0000000000..1cbd1288c0
--- /dev/null
+++ b/packages/kotti-ui/source/kotti-table/mixins.ts
@@ -0,0 +1,71 @@
+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_STORE]: { default: false },
+		[KT_TABLE_STATE_PROVIDER]: {
+			default: {
+				get store(): void {
+					throw new Error(
+						'tried to capture table state without KtTable or KtTableProvider',
+					)
+				},
+			},
+		},
+	},
+	data(): unknown {
+		return {
+			KtSelectedTableId: null,
+		}
+	},
+	computed: {
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		KtTableStore(): unknown {
+			// @ts-expect-error `this[KT_TABLE]` seems to emulate a provide/inject pattern of sorts
+			return this[KT_TABLE]
+				? // @ts-expect-error `this[KT_STORE]` seems to emulate a provide/inject pattern of sorts
+					this[KT_STORE]
+				: // @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
+					this[KT_TABLE_STATE_PROVIDER].getStore(this.KtSelectedTableId)
+		},
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		KtTableColumns(): unknown {
+			// @ts-expect-error this will be resolved correctly by vue at runtime
+			return this.KtTableStore.state._columnsArray
+		},
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		KtTableHiddenColumns(): unknown {
+			// @ts-expect-error this will be resolved correctly by vue at runtime
+			return this.KtTableStore.state.hiddenColumns
+		},
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		KtTableSortedColumns(): unknown {
+			// @ts-expect-error this will be resolved correctly by vue at runtime
+			return this.KtTableStore.state.sortedColumns
+		},
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		KtTableFilteredColumns(): unknown {
+			// @ts-expect-error this will be resolved correctly by vue at runtime
+			return this.KtTableStore.state.filteredColumns
+		},
+	},
+	methods: {
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		KtTableHideColumn(column: unknown, toggle = true): void {
+			// @ts-expect-error this will be resolved correctly by vue at runtime
+			this.KtTableStore.commit('hide', column, toggle)
+		},
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		KtTableShowAllColumns(): void {
+			// @ts-expect-error this will be resolved correctly by vue at runtime
+			this.KtTableStore.commit('showAll')
+		},
+		// eslint-disable-next-line @typescript-eslint/naming-convention
+		KtTableOrderBeforeColumn(fromColumn: unknown, toColumn: unknown): void {
+			// @ts-expect-error this will be resolved correctly by vue at runtime
+			this.KtTableStore.commit('orderBefore', fromColumn, toColumn)
+		},
+	},
+}
diff --git a/packages/kotti-ui/source/kotti-table/table-layout.js b/packages/kotti-ui/source/kotti-table/table-layout.ts
similarity index 53%
rename from packages/kotti-ui/source/kotti-table/table-layout.js
rename to packages/kotti-ui/source/kotti-table/table-layout.ts
index fe0c48ba90..2c72bd0d1a 100644
--- a/packages/kotti-ui/source/kotti-table/table-layout.js
+++ b/packages/kotti-ui/source/kotti-table/table-layout.ts
@@ -1,5 +1,6 @@
 export class TableLayout {
-	constructor(table) {
+	table: unknown
+	constructor(table: unknown) {
 		this.table = table
 	}
 }