refactor: new slots for table and body

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

@@ -33,7 +33,6 @@
 
         <div v-else-if="usersList.length > 0" class="m-5">
           <HoppSmartTable
-            cell-styles="px-6 py-1"
             :list="newUsersList"
             :headings="headings"
             @on-row-clicked="goToUserDetails"

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

@@ -1,22 +1,21 @@
 <template>
   <div class="overflow-auto rounded-md border border-dividerDark shadow-md">
     <table class="w-full">
-      <thead class="bg-primaryLight">
-        <slot v-if="!headings" name="head" />
+      <thead>
+        <slot name="head">
           <tr
-          v-else
-          class="text-secondary border-b border-dividerDark text-sm text-left"
+            class="text-secondary border-b border-dividerDark text-sm text-left bg-primaryLight"
           >
             <th v-for="th in headings" scope="col" class="px-6 py-3">
               {{ th.label ?? th.key }}
             </th>
           </tr>
+        </slot>
       </thead>
 
       <tbody class="divide-y divide-divider">
-        <slot v-if="!list" name="body" />
+        <slot name="body">
           <tr
-          v-else
             v-for="(rowData, rowIndex) in list"
             :key="rowIndex"
             class="text-secondaryDark hover:bg-divider hover:cursor-pointer rounded-xl"
@@ -26,8 +25,7 @@
               v-for="cellHeading in headings"
               :key="cellHeading.key"
               @click="!cellHeading.preventClick && onRowClicked(rowData)"
-            class="max-w-40"
-            :class="cellStyles"
+              class="max-w-40 px-6 py-1"
             >
               <!-- Dynamic column slot -->
               <slot :name="cellHeading.key" :item="rowData">
@@ -40,6 +38,7 @@
               </slot>
             </td>
           </tr>
+        </slot>
       </tbody>
     </table>
   </div>
@@ -59,8 +58,6 @@ defineProps<{
   list: Item[]
   /** The headings of the table */
   headings: CellHeading[]
-  /** The styles to be applied to the table cells */
-  cellStyles?: string
 }>()
 
 const emit = defineEmits<{