Merge pull request #2 from Sreesanth46/feature/pagination

Feature/pagination
Sreesanth46 · Nov 5, 2023 · 312172f · 312172f
2 parents 6825843 + df78474
commit 312172f
Show file tree

Hide file tree

Showing 14 changed files with 1,332 additions and 101 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,27 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v4
+      - name: node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: https://registry.npmjs.org
+      - run: npm install
+      - run: npm build
+      - name: publish
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# VueTable
+# VueTable + VuePaginator
 
 This is a Table component for Vue.js
 
@@ -83,11 +83,98 @@ const data = [{
 <template>
 ```
 
-### Props
+### Props - VueTable
 
 | Prop      | Description                            | Default |
 | --------- | -------------------------------------- | ------- |
 | `data`    | Data to be rendered                    | `[]`    |
-| `headers` | heading of the table                   | `[]`    |
+| `headers` | Heading of the table                   | `[]`    |
 | `keys`    | Keys of the table data (can be nested) | `[]`    |
 | `dark`    | Dark mode                              | `false` |
+
+## VuePaginator
+
+![VueTable Pagination demo](paginationdemo.gif)
+
+```js
+
+<script setup>
+import { VueTable, VuePaginator } from '@harv46/vue-table';
+import '@harv46/vue-table/dist/style.css';
+import data from '@/assets/data.json';
+import { computed, ref, watch } from 'vue';
+
+const headers = [
+  'id',
+  'name',
+  'DOB',
+  'GPA',
+  'course',
+  'department',
+  'fees paid'
+];
+const keyValues = [
+  'id',
+  'name',
+  'date_of_birth',
+  'GPA',
+  'course',
+  'department',
+  'fees_paid'
+];
+
+const itemsPerPage = 8;
+
+const startOffSet = ref(0);
+const endOffSet = ref(startOffSet.value + itemsPerPage);
+
+watch(startOffSet, nOff => {
+  endOffSet.value = startOffSet.value + itemsPerPage;
+});
+
+const pageCount = Math.ceil(data.length / itemsPerPage);
+
+const currentData = computed(() =>
+  data.slice(startOffSet.value, endOffSet.value)
+);
+
+function onPageChange(pageNumber) {
+  const newOffSet = (pageNumber - 1) * itemsPerPage;
+  startOffSet.value = newOffSet;
+}
+</script>
+
+<template>
+  <div
+    style="
+      width: 90%;
+      position: absolute;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      margin-top: 6%;
+    ">
+    <VueTable :headers="headers" :keys="keyValues" :data="currentData" />
+    <div
+      style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 2rem;
+      ">
+      <VuePaginator :pageCount="pageCount" @onPageChange="onPageChange" />
+    </div>
+  </div>
+</template>
+
+```
+
+### Props - VuePaginator
+
+| Prop          | Description                                                                                 | Default |
+| ------------- | ------------------------------------------------------------------------------------------- | ------- |
+| `large`       | Change the size of the paginator                                                            | `false` |
+| `dark`        | Dark mode                                                                                   | `false` |
+| `defaultPage` | Default selected page                                                                       | `1`     |
+| `bufferCount` | Specify the number of adjacent pages displayed on both sides of the currently selected page | `2`     |
+| `pageCount`   | Number of pages to be displayed                                                             | `5`     |
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -1,27 +1,68 @@
 <script setup>
-import { VueTable } from "../../dist/es.js";
-import "../../dist/style.css";
-
-const headers = ["name", "age"];
-const keyValues = ["name", "age"];
-const datas = [
-    { name: "example 1", age: 19 },
-    { name: "example 2", age: 22 },
-    { name: "example 3", age: 40 },
+import { VueTable, VuePaginator } from '../../dist/es.js';
+import '../../dist/style.css';
+import data from './assets/data.json';
+import { computed, ref, watch } from 'vue';
+
+const headers = [
+  'id',
+  'name',
+  'DOB',
+  'GPA',
+  'course',
+  'department',
+  'fees paid'
+];
+const keyValues = [
+  'id',
+  'name',
+  'date_of_birth',
+  'GPA',
+  'course',
+  'department',
+  'fees_paid'
 ];
+
+const itemsPerPage = 8;
+
+const startOffSet = ref(0);
+const endOffSet = ref(startOffSet.value + itemsPerPage);
+
+watch(startOffSet, nOff => {
+  endOffSet.value = startOffSet.value + itemsPerPage;
+});
+
+const pageCount = Math.ceil(data.length / itemsPerPage);
+
+const currentData = computed(() =>
+  data.slice(startOffSet.value, endOffSet.value)
+);
+
+function onPageChange(pageNumber) {
+  const newOffSet = (pageNumber - 1) * itemsPerPage;
+  startOffSet.value = newOffSet;
+}
 </script>
 
 <template>
+  <div
+    style="
+      width: 90%;
+      position: absolute;
+      left: 0;
+      right: 0;
+      margin: 0 auto;
+      margin-top: 6%;
+    ">
+    <VueTable :headers="headers" :keys="keyValues" :data="currentData" />
     <div
-        style="
-            width: 90%;
-            position: absolute;
-            left: 0;
-            right: 0;
-            margin: 0 auto;
-            margin-top: 6%;
-        "
-    >
-        <VueTable :headers="headers" :keys="keyValues" :data="datas" />
+      style="
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-top: 2rem;
+      ">
+      <VuePaginator :pageCount="pageCount" @onPageChange="onPageChange" />
     </div>
+  </div>
 </template>