refactor: introduced variants to table in storybook

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

@@ -106,14 +106,12 @@ const props = defineProps<{
   /** The index of the column that needs to have a badge */
   badgeColName?: string
   /** The subtitles to be displayed for the columns */
-  subtitles?: [
+  subtitles?: Array<{
-    {
+    /** The name of the column that needs to have a subtitle */
-      /** The name of the column that needs to have a subtitle */
+    colName: string
-      colName: string
+    /** The subtitle to be displayed for the column */
-      /** The subtitle to be displayed for the column */
+    subtitle: string | string[]
-      subtitle: string | string[]
+  }>
-    }
-  ]
 }>()
 
 defineEmits<{

packages/hoppscotch-ui/src/stories/Table.story.vue

@@ -1,12 +1,30 @@
 <template>
   <Story title="Table">
-    <Variant title="Single">
+    <Variant title="Basic">
       <HoppSmartTable
         cell-styles="px-6 py-2"
         :list="list"
         :headings="headings"
       />
     </Variant>
+    <Variant title="Badges">
+      <HoppSmartTable
+        cell-styles="px-6 py-2"
+        :list="list"
+        :headings="headings"
+        badge-col-name="name"
+        badge-name="Admin"
+        :badge-row-indices="[0, 1]"
+      />
+    </Variant>
+    <Variant title="Subtitles">
+      <HoppSmartTable
+        cell-styles="px-6 py-2"
+        :list="list"
+        :headings="headings"
+        :subtitles="subtitles"
+      />
+    </Variant>
   </Story>
 </template>
 
@@ -29,4 +47,11 @@ const list = [
     role: "Frontend Engineer",
   },
 ]
+
+const subtitles = [
+  {
+    colName: "role",
+    subtitle: "FE",
+  },
+]
 </script>