feat(data-table): add skeletonSize prop to customize loading rows

Add optional skeletonSize prop to control the number of skeleton rows displayed during loading. Defaults to 5 if not provided.

app/components/pub/base/data-table/data-table.vue

@@ -4,7 +4,8 @@ import type { Col, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/componen
 import { Info } from 'lucide-vue-next'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
 
-defineProps<{
+const props = defineProps<{
+  skeletonSize?: number
   rows: unknown[]
   cols: Col[]
   header: Th[][]
@@ -14,6 +15,9 @@ defineProps<{
   funcComponent: RecStrFuncComponent
 }>()
 
+const getSkeletonSize = computed(() => {
+  return props.skeletonSize || 5
+})
 const loader = inject('table_data_loader') as DataTableLoader
 
 function handleActionCellClick(event: Event, _cellRef: string) {
@@ -47,7 +51,7 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
 
     <TableBody v-if="loader.isTableLoading">
       <!-- Loading state with 5 skeleton rows -->
-      <TableRow v-for="n in 5" :key="`skeleton-${n}`">
+      <TableRow v-for="n in getSkeletonSize" :key="`skeleton-${n}`">
         <TableCell v-for="(key, cellIndex) in keys" :key="`cell-skel-${n}-${cellIndex}`" class="border">
           <Skeleton class="bg-gray-100 animate-pulse text-muted-foreground w-full h-6" />
         </TableCell>