From 8409bd53f50dbb7f067dc0895cd2d812c829f212 Mon Sep 17 00:00:00 2001
From: Kostiantyn Miakshyn <molodchick@gmail.com>
Date: Tue, 14 Jul 2026 00:27:27 +0200
Subject: [PATCH] Refactor: Extract `getTableCellComponent` helper for better
 reusability

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>
---
 .../components/ncTable/partials/TableCell.js  | 40 +++++++++++++++
 .../components/ncTable/partials/TableRow.vue  | 51 ++-----------------
 2 files changed, 44 insertions(+), 47 deletions(-)
 create mode 100644 src/shared/components/ncTable/partials/TableCell.js

diff --git a/src/shared/components/ncTable/partials/TableCell.js b/src/shared/components/ncTable/partials/TableCell.js
new file mode 100644
index 0000000000..2ab4e0729b
--- /dev/null
+++ b/src/shared/components/ncTable/partials/TableCell.js
@@ -0,0 +1,40 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { ColumnTypes } from './../mixins/columnHandler.js'
+
+import TableCellHtml from './TableCellHtml.vue'
+import TableCellProgress from './TableCellProgress.vue'
+import TableCellLink from './TableCellLink.vue'
+import TableCellNumber from './TableCellNumber.vue'
+import TableCellStars from './TableCellStars.vue'
+import TableCellYesNo from './TableCellYesNo.vue'
+import TableCellDateTime from './TableCellDateTime.vue'
+import TableCellTextLine from './TableCellTextLine.vue'
+import TableCellSelection from './TableCellSelection.vue'
+import TableCellMultiSelection from './TableCellMultiSelection.vue'
+import TableCellRelation from './TableCellRelation.vue'
+import TableCellTextRich from './TableCellEditor.vue'
+import TableCellUsergroup from './TableCellUsergroup.vue'
+
+const COMPONENT_BY_COLUMN_TYPE = {
+	[ColumnTypes.TextLine]: TableCellTextLine,
+	[ColumnTypes.TextLink]: TableCellLink,
+	[ColumnTypes.TextRich]: TableCellTextRich,
+	[ColumnTypes.Number]: TableCellNumber,
+	[ColumnTypes.NumberStars]: TableCellStars,
+	[ColumnTypes.NumberProgress]: TableCellProgress,
+	[ColumnTypes.Selection]: TableCellSelection,
+	[ColumnTypes.SelectionMulti]: TableCellMultiSelection,
+	[ColumnTypes.SelectionCheck]: TableCellYesNo,
+	[ColumnTypes.Datetime]: TableCellDateTime,
+	[ColumnTypes.DatetimeDate]: TableCellDateTime,
+	[ColumnTypes.DatetimeTime]: TableCellDateTime,
+	[ColumnTypes.Usergroup]: TableCellUsergroup,
+	[ColumnTypes.Relation]: TableCellRelation,
+}
+
+export function getTableCellComponent(column) {
+	return COMPONENT_BY_COLUMN_TYPE[column?.type] || TableCellHtml
+}
diff --git a/src/shared/components/ncTable/partials/TableRow.vue b/src/shared/components/ncTable/partials/TableRow.vue
index 1d8cf396a5..f350d031e1 100644
--- a/src/shared/components/ncTable/partials/TableRow.vue
+++ b/src/shared/components/ncTable/partials/TableRow.vue
@@ -20,7 +20,7 @@
 				'frozen-column--last': index === pinnedColumnIndex,
 			}"
 			@click="handleCellClick(col)">
-			<component :is="getTableCell(col)"
+			<component :is="getTableCellComponent(col)"
 				:column="col"
 				:row-id="row.id"
 				:value="getCellValue(col)"
@@ -68,20 +68,8 @@ import { NcCheckboxRadioSwitch, NcActions, NcActionButton } from '@nextcloud/vue
 import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
 import Pencil from 'vue-material-design-icons/PencilOutline.vue'
 import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
-import TableCellHtml from './TableCellHtml.vue'
-import TableCellProgress from './TableCellProgress.vue'
-import TableCellLink from './TableCellLink.vue'
-import TableCellNumber from './TableCellNumber.vue'
-import TableCellStars from './TableCellStars.vue'
-import TableCellYesNo from './TableCellYesNo.vue'
-import TableCellDateTime from './TableCellDateTime.vue'
-import TableCellTextLine from './TableCellTextLine.vue'
-import TableCellSelection from './TableCellSelection.vue'
-import TableCellMultiSelection from './TableCellMultiSelection.vue'
-import TableCellRelation from './TableCellRelation.vue'
-import TableCellTextRich from './TableCellEditor.vue'
-import TableCellUsergroup from './TableCellUsergroup.vue'
-import { ColumnTypes, getColumnWidthStyle, getFrozenColumnStyle } from './../mixins/columnHandler.js'
+import { getTableCellComponent } from './TableCell.js'
+import { getColumnWidthStyle, getFrozenColumnStyle } from './../mixins/columnHandler.js'
 import { translate as t } from '@nextcloud/l10n'
 import {
 	TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
@@ -91,25 +79,12 @@ import activityMixin from '../../../mixins/activityMixin.js'
 export default {
 	name: 'TableRow',
 	components: {
-		TableCellYesNo,
-		TableCellStars,
-		TableCellNumber,
-		TableCellLink,
-		TableCellProgress,
-		TableCellHtml,
 		NcActions,
 		NcActionButton,
 		ContentCopy,
 		Pencil,
 		TrashCanOutline,
 		NcCheckboxRadioSwitch,
-		TableCellDateTime,
-		TableCellTextLine,
-		TableCellSelection,
-		TableCellMultiSelection,
-		TableCellRelation,
-		TableCellTextRich,
-		TableCellUsergroup,
 	},
 
 	mixins: [activityMixin],
@@ -180,31 +155,13 @@ export default {
 		t,
 		getColumnWidthStyle,
 		getFrozenColumnStyle,
+		getTableCellComponent,
 		handleCellClick(column) {
 			// If the column type doesn't support inline editing, trigger the edit modal
 			if (this.nonInlineEditableColumnTypes.includes(column.type) && this.config.canEditRows) {
 				this.$emit('edit-row', this.row.id)
 			}
 		},
-		getTableCell(column) {
-			switch (column.type) {
-			case ColumnTypes.TextLine: return 'TableCellTextLine'
-			case ColumnTypes.TextLink: return 'TableCellLink'
-			case ColumnTypes.TextRich:return 'TableCellTextRich'
-			case ColumnTypes.Number: return 'TableCellNumber'
-			case ColumnTypes.NumberStars: return 'TableCellStars'
-			case ColumnTypes.NumberProgress: return 'TableCellProgress'
-			case ColumnTypes.Selection: return 'TableCellSelection'
-			case ColumnTypes.SelectionMulti: return 'TableCellMultiSelection'
-			case ColumnTypes.SelectionCheck: return 'TableCellYesNo'
-			case ColumnTypes.Relation: return 'TableCellRelation'
-			case ColumnTypes.Datetime: return 'TableCellDateTime'
-			case ColumnTypes.DatetimeDate: return 'TableCellDateTime'
-			case ColumnTypes.DatetimeTime: return 'TableCellDateTime'
-			case ColumnTypes.Usergroup: return 'TableCellUsergroup'
-			default: return 'TableCellHtml'
-			}
-		},
 		getCell(columnId) {
 			if (columnId < 0) {
 				// See metaColumns.js for mapping