From 8168ede251386e50a30efefad5e95831e5df5c25 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 30 Jul 2025 14:26:36 +0700
Subject: [PATCH] SkeketonTable

---
 src/components/SkeletonTable.vue | 36 ++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/SkeletonTable.vue

diff --git a/src/components/SkeletonTable.vue b/src/components/SkeletonTable.vue
new file mode 100644
index 0000000..652d9f4
--- /dev/null
+++ b/src/components/SkeletonTable.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+
+const columns = defineModel<QTableProps["columns"]>("columns", {
+  required: true,
+});
+
+/** จำนวนคอลัมน์ */
+const skeletonColumns = computed(() => columns.value?.length || 5);
+
+/** ตัวอย่างการใช้งาน */
+/// <SkeletonTable v-if="isLoading" :columns="columns" />
+</script>
+
+<template>
+  <q-markup-table flat bordered>
+    <thead>
+      <tr>
+        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
+          <q-skeleton type="text" />
+        </th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
+        <td v-for="(col, idx) in skeletonColumns" :key="idx">
+          <q-skeleton type="text" width="80px" />
+        </td>
+      </tr>
+    </tbody>
+  </q-markup-table>
+</template>