added overflow-hidden for responsive table v0.2.2

Author: BitTheCat

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>

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>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bitthecat/tailwind-vue-data-table",
-    "version": "0.2.1",
+    "version": "0.2.2",
     "keywords": [
         "tailwindcss",
         "vue",

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>