From e1065baeffd1340869a864f24256380eb2a83e3b Mon Sep 17 00:00:00 2001
From: Raziyeh Soradi Moghaddam <rsoradimoghaddam@gmail.com>
Date: Mon, 18 Nov 2024 17:12:29 +0330
Subject: [PATCH] feat(VTable): make it responsive

---
 src/components/data-table/VTable.vue       |  9 +++++-
 src/components/data-table/VTableBody.vue   | 34 +++++++++++++++++++++-
 src/components/data-table/VTableServer.vue | 12 ++++++--
 3 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/components/data-table/VTable.vue b/src/components/data-table/VTable.vue
index 8edfeba..5e9a350 100644
--- a/src/components/data-table/VTable.vue
+++ b/src/components/data-table/VTable.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="border border-2 rounded-2 overflow-hidden position-relative bg-body">
         <table class="table mb-0">
-            <VTableHeader :columns="columns"/>
+            <VTableHeader :columns="columns" :class="{ 'd-none': isMobile }"/>
             <VTableBody
                 :columns="columns"
                 :row-slot="rowSlot"
@@ -27,6 +27,9 @@
 <script>
     import { computed } from 'vue';
 
+    // Utils
+    import Breakpoints from '@/utils/breakpoints';
+
     // Components
     import VTableHeader from '@/components/data-table/VTableHeader.vue';
     import VTableBody from '@/components/data-table/VTableBody.vue';
@@ -66,6 +69,8 @@
         emits: ['update:page', 'update:itemsPerPage'],
 
         setup(props, context) {
+            const isMobile = Breakpoints.down(Breakpoints.SM);
+
             const rowSlot = computed(() => context.slots.row);
             const columns = computed(() => context.slots.default());
 
@@ -83,6 +88,8 @@
                 rowSlot,
                 columns,
 
+                isMobile,
+
                 pageRef,
                 itemsPerPageRef,
 
diff --git a/src/components/data-table/VTableBody.vue b/src/components/data-table/VTableBody.vue
index d8bf4f9..75b0d5a 100644
--- a/src/components/data-table/VTableBody.vue
+++ b/src/components/data-table/VTableBody.vue
@@ -16,6 +16,7 @@
                 :columns="renderColumns(item, rowIndex)"
                 :item="item"
                 :rowIndex="rowIndex"
+                :class="{ 'border-bottom': isMobile }"
             />
         </template>
 
@@ -23,6 +24,7 @@
             <tr
                 v-for="(item, rowIndex) of items"
                 :key="rowIndex"
+                :class="{ 'border-bottom': isMobile }"
             >
                 <component
                     :is="column"
@@ -39,6 +41,7 @@
 
     // Utils
     import { hasVNodeSlot } from '@/utils/vue';
+    import Breakpoints from '@/utils/breakpoints';
 
     export default {
         name: 'VTableBody',
@@ -62,10 +65,12 @@
         },
 
         setup(props) {
+            const isMobile = Breakpoints.down(Breakpoints.SM);
 
             function renderColumns(item, rowIndex) {
                 return props.columns.map(function (column) {
                     let content;
+                    let title;
 
                     if (hasVNodeSlot(column, 'body')) {
                         content = h(column.children.body, { field: column.props.field, item, rowIndex });
@@ -73,6 +78,31 @@
                         content = resolveField(column, item);
                     }
 
+                    if (hasVNodeSlot(column, 'header') && isMobile) {
+                        title = h(column.children.header, { field: column.props.field, item, rowIndex });
+                    } else if (isMobile){
+                        title = column.props.header;
+                    }
+
+                    if (isMobile) {
+                        return h(
+                            "td",
+                            { class: "d-flex justify-content-between align-items-center border-bottom-0" },
+                            [
+                                h(
+                                "div",
+                                { class: "fs-3 bg-transparent fw-medium" },
+                                title
+                                ),
+                                h(
+                                "div",
+                                { class: "fs-3 bg-transparent" },
+                                content
+                                )
+                            ]
+                        );
+                    }
+
                     return h(
                         "td",
                         { class: "bg-transparent" },
@@ -94,7 +124,9 @@
             }
 
             return {
-                renderColumns
+                renderColumns,
+
+                isMobile
             };
         }
     };
diff --git a/src/components/data-table/VTableServer.vue b/src/components/data-table/VTableServer.vue
index 5e6b004..65ddb7f 100644
--- a/src/components/data-table/VTableServer.vue
+++ b/src/components/data-table/VTableServer.vue
@@ -1,7 +1,8 @@
 <template>
     <div class="border border-2 rounded-2 overflow-hidden position-relative bg-body">
         <table class="table mb-0">
-            <VTableHeader :columns="columns"/>
+            <VTableHeader :columns="columns" :class="{ 'd-none': isMobile }"/>
+
             <VTableBody
                 :columns="columns"
                 :row-slot="rowSlot"
@@ -29,6 +30,9 @@
 <script>
     import { computed } from 'vue';
 
+    // Utils
+    import Breakpoints from '@/utils/breakpoints';
+
     // Components
     import VTableHeader from '@/components/data-table/VTableHeader.vue';
     import VTableBody from '@/components/data-table/VTableBody.vue';
@@ -69,6 +73,8 @@
         emits: ['update:page', 'update:itemsPerPage'],
 
         setup(props, context) {
+            const isMobile = Breakpoints.down(Breakpoints.SM);
+
             const rowSlot = computed(() => context.slots.row);
             const columns = computed(() => context.slots.default());
 
@@ -85,7 +91,9 @@
                 updateItemsPerPage,
 
                 columns,
-                rowSlot
+                rowSlot,
+
+                isMobile
             };
         }
     };