Refactor: Extract table cell component for better reusability

src/shared/components/ncTable/partials/TableCell.vue

@@ -0,0 +1,83 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+<template>
+	<component :is="cellComponent"
+		:column="column"
+		:row-id="rowId"
+		:value="value"
+		:element-id="elementId"
+		:is-view="isView"
+		:can-edit="canEdit" />
+</template>
+
+<script>
+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 default {
+	name: 'TableCell',
+	props: {
+		column: {
+			type: Object,
+			default: () => {},
+		},
+		rowId: {
+			type: Number,
+			default: null,
+		},
+		value: {
+			type: [String, Number, Array, Object, Boolean, null],
+			default: null,
+		},
+		elementId: {
+			type: Number,
+			default: null,
+		},
+		isView: {
+			type: Boolean,
+			default: true,
+		},
+		canEdit: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		cellComponent() {
+			return COMPONENT_BY_COLUMN_TYPE[this.column?.type] || TableCellHtml
+		},
+	},
+}
+</script>

src/shared/components/ncTable/partials/TableRow.vue

@@ -20,8 +20,7 @@
 				'frozen-column--last': index === pinnedColumnIndex,
 			}"
 			@click="handleCellClick(col)">
-			<component :is="getTableCell(col)"
-				:column="col"
+			<TableCell :column="col"
 				:row-id="row.id"
 				:value="getCellValue(col)"
 				:element-id="elementId"
@@ -68,20 +67,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 TableCell from './TableCell.vue'
+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 +78,13 @@ import activityMixin from '../../../mixins/activityMixin.js'
 export default {
 	name: 'TableRow',
 	components: {
-		TableCellYesNo,
-		TableCellStars,
-		TableCellNumber,
-		TableCellLink,
-		TableCellProgress,
-		TableCellHtml,
+		TableCell,
 		NcActions,
 		NcActionButton,
 		ContentCopy,
 		Pencil,
 		TrashCanOutline,
 		NcCheckboxRadioSwitch,
-		TableCellDateTime,
-		TableCellTextLine,
-		TableCellSelection,
-		TableCellMultiSelection,
-		TableCellRelation,
-		TableCellTextRich,
-		TableCellUsergroup,
 	},
 
 	mixins: [activityMixin],
@@ -180,25 +155,6 @@ export default {
 				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