From 9b9282dfd98d2b8a0e250c8a6b4fdabfce741f3f Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinavrautcs@gmail.com>
Date: Mon, 24 Mar 2025 23:14:29 +0530
Subject: [PATCH] feat: add no records found message to SimpleTable component

---
 frontend/src/components/table/SimpleTable.vue | 100 +++++++++++-------
 1 file changed, 60 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/table/SimpleTable.vue b/frontend/src/components/table/SimpleTable.vue
index abc403a..791a0a0 100644
--- a/frontend/src/components/table/SimpleTable.vue
+++ b/frontend/src/components/table/SimpleTable.vue
@@ -1,26 +1,46 @@
 <template>
-    <table class="min-w-full divide-y divide-gray-200">
-        <thead class="bg-gray-50">
-            <tr>
-                <th v-for="(header, index) in headers" :key="index" scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
-                    {{ header }}
-                </th>
-                <th scope="col" class="relative px-6 py-3"></th>
-            </tr>
-        </thead>
-        <tbody class="bg-white divide-y divide-gray-200">
-            <tr v-for="(item, index) in data" :key="index">
-                <td v-for="key in keys" :key="key" class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-                    {{ item[key] }}
-                </td>
-                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-                    <Button size="xs" variant="ghost" @click.prevent="deleteItem(item)">
-                        <Trash2 class="h-4 w-4" />
-                    </Button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+  <table class="min-w-full divide-y divide-gray-200">
+    <thead class="bg-gray-50">
+      <tr>
+        <th
+          v-for="(header, index) in headers"
+          :key="index"
+          scope="col"
+          class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+        >
+          {{ header }}
+        </th>
+        <th scope="col" class="relative px-6 py-3"></th>
+      </tr>
+    </thead>
+    <tbody class="bg-white divide-y divide-gray-200">
+      <template v-if="data.length === 0">
+        <tr>
+          <td :colspan="headers.length + 1" class="px-6 py-12 text-center">
+            <div class="flex flex-col items-center space-y-4">
+              <span class="text-md text-gray-500"> No records found. </span>
+            </div>
+          </td>
+        </tr>
+      </template>
+      <template v-else>
+        <tr v-for="(item, index) in data" :key="index">
+          <td
+            v-for="key in keys"
+            :key="key"
+            class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
+          >
+            {{ item[key] }}
+          </td>
+          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+            <Button size="xs" variant="ghost" @click.prevent="deleteItem(item)">
+              <Trash2 class="h-4 w-4" />
+            </Button>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
 </template>
 
 <script setup>
@@ -29,26 +49,26 @@ import { defineProps, defineEmits } from 'vue'
 import { Button } from '@/components/ui/button'
 
 defineProps({
-    headers: {
-        type: Array,
-        required: true,
-        default: () => []
-    },
-    keys: {
-        type: Array,
-        required: true,
-        default: () => []
-    },
-    data: {
-        type: Array,
-        required: true,
-        default: () => []
-    }
-});
+  headers: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  keys: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  data: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+})
 
 const emit = defineEmits(['deleteItem'])
 
 function deleteItem(item) {
-    emit('deleteItem', item)
+  emit('deleteItem', item)
 }
-</script>
\ No newline at end of file
+</script>