BitTheCat
diff --git a/‎.eslintrc.js‎
Lines changed: 14 additions & 0 deletions b/‎.eslintrc.js‎
Lines changed: 14 additions & 0 deletions
diff --git a/‎README.md‎
Lines changed: 7 additions & 2 deletions b/‎README.md‎
Lines changed: 7 additions & 2 deletions
diff --git a/‎tvdatatable.jpg‎ renamed to ‎assets/tvdatatable.jpg‎ b/‎tvdatatable.jpg‎ renamed to ‎assets/tvdatatable.jpg‎
diff --git a/‎assets/tvpagination.jpg‎
11.8 KB b/‎assets/tvpagination.jpg‎
11.8 KB
diff --git a/‎dev/Table.vue‎ renamed to ‎dev/TableShow.vue‎
Lines changed: 32 additions & 22 deletions b/‎dev/Table.vue‎ renamed to ‎dev/TableShow.vue‎
Lines changed: 32 additions & 22 deletions
diff --git a/‎dev/main.ts‎ renamed to ‎dev/main.js‎ b/‎dev/main.ts‎ renamed to ‎dev/main.js‎
diff --git a/‎dev/router.ts‎
Lines changed: 4 additions & 4 deletions b/‎dev/router.ts‎
Lines changed: 4 additions & 4 deletions
diff --git a/‎index.html‎
Lines changed: 1 addition & 1 deletion b/‎index.html‎
Lines changed: 1 addition & 1 deletion
@@ -0,0 +1,14 @@
+module.exports = {
+    extends: [
+        "eslint:recommended",
+        'plugin:vue/vue3-recommended',
+    ],
+    rules: {
+        "indent": [
+            "error",
+            4,
+        ],
+        "vue/html-indent": 0,
+        "vue/max-attributes-per-line": 0,
+    }
+} 
@@ -2,7 +2,9 @@
 
 Simple DataTable with slots, class and style modification for tr and td, sortable by columns (only graphics with click event).
 
-<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/tvdatatable.jpg"/>
+Contains the TVPaginator component that can be disabled via prop or used in stand-alone mode.
+
+<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvdatatable.jpg"/>
 
 ### Install
 ```
@@ -15,7 +17,10 @@ import { TVTable } from '@bitthecat/tailwind-vue-data-table'
 ```
 
 ### Next additions
-- Pagination (can be disabled)
+- Pagination (can be disabled) ✔️
+ 
+<img src="https://github.com/BitTheCat/tailwind-vue-data-table/blob/main/assets/tvpagination.jpg"/>
+
 - Select row column (with checkbox)
 - Row detail
 - ...
 
@@ -1,26 +1,28 @@
 <template>
-    <div class="grid gap-4">
-        <span class="text-xs"> Simple </span> 
-        <TVTable
-            :items="items"
-            :fields="fieldsSimple"
-        >
-        </TVTable>
-
+    <div>
+        <div class="mb-3">
+            <span class="text-xs "> Simple </span> 
+            <TVTable
+                :items="items"
+                :fields="fieldsSimple"
+            />
+        </div>
         <hr>
-        
-        <span class="text-xs">With Props</span>
-        <TVTable
-            :items="items"
-            :fields="fields"
-            multiple-sortable
-        >
-            <template #cell:username="{ item }">
-                {{ item.emoji }} - {{ item.username }}
-            </template>
-        </TVTable>
-
-
+        <div>
+            <span class="text-xs">With Props</span>
+            <TVTable
+                :items="filterItems"
+                :fields="fields"
+                multiple-sortable
+                :total-rows="items.length"
+                :per-page="perPage"
+                @change-page="changePage"
+            >
+                <template #cell:username="{ item }">
+                    {{ item.emoji }} - {{ item.username }}
+                </template>
+            </TVTable>
+        </div>
     </div>
 </template>
 
@@ -29,7 +31,7 @@ import { defineComponent, ref } from 'vue';
 import TVTable from '../src/components/TVTable.vue';
 
 defineComponent({
-  name: 'Table',
+    name: 'TableShow',
 }) 
 
 const fields = ref([
@@ -93,4 +95,12 @@ const items = ref([
     },
 ])
 
+const perPage = ref(2)
+
+const filterItems = ref(items.value.slice(0, 1 * perPage.value))
+
+const changePage = (values) => {
+    filterItems.value = items.value.slice(values.from, values.to)
+}
+
 </script>
@@ -1,14 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router';
 
-import Table from './Table.vue'
+import TableShow from './TableShow.vue'
 
 const routes = [
-  { path: '/', component: Table },
+    { path: '/', component: TableShow },
 ];
 
 const router = createRouter({
-  history: createWebHistory(),
-  routes,
+    history: createWebHistory(),
+    routes,
 });
 
 export default router;
@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="app"></div>
-    <script type="module" src="/dev/main.ts"></script>
+    <script type="module" src="/dev/main.js"></script>
   </body>
 </html>