From d6bb8c659e92e4fbd47b96dd924541a5f890dfc0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Wed, 21 Dec 2022 12:42:41 +0530
Subject: [PATCH] feat(gui): show custom table icon in expanded row title

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui/components/general/TableIcon.vue   | 22 +++++++++++++++++++
 .../smartsheet/expanded-form/Header.vue       |  2 +-
 2 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui/components/general/TableIcon.vue

diff --git a/packages/nc-gui/components/general/TableIcon.vue b/packages/nc-gui/components/general/TableIcon.vue
new file mode 100644
index 0000000000..f5c9126f2f
--- /dev/null
+++ b/packages/nc-gui/components/general/TableIcon.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { Icon as IcIcon } from '@iconify/vue'
+import type { TableType } from 'nocodb-sdk'
+
+const { meta: tableMeta } = defineProps<{
+  meta: TableType
+}>()
+</script>
+
+<template>
+  <IcIcon
+    v-if="tableMeta.meta?.icon"
+    :data-testid="`nc-icon-${tableMeta.meta?.icon}`"
+    class="text-xl"
+    :icon="tableMeta.meta?.icon"
+  ></IcIcon>
+
+  <MdiEyeCircleOutline v-else-if="tableMeta.meta?.type === 'view'" class="w-5" />
+  <MdiTableLarge v-else class="w-5" />
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
index a9c5107a66..823d5f9800 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/Header.vue
@@ -77,7 +77,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 <template>
   <div class="flex p-2 items-center gap-2 p-4 nc-expanded-form-header">
     <h5 class="text-lg font-weight-medium flex items-center gap-1 mb-0 min-w-0 overflow-x-hidden truncate">
-      <mdi-table-arrow-right :style="{ color: iconColor }" />
+      <GeneralTableIcon :style="{ color: iconColor }" :meta="meta" class="mx-2"></GeneralTableIcon>
 
       <template v-if="meta">
         {{ meta.title }}