From 4deede6a51be76a41da14a5a83b80b743c9d3747 Mon Sep 17 00:00:00 2001
From: michelelotito <m.lotito93@gmail.com>
Date: Wed, 16 Nov 2022 12:37:09 +0100
Subject: [PATCH 1/2] added responsive

---
 src/components/TVTable.vue | 209 +++++++++++++++++++------------------
 1 file changed, 106 insertions(+), 103 deletions(-)

diff --git a/src/components/TVTable.vue b/src/components/TVTable.vue
index a3da7f6..e48bd37 100644
--- a/src/components/TVTable.vue
+++ b/src/components/TVTable.vue
@@ -3,114 +3,117 @@
         <span>Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items</span>
     </div>
     
-    <table ref="TVTABLE" class="min-w-full">
-        <thead class="bg-gray-300 text-xs border divide-x divide-y">
-            <slot v-if="slots['header-row']" name="header-row" />
-            <tr class="divide-x divide-y">
-                <th 
-                    v-if="enableCheck" 
-                    class="px-2 py-1.5" 
-                    style="width: 30px" 
-                />
-
-                <th
-                    v-for="field in fields"
-                    :key="field.label"
-                    class="px-2 py-1.5 font-medium uppercase"
-                    :class="field.thClass"
-                    :style="field.thStyle"
-                >
-                    <div class="flex justify-between items-center">
-                        <span>
-                            {{ field.label }}
-                        </span>
-                        <div v-if="field.sortable" class="ml-2">
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                :stroke-width="sortable[field.key] === 'asc' ? 4 : 2"
-                                stroke="currentColor"
-                                class="w-2.5 h-2.5 cursor-pointer"
-                                @click="updateSortable(field.key, 'asc')"
-                            >
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
-                            </svg>
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                :stroke-width="sortable[field.key] === 'desc' ? 4 : 2"
-                                stroke="currentColor"
-                                class="w-2.5 h-2.5 cursor-pointer"
-                                @click="updateSortable(field.key, 'desc')"
-                            >
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-                            </svg>
-                        </div>
-                    </div>
-                </th>
-            </tr>
-        </thead>
-        <tbody class="border">
-            <tr v-if="busy">
-                    <td :colspan="enableCheck ? fields.length + 1 : fields.length">
-                        <div class="flex justify-center mb-3 mt-3">
-                            <slot name="busy">
-                                <svg class="animate-spin -ml-1 mr-3 h-6 w-6 text-black" :class="spinnerClass" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+    
+    <div class="overflow-x-auto ">
+        <table ref="TVTABLE" class="min-w-full">
+            <thead class="bg-gray-300 text-xs border divide-x divide-y">
+                <slot v-if="slots['header-row']" name="header-row" />
+                <tr class="divide-x divide-y">
+                    <th 
+                        v-if="enableCheck" 
+                        class="px-2 py-1.5" 
+                        style="width: 30px" 
+                    />
+
+                    <th
+                        v-for="field in fields"
+                        :key="field.label"
+                        class="px-2 py-1.5 font-medium uppercase"
+                        :class="field.thClass"
+                        :style="field.thStyle"
+                    >
+                        <div class="flex justify-between items-center">
+                            <span>
+                                {{ field.label }}
+                            </span>
+                            <div v-if="field.sortable" class="ml-2">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    :stroke-width="sortable[field.key] === 'asc' ? 4 : 2"
+                                    stroke="currentColor"
+                                    class="w-2.5 h-2.5 cursor-pointer"
+                                    @click="updateSortable(field.key, 'asc')"
+                                >
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" />
                                 </svg>
-                            </slot>
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    :stroke-width="sortable[field.key] === 'desc' ? 4 : 2"
+                                    stroke="currentColor"
+                                    class="w-2.5 h-2.5 cursor-pointer"
+                                    @click="updateSortable(field.key, 'desc')"
+                                >
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+                                </svg>
+                            </div>
                         </div>
-                    </td>
+                    </th>
                 </tr>
-            <template v-for="(item, index) in items" v-else :key="item.id">
-                <tr 
-                    :id="`TVTABLE_row_${index}_${item.id}`"  
-                    class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left border hover:bg-gray-400/50"
-                    :class="`${index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'}`"
-                    @click="rowClicked(item)"
-                >
-                    <td
-                        v-if="enableCheck"
-                        :key="`check_${item.label}`"
-                        :class="`px-2 py-1.5 align-top table-cell last:border-b-0 ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
-                    >
-                        <input id="checkbox" v-model="selectedRows" :value="item" type="checkbox" @click.stop="emit('checkRow', item)" />
-                    </td>
-
-                    <td
-                        v-for="field in fields"
-                        :key="field.key"
-                        class="px-2 py-1.5 align-top table-cell last:border-b-0"
-                        :class="`${field.tdClass ?? ''} ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
-                        :style="field.tdStyle"
+            </thead>
+            <tbody class="border">
+                <tr v-if="busy">
+                        <td :colspan="enableCheck ? fields.length + 1 : fields.length">
+                            <div class="flex justify-center mb-3 mt-3">
+                                <slot name="busy">
+                                    <svg class="animate-spin -ml-1 mr-3 h-6 w-6 text-black" :class="spinnerClass" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                </slot>
+                            </div>
+                        </td>
+                    </tr>
+                <template v-for="(item, index) in items" v-else :key="item.id">
+                    <tr 
+                        :id="`TVTABLE_row_${index}_${item.id}`"  
+                        class="divide-x divide-y last:border-b-0 px-2 py-1.5 text-left border hover:bg-gray-400/50"
+                        :class="`${index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'}`"
+                        @click="rowClicked(item)"
                     >
-                        <slot 
-                            :name="`cell:${field.key || field.label}`"
-                            :item="item" 
-                            :data="getField(item, field.key)"
-                            :toggle-details="toggleDetails"
+                        <td
+                            v-if="enableCheck"
+                            :key="`check_${item.label}`"
+                            :class="`px-2 py-1.5 align-top table-cell last:border-b-0 ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
                         >
-                            {{ getField(item, field.key, '') }}
-                        </slot>
-                    </td>
-                </tr>
-                <tr 
-                    v-if="item._showDetails" 
-                    :class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
-                >
-                    <td :colspan="enableCheck ? fields.length + 1 : fields.length">
-                        <slot name="row-details" :item="item" />
-                    </td>
-                </tr>
-            </template>
-        </tbody>
-        <tfoot class="bg-gray-300 border divide-x divide-y">
-            <slot v-if="slots['footer-row']" name="footer-row" />
-        </tfoot>
-    </table>
+                            <input id="checkbox" v-model="selectedRows" :value="item" type="checkbox" @click.stop="emit('checkRow', item)" />
+                        </td>
+
+                        <td
+                            v-for="field in fields"
+                            :key="field.key"
+                            class="px-2 py-1.5 align-top table-cell last:border-b-0"
+                            :class="`${field.tdClass ?? ''} ${checkSelectedForRow(item) ? rowSelectClass || 'bg-gray-400/50' : ''}`"
+                            :style="field.tdStyle"
+                        >
+                            <slot 
+                                :name="`cell:${field.key || field.label}`"
+                                :item="item" 
+                                :data="getField(item, field.key)"
+                                :toggle-details="toggleDetails"
+                            >
+                                {{ getField(item, field.key, '') }}
+                            </slot>
+                        </td>
+                    </tr>
+                    <tr 
+                        v-if="item._showDetails" 
+                        :class="index % 2 ? 'bg-gray-300/50' : 'bg-gray-100/50'"
+                    >
+                        <td :colspan="enableCheck ? fields.length + 1 : fields.length">
+                            <slot name="row-details" :item="item" />
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+            <tfoot class="bg-gray-300 border divide-x divide-y">
+                <slot v-if="slots['footer-row']" name="footer-row" />
+            </tfoot>
+        </table>
+    </div>
 
     <TVPagination
         v-if="localTotalRows > perPage && !hidePagination"

From d2644cdcef016bda6d997cc3743d958cd1ab96f0 Mon Sep 17 00:00:00 2001
From: michelelotito <m.lotito93@gmail.com>
Date: Wed, 16 Nov 2022 14:51:04 +0100
Subject: [PATCH 2/2] added overflow-hidden for responsive table v0.2.2

---
 dev/App.vue                |  8 ++------
 dev/TableShow.vue          | 19 ++++++++++++++++++-
 package.json               |  2 +-
 src/components/TVTable.vue |  9 +++++----
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/dev/App.vue b/dev/App.vue
index 9f7a388..427fcca 100644
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -1,17 +1,13 @@
 <template>
-  <div class="pb-36">
-    <div class="flex max-w-2xl mx-auto mb-10 space-x-4 sm:mt-10">
-      <div class="flex flex-col flex-grow">
+    <div class="py-8 px-8">
         <div class="font-semibold mb-2">
-            Tailwind Vue DataTable v0.2.1
+            Tailwind Vue DataTable v0.2.2
             <span class="text-xs font-light">by BitTheCat</span>
         </div>
         <div>
             <router-view />
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script>
diff --git a/dev/TableShow.vue b/dev/TableShow.vue
index ed9dd68..06cc0f3 100644
--- a/dev/TableShow.vue
+++ b/dev/TableShow.vue
@@ -2,6 +2,7 @@
     <div>
         <div class="mb-3">
             <span class="text-xs"> Simple </span> 
+
             <TVTable
                 ref="tvtTableSimple"
                 :items="cloneItems"
@@ -10,7 +11,23 @@
                 :spinner-class="'text-red-500'"
                 @check-row="checkRow"
                 @row-clicked="checkRow"
-            />
+            >
+                <template #header-row>
+                    <tr>
+                        <td colspan="2" />
+                        <td colspan="1">Header1</td>
+                    </tr>
+                </template>
+
+
+                <template #footer-row>
+                    <tr>
+                        <td colspan="1" />
+                        <td colspan="1" />
+                        <td colspan="1">Footer</td>
+                    </tr>
+                </template>
+            </TVTable>
 
             <input class="border mt-2 p-1 rounded bg-gray-300 text-sm" type="button" :value="`Test busy: ${busy ? 'on' : 'off' }`" @click="busy = !busy" />
         </div>
diff --git a/package.json b/package.json
index 97e0d80..7e9fb80 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bitthecat/tailwind-vue-data-table",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "keywords": [
         "tailwindcss",
         "vue",
diff --git a/src/components/TVTable.vue b/src/components/TVTable.vue
index e48bd37..2f2f80b 100644
--- a/src/components/TVTable.vue
+++ b/src/components/TVTable.vue
@@ -3,9 +3,8 @@
         <span>Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items</span>
     </div>
     
-    
-    <div class="overflow-x-auto ">
-        <table ref="TVTABLE" class="min-w-full">
+    <div class="overflow-auto">
+        <table ref="TVTABLE" class="overflow-hidden min-w-full">
             <thead class="bg-gray-300 text-xs border divide-x divide-y">
                 <slot v-if="slots['header-row']" name="header-row" />
                 <tr class="divide-x divide-y">
@@ -109,7 +108,9 @@
                     </tr>
                 </template>
             </tbody>
-            <tfoot class="bg-gray-300 border divide-x divide-y">
+            <tfoot 
+                class="text-xs bg-gray-300 border divide-x divide-y"
+            >
                 <slot v-if="slots['footer-row']" name="footer-row" />
             </tfoot>
         </table>