From cdbc580adab553bc8fc44e55b4d2d4302f4839a0 Mon Sep 17 00:00:00 2001
From: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com>
Date: Thu, 22 Jun 2023 09:37:51 +0300
Subject: [PATCH] feat: introducing smart table to hopp ui

---
 .../hoppscotch-sh-admin/src/components.d.ts   |   3 +-
 .../src/components/teams/Table.vue            |   2 +-
 .../src/components/users/Table.vue            | 247 +++++++++---------
 .../src/components/users/Tables.vue           | 117 +++++++++
 .../src/pages/teams/index.vue                 |  69 ++++-
 .../src/pages/users/index.vue                 | 108 +++++++-
 .../src/components/smart/Table.vue            | 108 ++++++++
 .../src/components/smart/index.ts             |   1 +
 8 files changed, 506 insertions(+), 149 deletions(-)
 create mode 100644 packages/hoppscotch-sh-admin/src/components/users/Tables.vue
 create mode 100644 packages/hoppscotch-ui/src/components/smart/Table.vue

diff --git a/packages/hoppscotch-sh-admin/src/components.d.ts b/packages/hoppscotch-sh-admin/src/components.d.ts
index 0ad19898b..cdd81e0f8 100644
--- a/packages/hoppscotch-sh-admin/src/components.d.ts
+++ b/packages/hoppscotch-sh-admin/src/components.d.ts
@@ -19,12 +19,12 @@ declare module '@vue/runtime-core' {
     HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
     HoppSmartAutoComplete: typeof import('@hoppscotch/ui')['HoppSmartAutoComplete'];
     HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
-    HoppSmartInput: typeof import('@hoppscotch/ui')['HoppSmartInput'];
     HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
     HoppSmartModal: typeof import('@hoppscotch/ui')['HoppSmartModal'];
     HoppSmartPicture: typeof import('@hoppscotch/ui')['HoppSmartPicture'];
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner'];
     HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab'];
+    HoppSmartTable: typeof import('@hoppscotch/ui')['HoppSmartTable'];
     IconLucideArrowLeft: typeof import('~icons/lucide/arrow-left')['default'];
     IconLucideChevronDown: typeof import('~icons/lucide/chevron-down')['default'];
     IconLucideHelpCircle: typeof import('~icons/lucide/help-circle')['default'];
@@ -39,5 +39,6 @@ declare module '@vue/runtime-core' {
     Tippy: typeof import('vue-tippy')['Tippy'];
     UsersInviteModal: typeof import('./components/users/InviteModal.vue')['default'];
     UsersTable: typeof import('./components/users/Table.vue')['default'];
+    UsersTables: typeof import('./components/users/Tables.vue')['default'];
   }
 }
diff --git a/packages/hoppscotch-sh-admin/src/components/teams/Table.vue b/packages/hoppscotch-sh-admin/src/components/teams/Table.vue
index 421c79137..ba86c71eb 100644
--- a/packages/hoppscotch-sh-admin/src/components/teams/Table.vue
+++ b/packages/hoppscotch-sh-admin/src/components/teams/Table.vue
@@ -63,7 +63,7 @@
                   <HoppSmartItem
                     :icon="IconTrash"
                     :label="'Delete Team'"
-                    class="!hover:bg-red-600 w-full"
+                    class="w-full"
                     @click="
                       () => {
                         $emit('delete-team', team.id);
diff --git a/packages/hoppscotch-sh-admin/src/components/users/Table.vue b/packages/hoppscotch-sh-admin/src/components/users/Table.vue
index 67cd2d6cb..4f51d6886 100644
--- a/packages/hoppscotch-sh-admin/src/components/users/Table.vue
+++ b/packages/hoppscotch-sh-admin/src/components/users/Table.vue
@@ -1,132 +1,138 @@
 <template>
-  <table class="w-full">
-    <thead>
-      <tr class="text-secondary border-b border-dividerDark text-sm text-left">
-        <th class="px-3 pb-3">{{ t('users.id') }}</th>
-        <th class="px-3 pb-3">{{ t('users.name') }}</th>
-        <th class="px-3 pb-3">{{ t('users.email') }}</th>
-        <th class="px-3 pb-3">{{ t('users.date') }}</th>
-        <th class="px-3 pb-3"></th>
-      </tr>
-    </thead>
-
-    <tbody class="divide-y divide-divider">
-      <tr
-        v-for="user in usersList"
-        :key="user.uid"
-        class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
-      >
-        <td
-          @click="$emit('goToUserDetails', user.uid)"
-          class="py-2 px-3 max-w-30"
+  <div
+    class="overflow-hidden rounded-md border border-dividerDark shadow-md m-5"
+  >
+    <table class="w-full">
+      <thead>
+        <tr
+          class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
         >
-          <div class="flex">
-            <span class="truncate">
-              {{ user.uid }}
-            </span>
-          </div>
-        </td>
+          <th class="px-6 py-3">{{ t('users.id') }}</th>
+          <th class="px-6 py-3">{{ t('users.name') }}</th>
+          <th class="px-6 py-3">{{ t('users.email') }}</th>
+          <th class="px-6 py-3">{{ t('users.date') }}</th>
+          <th class="px-6 py-3"></th>
+        </tr>
+      </thead>
 
-        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-          <div v-if="user.displayName" class="flex items-center space-x-3">
+      <tbody class="divide-y divide-divider">
+        <tr
+          v-for="user in usersList"
+          :key="user.uid"
+          class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+        >
+          <td
+            @click="$emit('goToUserDetails', user.uid)"
+            class="py-1 px-3 max-w-40"
+          >
+            <div class="flex">
+              <span class="truncate">
+                {{ user.uid }}
+              </span>
+            </div>
+          </td>
+
+          <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+            <div v-if="user.displayName" class="flex items-center space-x-3">
+              <span>
+                {{ user.displayName }}
+              </span>
+              <span
+                v-if="user.isAdmin"
+                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+              >
+                {{ t('users.admin') }}
+              </span>
+            </div>
+            <div v-else class="flex items-center space-x-3">
+              <span> {{ t('users.unnamed') }} </span>
+              <span
+                v-if="user.isAdmin"
+                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+              >
+                {{ t('users.admin') }}
+              </span>
+            </div>
+          </td>
+
+          <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
             <span>
-              {{ user.displayName }}
+              {{ user.email }}
             </span>
-            <span
-              v-if="user.isAdmin"
-              class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-            >
-              {{ t('users.admin') }}
-            </span>
-          </div>
-          <div v-else class="flex items-center space-x-3">
-            <span> {{ t('users.unnamed') }} </span>
-            <span
-              v-if="user.isAdmin"
-              class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
-            >
-              {{ t('users.admin') }}
-            </span>
-          </div>
-        </td>
+          </td>
 
-        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-          <span>
-            {{ user.email }}
-          </span>
-        </td>
-
-        <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
-          <div class="flex items-center">
-            <div class="flex flex-col">
-              {{ getCreatedDate(user.createdOn) }}
-              <div class="text-gray-400 text-tiny">
-                {{ getCreatedTime(user.createdOn) }}
+          <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+            <div class="flex items-center">
+              <div class="flex flex-col">
+                {{ getCreatedDate(user.createdOn) }}
+                <div class="text-gray-400 text-tiny">
+                  {{ getCreatedTime(user.createdOn) }}
+                </div>
               </div>
             </div>
-          </div>
-        </td>
+          </td>
 
-        <td>
-          <div class="relative">
-            <span>
-              <tippy interactive trigger="click" theme="popover">
-                <HoppButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :icon="IconMoreHorizontal"
-                />
-                <template #content="{ hide }">
-                  <div
-                    ref="tippyActions"
-                    class="flex flex-col focus:outline-none"
-                    tabindex="0"
-                    @keyup.escape="hide()"
-                  >
-                    <HoppSmartItem
-                      v-if="!user.isAdmin"
-                      :icon="IconUserCheck"
-                      :label="'Make Admin'"
-                      class="!hover:bg-emerald-600"
-                      @click="
-                        () => {
-                          $emit('makeUserAdmin', user.uid);
-                          hide();
-                        }
-                      "
-                    />
-                    <HoppSmartItem
-                      v-else
-                      :icon="IconUserMinus"
-                      :label="'Remove Admin Status'"
-                      class="!hover:bg-emerald-600"
-                      @click="
-                        () => {
-                          $emit('makeAdminToUser', user.uid);
-                          hide();
-                        }
-                      "
-                    />
-                    <HoppSmartItem
-                      v-if="!user.isAdmin"
-                      :icon="IconTrash"
-                      :label="'Delete User'"
-                      class="!hover:bg-red-600"
-                      @click="
-                        () => {
-                          $emit('deleteUser', user.uid);
-                          hide();
-                        }
-                      "
-                    />
-                  </div>
-                </template>
-              </tippy>
-            </span>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
+          <td>
+            <div class="relative">
+              <span>
+                <tippy interactive trigger="click" theme="popover">
+                  <HoppButtonSecondary
+                    v-tippy="{ theme: 'tooltip' }"
+                    :icon="IconMoreHorizontal"
+                  />
+                  <template #content="{ hide }">
+                    <div
+                      ref="tippyActions"
+                      class="flex flex-col focus:outline-none"
+                      tabindex="0"
+                      @keyup.escape="hide()"
+                    >
+                      <HoppSmartItem
+                        v-if="!user.isAdmin"
+                        :icon="IconUserCheck"
+                        :label="'Make Admin'"
+                        class="!hover:bg-emerald-600"
+                        @click="
+                          () => {
+                            $emit('makeUserAdmin', user.uid);
+                            hide();
+                          }
+                        "
+                      />
+                      <HoppSmartItem
+                        v-else
+                        :icon="IconUserMinus"
+                        :label="'Remove Admin Status'"
+                        class="!hover:bg-emerald-600"
+                        @click="
+                          () => {
+                            $emit('makeAdminToUser', user.uid);
+                            hide();
+                          }
+                        "
+                      />
+                      <HoppSmartItem
+                        v-if="!user.isAdmin"
+                        :icon="IconTrash"
+                        :label="'Delete User'"
+                        class="!hover:bg-red-600"
+                        @click="
+                          () => {
+                            $emit('deleteUser', user.uid);
+                            hide();
+                          }
+                        "
+                      />
+                    </div>
+                  </template>
+                </tippy>
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -141,7 +147,6 @@ import { TippyComponent } from 'vue-tippy';
 import { useI18n } from '~/composables/i18n';
 
 const t = useI18n();
-
 defineProps<{
   usersList: UsersListQuery['admin']['allUsers'];
 }>();
diff --git a/packages/hoppscotch-sh-admin/src/components/users/Tables.vue b/packages/hoppscotch-sh-admin/src/components/users/Tables.vue
new file mode 100644
index 000000000..b1c823bbd
--- /dev/null
+++ b/packages/hoppscotch-sh-admin/src/components/users/Tables.vue
@@ -0,0 +1,117 @@
+<template>
+  <div
+    class="overflow-hidden rounded-md border border-dividerDark shadow-md m-5"
+  >
+    <table class="w-full">
+      <thead>
+        <tr
+          class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
+        >
+          <th v-for="title in headings" scope="col" class="px-6 py-3">
+            {{ title }}
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="divide-y divide-divider">
+        <tr
+          v-for="item in list"
+          :key="item.id"
+          class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+          :class="xBorder ? 'divide-x divide-divider' : ''"
+        >
+          <td
+            v-for="data in item"
+            @click="$emit('goToDetails', item)"
+            class="max-w-40"
+            :class="padding"
+          >
+            <div class="flex">
+              <span class="truncate">
+                {{ data }}
+              </span>
+            </div>
+          </td>
+
+          <!-- <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+            <div v-if="user.displayName" class="flex items-center space-x-3">
+              <span>
+                {{ user.displayName }}
+              </span>
+              <span
+                v-if="user.isAdmin"
+                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+              >
+                Admin
+              </span>
+            </div>
+            <div v-else class="flex items-center space-x-3">
+              <span> (Unnamed user) </span>
+              <span
+                v-if="user.isAdmin"
+                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+              >
+                Admin
+              </span>
+            </div>
+          </td> -->
+
+          <slot name="action" :team="item"></slot>
+          <!-- <td>
+            <div class="relative">
+              <tippy interactive trigger="click" theme="popover">
+                <HoppButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :icon="IconMoreHorizontal"
+                />
+                <template #content="{ hide }">
+                  <div
+                    ref="tippyActions"
+                    class="flex flex-col focus:outline-none"
+                    tabindex="0"
+                    @keyup.escape="hide()"
+                  >
+                    <HoppSmartItem
+                      :icon="IconTrash"
+                      :label="'Delete Team'"
+                      class="!hover:bg-red-600 w-full"
+                      :class="itemStyle"
+                      @click="$emit('id', item)"
+                    />
+                  </div>
+                </template>
+              </tippy>
+            </div>
+          </td> -->
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IconTrash from '~icons/lucide/trash';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
+
+const props = defineProps<{
+  xBorder: Boolean;
+  list: [];
+  headings: [];
+  padding: string;
+  itemStyle: string;
+}>();
+
+defineEmits<{
+  (event: 'goToDetails', uid: string): void;
+  (event: 'id', uid: string): void;
+  (event: 'makeUserAdmin', uid: string): void;
+  (event: 'makeAdminToUser', uid: string): void;
+  (event: 'deleteUser', uid: string): void;
+}>();
+</script>
+
+<style scoped>
+.tippy-box[data-theme~='popover'] .tippy-content {
+  padding: 0;
+}
+</style>
diff --git a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
index 42bdb9cf5..b5f6e9ab1 100644
--- a/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/teams/index.vue
@@ -21,13 +21,42 @@
 
         <div v-else-if="error">{{ t('teams.load_list_error') }}</div>
 
-        <TeamsTable
+        <HoppSmartTable
           v-else
-          :teamList="teamList"
-          @goToTeamDetails="goToTeamDetails"
-          @deleteTeam="deleteTeam"
-          class=""
-        />
+          :list="teamList"
+          :headings="headings"
+          @goToDetails="goToTeamDetails"
+          padding="px-6 py-3"
+          item-style="!hover:bg-red-600"
+        >
+          <template #action="{ item }">
+            <td>
+              <div class="relative">
+                <tippy interactive trigger="click" theme="popover">
+                  <HoppButtonSecondary
+                    v-tippy="{ theme: 'tooltip' }"
+                    :icon="IconMoreHorizontal"
+                  />
+                  <template #content="{ hide }">
+                    <div
+                      ref="tippyActions"
+                      class="flex flex-col focus:outline-none"
+                      tabindex="0"
+                      @keyup.escape="hide()"
+                    >
+                      <HoppSmartItem
+                        :icon="IconTrash"
+                        :label="'Delete Team'"
+                        class="!hover:bg-red-600 w-full"
+                        @click="deleteTeam(item)"
+                      />
+                    </div>
+                  </template>
+                </tippy>
+              </div>
+            </td>
+          </template>
+        </HoppSmartTable>
 
         <div
           v-if="hasNextPage && teamList.length >= teamsPerPage"
@@ -66,10 +95,12 @@ import {
   UsersListDocument,
 } from '../../helpers/backend/graphql';
 import { usePagedQuery } from '~/composables/usePagedQuery';
-import { ref, watch, computed } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useMutation, useQuery } from '@urql/vue';
 import { useToast } from '~/composables/toast';
 import IconAddUsers from '~icons/lucide/plus';
+import IconTrash from '~icons/lucide/trash';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 import { useI18n } from '~/composables/i18n';
 
 const t = useI18n();
@@ -96,7 +127,7 @@ const {
   error,
   goToNextPage: fetchNextTeams,
   refetch,
-  list: teamList,
+  list: list,
   hasNextPage,
 } = usePagedQuery(
   TeamListDocument,
@@ -106,6 +137,18 @@ const {
   { cursor: undefined, take: teamsPerPage }
 );
 
+const teamList = computed(() => {
+  return list.value.map((team) => {
+    return {
+      id: team.id || '',
+      name: team.name || '',
+      members: team.members.length,
+    };
+  });
+});
+
+const headings = ['Team ID', 'Team Name', 'Number of Members'];
+
 // Create Team
 const createTeamMutation = useMutation(CreateTeamDocument);
 const showCreateTeamModal = ref(false);
@@ -143,9 +186,7 @@ const createTeam = async (newTeamName: string, ownerEmail: string) => {
 
 // Go To Individual Team Details Page
 const router = useRouter();
-const goToTeamDetails = (teamId: string) => {
-  router.push('/teams/' + teamId);
-};
+const goToTeamDetails = (team: any) => router.push('/teams/' + team.id);
 
 // Reload Teams Page when routed back to the teams page
 const route = useRoute();
@@ -159,9 +200,9 @@ const teamDeletion = useMutation(RemoveTeamDocument);
 const confirmDeletion = ref(false);
 const deleteTeamID = ref<string | null>(null);
 
-const deleteTeam = (id: string) => {
+const deleteTeam = (team: any) => {
   confirmDeletion.value = true;
-  deleteTeamID.value = id;
+  deleteTeamID.value = team.id;
 };
 
 const deleteTeamMutation = async (id: string | null) => {
@@ -175,7 +216,7 @@ const deleteTeamMutation = async (id: string | null) => {
     if (result.error) {
       toast.error(`${t('state.delete_team_failure')}`);
     } else {
-      teamList.value = teamList.value.filter((team) => team.id !== id);
+      list.value = list.value.filter((team) => team.id !== id);
       toast.success(`${t('state.delete_team_success')}`);
     }
   });
diff --git a/packages/hoppscotch-sh-admin/src/pages/users/index.vue b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
index 8355fdd3c..f22c52c5e 100644
--- a/packages/hoppscotch-sh-admin/src/pages/users/index.vue
+++ b/packages/hoppscotch-sh-admin/src/pages/users/index.vue
@@ -31,7 +31,7 @@
 
         <div v-else-if="error">{{ t('users.load_list_error') }}</div>
 
-        <UsersTable
+        <!-- <UsersTable
           v-else-if="usersList.length >= 1"
           :usersList="usersList"
           :fetching="fetching"
@@ -40,7 +40,65 @@
           @makeUserAdmin="makeUserAdmin"
           @makeAdminToUser="makeAdminToUser"
           @deleteUser="deleteUser"
-        />
+        /> -->
+
+        <HoppSmartTable
+          v-else-if="usersList.length >= 1"
+          :list="newUsersList"
+          :headings="headings"
+          @goToDetails="goToUserDetails"
+          :subtitle="{
+            index: 'name',
+            label: 'Admin',
+          }"
+          hide-col="isAdmin"
+          padding="px-6 py-3"
+        >
+          <template #action="{ item }">
+            <td>
+              <div class="relative">
+                <span>
+                  <tippy interactive trigger="click" theme="popover">
+                    <HoppButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :icon="IconMoreHorizontal"
+                    />
+                    <template #content="{ hide }">
+                      <div
+                        ref="tippyActions"
+                        class="flex flex-col focus:outline-none"
+                        tabindex="0"
+                        @keyup.escape="hide()"
+                      >
+                        <HoppSmartItem
+                          v-if="!isUserAdmin(item)"
+                          :icon="IconUserCheck"
+                          :label="'Make Admin'"
+                          class="!hover:bg-emerald-600"
+                          @click="makeUserAdmin(item)"
+                        />
+                        <HoppSmartItem
+                          v-else
+                          :icon="IconUserMinus"
+                          :label="'Remove Admin Status'"
+                          class="!hover:bg-emerald-600"
+                          @click="makeAdminToUser(item)"
+                        />
+                        <HoppSmartItem
+                          v-if="!isUserAdmin(item)"
+                          :icon="IconTrash"
+                          :label="'Delete User'"
+                          class="!hover:bg-red-600"
+                          @click="deleteUser(item)"
+                        />
+                      </div>
+                    </template>
+                  </tippy>
+                </span>
+              </div>
+            </td>
+          </template>
+        </HoppSmartTable>
 
         <div v-else class="flex justify-center">{{ t('users.no_users') }}</div>
 
@@ -82,7 +140,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { format } from 'date-fns';
+import { computed, ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
   InviteNewUserDocument,
@@ -96,12 +155,26 @@ import { useRoute, useRouter } from 'vue-router';
 import { useToast } from '~/composables/toast';
 import { HoppButtonSecondary } from '@hoppscotch/ui';
 import IconAddUser from '~icons/lucide/user-plus';
+import IconTrash from '~icons/lucide/trash';
+import IconUserMinus from '~icons/lucide/user-minus';
+import IconUserCheck from '~icons/lucide/user-check';
+import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 import { useI18n } from '~/composables/i18n';
 
+// Get Proper Date Formats
+const getCreatedDate = (date: string) => format(new Date(date), 'dd-MM-yyyy');
+const getCreatedTime = (date: string) => format(new Date(date), 'hh:mm a');
+
 const t = useI18n();
 
 const toast = useToast();
 
+const isUserAdmin = (selectedUser: any) => {
+  return usersList.value.filter((user) => {
+    return user.uid === selectedUser.uid;
+  })[0].isAdmin;
+};
+
 // Get Paginated Results of all the users in the infra
 const usersPerPage = 20;
 const {
@@ -118,6 +191,19 @@ const {
   { cursor: undefined, take: usersPerPage }
 );
 
+const newUsersList = computed(() => {
+  return usersList.value.map((user) => {
+    return {
+      uid: user.uid || '',
+      name: user.displayName || '',
+      email: user.email || '',
+      createdOn: getCreatedDate(user.createdOn) || '',
+    };
+  });
+});
+
+const headings = ['User UID', 'Name', 'Email', 'Created On'];
+
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);
 const showInviteUserModal = ref(false);
@@ -141,9 +227,7 @@ const sendInvite = async (email: string) => {
 // Go to Individual User Details Page
 const route = useRoute();
 const router = useRouter();
-const goToUserDetails = (uid: string) => {
-  router.push('/users/' + uid);
-};
+const goToUserDetails = (user: any) => router.push('/users/' + user.uid);
 
 watch(
   () => route.params.id,
@@ -179,9 +263,9 @@ const userToAdmin = useMutation(MakeUserAdminDocument);
 const confirmUserToAdmin = ref(false);
 const userToAdminUID = ref<string | null>(null);
 
-const makeUserAdmin = (id: string) => {
+const makeUserAdmin = (user: any) => {
   confirmUserToAdmin.value = true;
-  userToAdminUID.value = id;
+  userToAdminUID.value = user.uid;
 };
 
 const makeUserAdminMutation = async (id: string | null) => {
@@ -213,14 +297,14 @@ const adminToUser = useMutation(RemoveUserAsAdminDocument);
 const confirmAdminToUser = ref(false);
 const adminToUserUID = ref<string | null>(null);
 
-const makeAdminToUser = (id: string) => {
+const makeAdminToUser = (user: any) => {
   confirmAdminToUser.value = true;
-  adminToUserUID.value = id;
+  adminToUserUID.value = user.uid;
 };
 
-const deleteUser = (id: string) => {
+const deleteUser = (user: any) => {
   confirmDeletion.value = true;
-  deleteUserUID.value = id;
+  deleteUserUID.value = user.uid;
 };
 
 const makeAdminToUserMutation = async (id: string | null) => {
diff --git a/packages/hoppscotch-ui/src/components/smart/Table.vue b/packages/hoppscotch-ui/src/components/smart/Table.vue
new file mode 100644
index 000000000..9825ba908
--- /dev/null
+++ b/packages/hoppscotch-ui/src/components/smart/Table.vue
@@ -0,0 +1,108 @@
+<template>
+  <div
+    class="overflow-hidden rounded-md border border-dividerDark shadow-md m-5"
+  >
+    <table class="w-full">
+      <thead class="bg-primaryLight">
+        <tr
+          class="text-secondary border-b border-dividerDark text-sm text-left"
+        >
+          <th v-for="title in headings" scope="col" class="px-6 py-3">
+            {{ title }}
+          </th>
+        </tr>
+      </thead>
+
+      <tbody class="divide-y divide-divider">
+        <tr
+          v-for="item in list"
+          :key="item.id"
+          class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
+          :class="xBorder ? 'divide-x divide-divider' : ''"
+        >
+          <td
+            v-for="(data, index) in item"
+            :key="index"
+            @click="$emit('goToDetails', item)"
+            class="max-w-40"
+            :class="padding"
+          >
+            <div class="flex items-center">
+              <div class="flex flex-col">
+                {{ data }}
+                <!-- <div v-if="subdata" class="text-gray-400 text-tiny">
+                  {{ subdata }}
+                </div> -->
+              </div>
+            </div>
+          </td>
+
+          <!-- <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+            <div class="flex items-center">
+              <div class="flex flex-col">
+                {{ getCreatedDate(user.createdOn) }}
+                <div class="text-gray-400 text-tiny">
+                  {{ getCreatedTime(user.createdOn) }}
+                </div>
+              </div>
+            </div>
+          </td> -->
+
+          <!-- <td @click="$emit('goToUserDetails', user.uid)" class="py-2 px-3">
+            <div v-if="user.displayName" class="flex items-center space-x-3">
+              <span>
+                {{ user.displayName }}
+              </span>
+              <span
+                v-if="user.isAdmin"
+                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+              >
+                Admin
+              </span>
+            </div>
+            <div v-else class="flex items-center space-x-3">
+              <span> (Unnamed user) </span>
+              <span
+                v-if="user.isAdmin"
+                class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
+              >
+                Admin
+              </span>
+            </div>
+          </td> -->
+
+          <slot name="action" :item="item"></slot>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  xBorder: Boolean
+  list: []
+  headings: []
+  padding: string
+  itemStyle: string
+  subtitle: {
+    index: string
+    label: string
+  }
+  hideCol: number
+}>()
+
+defineEmits<{
+  (event: "goToDetails", uid: string): void
+  (event: "id", uid: string): void
+  (event: "makeUserAdmin", uid: string): void
+  (event: "makeAdminToUser", uid: string): void
+  (event: "deleteUser", uid: string): void
+}>()
+</script>
+
+<style scoped>
+.tippy-box[data-theme~="popover"] .tippy-content {
+  padding: 0;
+}
+</style>
diff --git a/packages/hoppscotch-ui/src/components/smart/index.ts b/packages/hoppscotch-ui/src/components/smart/index.ts
index 157124566..81d04c985 100644
--- a/packages/hoppscotch-ui/src/components/smart/index.ts
+++ b/packages/hoppscotch-ui/src/components/smart/index.ts
@@ -16,6 +16,7 @@ export { default as HoppSmartSlideOver } from "./SlideOver.vue"
 export { default as HoppSmartSpinner } from "./Spinner.vue"
 export { default as HoppSmartTab } from "./Tab.vue"
 export { default as HoppSmartTabs } from "./Tabs.vue"
+export { default as HoppSmartTable } from "./Table.vue"
 export { default as HoppSmartToggle } from "./Toggle.vue"
 export { default as HoppSmartWindow } from "./Window.vue"
 export { default as HoppSmartWindows } from "./Windows.vue"