Fixed TVTable & TVPagination, Update README

Author: BitTheCat

README.md

@@ -11,6 +11,15 @@ Contains the TVPaginator component that can be disabled via prop or used in stan
 npm i @bitthecat/tailwind-vue-data-table
 ```
 
+Add this code inside **tailwind.config.*** to compile the css library
+
+``` js
+content: [
+    ...
+    './node_modules/@bitthecat/tailwind-vue-data-table/dist/*.js',
+],
+```
+
 ### Use in Vue
 ``` js
 import { TVTable } from '@bitthecat/tailwind-vue-data-table' 

dev/TableShow.vue

@@ -11,6 +11,7 @@
         <div>
             <span class="text-xs">With Props</span>
             <TVTable
+                v-model:currentPage="currentPage"
                 :items="filterItems"
                 :fields="fields"
                 multiple-sortable
@@ -95,6 +96,8 @@ const items = ref([
     },
 ])
 
+const currentPage = ref(1)
+
 const perPage = ref(2)
 
 const filterItems = ref(items.value.slice(0, 1 * perPage.value))

package.json

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

src/components/TVPagination.vue

@@ -28,7 +28,7 @@
         </div>
         <div class="sm:flex hidden">
             <template v-for="page of pages" :key="`page_${page}`">
-                <p :class="paginationClass(page)" @click="changePage(page)">
+                <p class="text-sm font-medium leading-none cursor-pointer link px-2" :class="paginationClass(page)" @click="changePage(page)">
                     {{ page }}
                 </p>
             </template>
@@ -121,9 +121,7 @@ const pages = computed(() => {
 })
 
 const paginationClass = (page) => {
-    let classes = [
-        'text-sm font-medium leading-none cursor-pointer link px-2',
-    ]
+    let classes = []
     if (page === props.currentPage) {
         classes.push('rounded-xl bg-gray-400 text-white')
     }

src/components/TVTable.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="!hidePagination && !hideSummary" class="flex items-center justify-end mr-2 mb-2 text-xs font-small text-body">
+    <div v-if="!hidePagination && totalRows != 0" class="flex items-center justify-end mr-2 mb-2 text-xs font-small text-body">
         <span>Displaying {{ fromRow + 1 }} to {{ toRow }} of {{ totalRows }} items</span>
     </div>
 
@@ -67,9 +67,9 @@
     </table>
 
     <TVPagination
-        v-if="totalRows > perPage && !hidePagination"
+        v-if="localTotalRows > perPage && !hidePagination"
         v-model:currentPage="localCurrentPage"
-        :total-rows="totalRows"
+        :total-rows="localTotalRows"
         :per-page="perPage"
     />
 </template>
@@ -103,14 +103,13 @@ const props = defineProps({
         type: Number,
         default: 15
     },
-    hideSummary: Boolean,
     hidePagination: Boolean,
     multipleSortable: Boolean,
 })
 
 const emit = defineEmits(['updateSortable', 'changePage'])
 
-const totalRows = ref(props.totalRows || props.items.length || 0)
+const localTotalRows = ref(props.totalRows || props.items.length || 0)
 const fromRow = ref(0)
 const toRow = ref(0)
 const localCurrentPage = ref(props.currentPage)
@@ -133,11 +132,11 @@ const refreshCounter = () => {
     if (localCurrentPage.value === 0) {
         return
     }
-    let from = (totalRows.value > 0) ? 1 : 0
+    let from = (localTotalRows.value > 0) ? 1 : 0
     if (localCurrentPage.value > 1) {
         from = from + (localCurrentPage.value - 1) * props.perPage
     }
-    let to = Math.min(from + props.perPage - 1, totalRows.value)
+    let to = Math.min(from + props.perPage - 1, localTotalRows.value)
     fromRow.value = from - 1
     toRow.value = to
 }