feat: added the ability to add subtitles in multiple columns

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

@@ -147,7 +147,7 @@ const teamList = computed(() => {
   });
 });
 
-const headings = ['Team ID', 'Team Name', 'Number of Members'];
+const headings = ['Team ID', 'Team Name', 'Number of Members', ''];
 
 // Create Team
 const createTeamMutation = useMutation(CreateTeamDocument);

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

@@ -51,8 +51,7 @@
           badge-name="Admin"
           :badge-row-index="adminUsers"
           badge-col-name="name"
-          subtitle-col-name="createdOn"
-          :subtitle="createdTime"
+          :subtitle="subtitle"
         >
           <template #action="{ item }">
             <td>
@@ -141,7 +140,7 @@
 
 <script setup lang="ts">
 import { format } from 'date-fns';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { useMutation } from '@urql/vue';
 import {
   InviteNewUserDocument,
@@ -218,6 +217,22 @@ const createdTime = computed(() => {
   });
 });
 
+onMounted(() => {
+  console.log(createdTime);
+
+  console.log(createdTime.value);
+  for (var item in createdTime.value) {
+    console.log(item);
+  }
+});
+
+const subtitle = reactive([
+  {
+    colName: 'createdOn',
+    subtitle: createdTime,
+  },
+]);
+
 // Send Invitation through Email
 const sendInvitation = useMutation(InviteNewUserDocument);
 const showInviteUserModal = ref(false);

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

@@ -46,13 +46,20 @@
               </div>
               <!-- Column with Subtitles -->
               <div
-                v-else-if="colIndex.toString() === subtitleColName"
+                v-else-if="subCol.includes(colIndex.toString())"
                 class="flex flex-col"
               >
-                <div>
-                  {{ data }}
-                  <div class="text-gray-400 text-tiny">
-                    {{ subtitle[rowIndex] }}
+                {{ data }}
+                <div v-for="item in subtitle">
+                  <div
+                    v-if="item.colName === colIndex.toString()"
+                    class="text-gray-400 text-tiny"
+                  >
+                    <span>
+                      <span>
+                        {{ itemSubtitle(item.subtitle, rowIndex) }}
+                      </span>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -68,7 +75,9 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{
+import { computed, onMounted } from "vue"
+
+const props = defineProps<{
   xBorder: Boolean
   list: []
   headings: []
@@ -77,14 +86,30 @@ defineProps<{
   badgeName: string
   badgeRowIndex: (number | undefined)[]
   badgeColName: string
-  subtitleColName: string
-  subtitle: []
+  subtitle: [
+    {
+      colName: string
+      subtitle: string | []
+    }
+  ]
 }>()
 
 defineEmits<{
   (event: "goToDetails", uid: string): void
   (event: "id", uid: string): void
 }>()
+
+const subCol = computed(() =>
+  props.subtitle ? props.subtitle.map((item) => item.colName) : []
+)
+
+onMounted(() => {
+  console.log(props.subtitle)
+  console.log(subCol)
+})
+
+const itemSubtitle = (subtitle: string | string[], rowIndex: number) =>
+  typeof subtitle === "object" ? subtitle[rowIndex] : subtitle
 </script>
 
 <style scoped>