refactor: modified components to suit the changes in the table component

packages/hoppscotch-sh-admin/src/pages/teams/index.vue

@@ -31,8 +31,7 @@
           <HoppSmartTable
             :list="newTeamsList"
             :headings="headings"
-            @openRowContent="goToTeamDetails"
-            :modify-col-names="['action']"
+            @on-row-clicked="goToTeamDetails"
             cell-styles="px-6 py-1"
           >
             <template #action="{ item }">
@@ -154,8 +153,13 @@ const newTeamsList = computed(() => {
   });
 });
 
-// Headers that are used in the table
-const headings = [t('teams.id'), t('teams.name'), t('teams.members'), ''];
+// Table Headings
+const headings = [
+  { key: 'id', label: t('teams.id') },
+  { key: 'name', label: t('teams.name') },
+  { key: 'members', label: t('teams.members') },
+  { key: 'action', label: '', preventClick: true },
+];
 
 // Create Team
 const createTeamMutation = useMutation(CreateTeamDocument);

packages/hoppscotch-sh-admin/src/pages/users/index.vue

@@ -36,8 +36,7 @@
             cell-styles="px-6 py-1"
             :list="newUsersList"
             :headings="headings"
-            :modify-col-names="colNames"
-            @openRowContent="goToUserDetails"
+            @on-row-clicked="goToUserDetails"
           >
             <template #name="{ item }">
               <div>
@@ -168,7 +167,7 @@
 
 <script setup lang="ts">
 import { format } from 'date-fns';
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
   InviteNewUserDocument,
@@ -234,18 +233,15 @@ const isUserAdmin = (
   })[0].isAdmin;
 };
 
-// Headers that are used in the table
+// Table Headings
 const headings = [
-  t('users.id'),
-  t('users.name'),
-  t('users.email'),
-  t('users.date'),
-  '',
+  { key: 'uid', label: t('users.id') },
+  { key: 'name', label: t('users.name') },
+  { key: 'email', label: t('users.email') },
+  { key: 'createdOn', label: t('users.date') },
+  { key: 'action', label: '', preventClick: true },
 ];
 
-//Names of the columns to be modified by this component
-const colNames = ['name', 'createdOn', 'action'];
-
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);
 const showInviteUserModal = ref(false);

packages/hoppscotch-sh-admin/src/pages/users/invited.vue

@@ -29,7 +29,6 @@
               cell-styles="px-6 py-1"
               :list="newInvitedUsersList"
               :headings="headings"
-              :modify-col-names="colNames"
             >
               <template #invitedOn="{ item }">
                 <div class="flex flex-col truncate">
@@ -90,13 +89,11 @@ const newInvitedUsersList = computed(() => {
   });
 });
 
-// Headings used in the table
+// Table Headings
 const headings = [
-  t('users.admin_id'),
-  t('users.admin_email'),
-  t('users.invitee_email'),
-  t('users.invited_on'),
+  { key: 'adminUid', label: t('users.admin_id') },
+  { key: 'adminEmail', label: t('users.admin_email') },
+  { key: 'inviteeEmail', label: t('users.invitee_email') },
+  { key: 'invitedOn', label: t('users.invited_on') },
 ];
-
-const colNames = ['invitedOn'];
 </script>

packages/hoppscotch-ui/src/components/smart/Table.vue

@@ -63,7 +63,5 @@ const emit = defineEmits<{
   (event: "onRowClicked", item: Item): void
 }>()
 
-const onRowClicked = (item: Item) => {
-  emit("onRowClicked", item)
-}
+const onRowClicked = (item: Item) => emit("onRowClicked", item)
 </script>