Add numbering option to TableGenerator component

Author: d-s-e

src/components/TableGenerator.vue

@@ -31,6 +31,7 @@ const props = defineProps<{
   data?: T[] | undefined | null;
   loading?: boolean;
   showTotal?: boolean;
+  showNumbering?: boolean;
 }>();
 
 const { data, loading, head } = toRefs(props);
@@ -70,6 +71,9 @@ const innerLoading = computed(() => {
   <TableTable>
     <TableHead>
       <TableRow class="divide-x divide-gray-200">
+        <TableHeader v-if="showNumbering" class="text-right">
+          #
+        </TableHeader>
         <template v-for="item in computedHead" :key="item.name">
           <TableHeader
             :class="{
@@ -94,6 +98,9 @@ const innerLoading = computed(() => {
         :key="index"
         class="divide-x divide-gray-100"
       >
+        <TableData v-if="showNumbering" class="text-right">
+          {{ index + 1 }}
+        </TableData>
         <template v-for="headItem in computedHead" :key="headItem.name">
           <TableData
             :class="{
@@ -117,12 +124,12 @@ const innerLoading = computed(() => {
         </template>
       </TableRow>
       <TableRow v-show="innerLoading">
-        <TableData :colspan="head.length">
+        <TableData :colspan="head.length + (showNumbering ? 1 : 0)">
           <CircleLoader />
         </TableData>
       </TableRow>
       <TableRow v-if="showTotal">
-        <TableData :colspan="head.length - 1" />
+        <TableData :colspan="head.length - 1 + (showNumbering ? 1 : 0)" />
         <TableData class="text-right !py-2.5 md:sticky right-0">
           <span v-if="!innerLoading && data">{{ data.length }} Total</span>
           <span v-else>Loading...</span>