From a3905dd9b9db6bc47e52f7c1d784923730c7d3ad Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Wed, 3 Sep 2025 15:34:11 +0700
Subject: [PATCH] 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 | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/pub/base/data-table/data-table.vue b/app/components/pub/base/data-table/data-table.vue
index 6f6fdb69..eb59b9b9 100644
--- a/app/components/pub/base/data-table/data-table.vue
+++ b/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>