├── .gitignore
├── README.md
├── babel.config.js
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── VuePaginationComponent.vue
    └── main.js
└── vue.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | vue-pagination-component 💫
 2 | ========================
 3 | A simple and customizable Vue.js pagination component.
 4 | 
 5 | ---
 6 |  - Try: [**DEMO**](https://xmehdi01.github.io/vue-pagination-component/) 
 7 |  - Install: [**NPM**](https://www.npmjs.com/package/@xmehdi01/vue-pagination-component)
 8 |  - Source code: [**Github**](https://github.com/xmehdi01/vue-pagination-component) 
 9 | 
10 | ---
11 | 
12 | Installation ⚙️
13 | ------------
14 | 
15 | `npm i @xmehdi01/vue-pagination-component`
16 | 
17 | Component using 🚀
18 | -----
19 | ```html
20 | <template>
21 |   <div>
22 |       <!-- Render your table here -->
23 |     <pagination-component
24 |       :items="items"
25 |       :per-page="perPage"
26 |       @page-changed="currentPage = $event"
27 |     />
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | import PaginationComponent from "@xmehdi01/vue-pagination-component";
33 | 
34 | export default {
35 |   name: "App",
36 |   components: {
37 |     PaginationComponent,
38 |   },
39 |   data() {
40 |     return {
41 |       // Your data array goes here
42 |       items: [],
43 |       perPage: 3,
44 |       currentPage: 1,
45 |     };
46 |   },
47 | };
48 | </script>
49 | ```
50 | 
51 | ## License 📝
52 | This component is licensed under the MIT License.


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@xmehdi01/vue-pagination-component",
 3 |   "main": "dist/VuePaginationComponent.common.js",
 4 |   "files": [
 5 |     "dist/*",
 6 |     "*.js",
 7 |     "*.json"
 8 |   ],
 9 |   "version": "0.1.3",
10 |   "private": false,
11 |   "description": "A simple and customizable Vue.js pagination component.",
12 |   "keywords": [
13 |     "vue",
14 |     "pagination",
15 |     "component"
16 |   ],
17 |   "author": "xmehdi01",
18 |   "license": "MIT",
19 |   "scripts": {
20 |     "serve": "vue-cli-service serve",
21 |     "build": "vue-cli-service build  --target lib --name VuePaginationComponent ./src/components/VuePaginationComponent.vue",
22 |     "lint": "vue-cli-service lint"
23 |   },
24 |   "dependencies": {
25 |     "core-js": "^3.8.3",
26 |     "vue": "^2.6.14"
27 |   },
28 |   "devDependencies": {
29 |     "@babel/core": "^7.12.16",
30 |     "@babel/eslint-parser": "^7.12.16",
31 |     "@vue/cli-plugin-babel": "~5.0.0",
32 |     "@vue/cli-plugin-eslint": "~5.0.0",
33 |     "@vue/cli-service": "~5.0.0",
34 |     "eslint": "^7.32.0",
35 |     "eslint-plugin-vue": "^8.0.3",
36 |     "vue-template-compiler": "^2.6.14"
37 |   },
38 |   "eslintConfig": {
39 |     "root": true,
40 |     "env": {
41 |       "node": true
42 |     },
43 |     "extends": [
44 |       "plugin:vue/essential",
45 |       "eslint:recommended"
46 |     ],
47 |     "parserOptions": {
48 |       "parser": "@babel/eslint-parser"
49 |     },
50 |     "rules": {}
51 |   },
52 |   "browserslist": [
53 |     "> 1%",
54 |     "last 2 versions",
55 |     "not dead"
56 |   ]
57 | }
58 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taher-el-mehdi/vue-pagination-component/f8910a0042a85b104c90ba002dda2d1fdd964ca3/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <table class="my-table">
 4 |       <thead>
 5 |         <tr>
 6 |           <th>Name</th>
 7 |           <th>Age</th>
 8 |           <th>Email</th>
 9 |         </tr>
10 |       </thead>
11 |       <tbody>
12 |         <tr v-for="(data, index) in displayedItems" :key="index">
13 |           <td>{{ data.name }}</td>
14 |           <td>{{ data.age }}</td>
15 |           <td>{{ data.email }}</td>
16 |         </tr>
17 |       </tbody>
18 |     </table>
19 |     <pagination-component
20 |       :items="items"
21 |       :per-page="perPage"
22 |       @page-changed="currentPage = $event"
23 |     />
24 |   </div>
25 | </template>
26 | 
27 | <script>
28 | import PaginationComponent from "./components/VuePaginationComponent.vue";
29 | 
30 | export default {
31 |   name: "App",
32 |   components: {
33 |     PaginationComponent,
34 |   },
35 |   data() {
36 |     return {
37 |       // Your data array
38 |       items: [
39 |         { id: 1, name: "John Doe", age: 25, email: "johndoe@example.com" },
40 |         { id: 2, name: "Jane Smith", age: 32, email: "janesmith@example.com" },
41 |         { id: 3, name: "Sarah Lee", age: 28, email: "sarahlee@example.com" },
42 |         { id: 4, name: "David Kim", age: 36, email: "davidkim@example.com" },
43 |         { id: 5, name: "Jane Smith", age: 32, email: "janesmith@example.com" },
44 |       ],
45 |       perPage: 3,
46 |       currentPage: 1,
47 |     };
48 |   },
49 |   computed: {
50 |     displayedItems() {
51 |       const start = (this.currentPage - 1) * this.perPage;
52 |       const end = start + this.perPage;
53 |       return this.items.slice(start, end);
54 |     },
55 |   },
56 | };
57 | </script>
58 | <style scoped>
59 | .my-table {
60 |   border-collapse: collapse;
61 |   width: 100%;
62 |   max-width: 800px;
63 |   margin: 0 auto;
64 | }
65 | 
66 | .my-table th,
67 | .my-table td {
68 |   border: 1px solid #ddd;
69 |   padding: 8px;
70 |   text-align: left;
71 | }
72 | 
73 | .my-table th {
74 |   background-color: #f2f2f2;
75 |   color: #444;
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/taher-el-mehdi/vue-pagination-component/f8910a0042a85b104c90ba002dda2d1fdd964ca3/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/VuePaginationComponent.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div class="pagination">
  4 |       <button
  5 |         @click="prevPage"
  6 |         :disabled="currentPage === 1"
  7 |         :class="{ disabled: currentPage === 1 }"
  8 |       >
  9 |         {{ prevLabel }}
 10 |       </button>
 11 |       <button
 12 |         v-for="pageNumber in pageCount"
 13 |         :key="pageNumber"
 14 |         :class="{ active: currentPage === pageNumber }"
 15 |         @click="goToPage(pageNumber)"
 16 |       >
 17 |         {{ pageNumber }}
 18 |       </button>
 19 |       <button
 20 |         @click="nextPage"
 21 |         :disabled="currentPage === pageCount"
 22 |         :class="{ disabled: currentPage === pageCount }"
 23 |       >
 24 |         {{ nextLabel }}
 25 |       </button>
 26 |     </div>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | export default {
 32 |   name: "VuePaginationComponent",
 33 |   data() {
 34 |     return {
 35 |       currentPage: 1,
 36 |     };
 37 |   },
 38 |   props: {
 39 |     items: {
 40 |       type: Array,
 41 |       required: true,
 42 |     },
 43 |     perPage: {
 44 |       type: Number,
 45 |       default: 10,
 46 |     },
 47 |     prevLabel: {
 48 |       type: String,
 49 |       default: "Prev",
 50 |     },
 51 |     nextLabel: {
 52 |       type: String,
 53 |       default: "Next",
 54 |     },
 55 |     prevClass: {
 56 |       type: String,
 57 |       default: "",
 58 |     },
 59 |     nextClass: {
 60 |       type: String,
 61 |       default: "",
 62 |     },
 63 |     activeClass: {
 64 |       type: String,
 65 |       default: "active",
 66 |     },
 67 |   },
 68 |   computed: {
 69 |     displayedItems() {
 70 |       const start = (this.currentPage - 1) * this.perPage;
 71 |       const end = start + this.perPage;
 72 |       return this.items.slice(start, end);
 73 |     },
 74 |     pageCount() {
 75 |       return Math.ceil(this.items.length / this.perPage);
 76 |     },
 77 |   },
 78 |   methods: {
 79 |     goToPage(page) {
 80 |       this.currentPage = page;
 81 |       this.$emit("page-changed", this.currentPage);
 82 |     },
 83 |     nextPage() {
 84 |       if (this.currentPage < this.pageCount) {
 85 |         this.currentPage++;
 86 |         this.$emit("page-changed", this.currentPage);
 87 |       }
 88 |     },
 89 |     prevPage() {
 90 |       if (this.currentPage > 1) {
 91 |         this.currentPage--;
 92 |         this.$emit("page-changed", this.currentPage);
 93 |       }
 94 |     },
 95 |   },
 96 | };
 97 | </script>
 98 | 
 99 | <style scoped>
100 | .pagination {
101 |   display: flex;
102 |   justify-content: center;
103 |   margin-top: 20px;
104 | }
105 | 
106 | .pagination button {
107 |   background-color: #f0f0f0;
108 |   border: none;
109 |   color: #666;
110 |   font-size: 16px;
111 |   padding: 10px 15px;
112 |   margin: 0 5px;
113 |   cursor: pointer;
114 |   border-radius: 5px;
115 | }
116 | 
117 | .pagination button.active {
118 |   background-color: #666;
119 |   color: #fff;
120 | }
121 | 
122 | .pagination button.disabled {
123 |   background-color: #ccc;
124 |   color: #999;
125 | }
126 | 
127 | .custom-prev {
128 |   background-color: #333;
129 |   color: #fff;
130 |   border-radius: 5px;
131 | }
132 | 
133 | .custom-next {
134 |   background-color: #f0f0f0;
135 |   color: #666;
136 |   border-radius: 5px;
137 | }
138 | 
139 | .custom-active {
140 |   background-color: #333;
141 |   color: #fff;
142 |   border-radius: 5px;
143 | }
144 | 
145 | @media only screen and (max-width: 600px) {
146 |   .pagination button {
147 |     font-size: 14px;
148 |     padding: 8px 12px;
149 |     margin: 0 3px;
150 |   }
151 | }
152 | </style>
153 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require("@vue/cli-service");
 2 | module.exports = defineConfig({
 3 |   publicPath: "/vue-pagination-component",
 4 |   transpileDependencies: true,
 5 |   configureWebpack: {
 6 |     resolve: {
 7 |       alias: {
 8 |         "vue-pagination-component": "dist/VuePaginationComponent.common.js",
 9 |       },
10 |     },
11 |   },
12 | });
13 | 


--------------------------------------------------------------------------------