diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..a0af430
--- /dev/null
+++ 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}}
\ No newline at end of file
diff --git a/README.md b/README.md
index 37df907..f17a1dd 100644
--- 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
index 1cd6268..32f8d0d 100644
--- 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>
diff --git a/demo/src/assets/data.json b/demo/src/assets/data.json
new file mode 100644
index 0000000..644fc87
--- /dev/null
+++ b/demo/src/assets/data.json
@@ -0,0 +1,902 @@
+[
+  {
+    "id": 1,
+    "name": "Eric Travis",
+    "date_of_birth": "1995-05-25",
+    "GPA": "3.0",
+    "course": "Computer Science",  
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 2,
+    "name": "Mark Smith",
+    "date_of_birth": "1996-02-10",
+    "GPA": "2.5",
+    "course": "Robotics",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 3,
+    "name": "Marissa Barker",
+    "date_of_birth": "1996-10-01", 
+    "GPA": "3.5",
+    "course": "Biology",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 4,
+    "name": "Justin Holden",
+    "date_of_birth": "1994-08-22",
+    "GPA": "3.23",
+    "course": "Philosophy",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 5,
+    "name": "Michelle Thompson",
+    "date_of_birth": "1995-08-05",
+    "GPA": "3.9",
+    "course": "Film Studies",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 6,
+    "name": "Blake Fox",
+    "date_of_birth": "1996-06-01",
+    "GPA": "3.5",
+    "course": "Computer Science",
+    "department": "Arts and Humanities",
+    "fees_paid": false
+  },
+  {
+    "id": 7,
+    "name": "Tony Stark",
+    "date_of_birth": "1997-02-22",
+    "GPA": "4",
+    "course": "Robotics",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 8,
+    "name": "Mike Ross",
+    "date_of_birth": "1999-07-05",
+    "GPA": "3.9",
+    "course": "Film Studies",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 9,
+    "name": "Maynard Quigley",
+    "date_of_birth": "1946-06-18",
+    "GPA": "2.8",
+    "course": "Computer Science",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 10,
+    "name": "Lionel Stamm",
+    "date_of_birth": "2002-03-21",
+    "GPA": "3.1",
+    "course": "Physics",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 11,
+    "name": "Kayleigh Schamberger",
+    "date_of_birth": "2003-04-24",
+    "GPA": "2.6",
+    "course": "Chemistry",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 12,
+    "name": "Dr. Litzy Rutherford",
+    "date_of_birth": "1991-09-02",
+    "GPA": "2.7",
+    "course": "Computer Science",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 13,
+    "name": "Solon O'Connell",
+    "date_of_birth": "1964-10-31",
+    "GPA": "2.9",
+    "course": "Chemistry",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 14,
+    "name": "Prof. Axel Schiller",
+    "date_of_birth": "1983-04-05",
+    "GPA": "2.1",
+    "course": "Computer Science",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 15,
+    "name": "Dr. Alyce Swaniawski",
+    "date_of_birth": "1964-12-01",
+    "GPA": "3.4",
+    "course": "Mathematics",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 16,
+    "name": "Aleen Mraz",
+    "date_of_birth": "1959-07-22",
+    "GPA": "3.9",
+    "course": "Computer Science",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 17,
+    "name": "Dr. Micaela Leannon",
+    "date_of_birth": "1977-02-28",
+    "GPA": "2.1",
+    "course": "Physics",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 18,
+    "name": "Filiberto Macejkovic",
+    "date_of_birth": "1951-04-04",
+    "GPA": "3.4",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 19,
+    "name": "Mr. Moses Tremblay",
+    "date_of_birth": "1961-08-31",
+    "GPA": "2.8",
+    "course": "Computer Science",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 20,
+    "name": "Elyssa Feest",
+    "date_of_birth": "1965-10-13",
+    "GPA": "3.2",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 21,
+    "name": "Aliya Gusikowski",
+    "date_of_birth": "1980-06-29",
+    "GPA": "3.3",
+    "course": "Biology", 
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 22,
+    "name": "Jacklyn Boehm",
+    "date_of_birth": "1967-04-19",
+    "GPA": "3.2",
+    "course": "Computer Science",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 23,
+    "name": "Prof. Lavina Kertzmann",
+    "date_of_birth": "1960-12-31",
+    "GPA": "3.8",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 24,
+    "name": "Alia Brakus",
+    "date_of_birth": "1952-11-24",
+    "GPA": "2.6",
+    "course": "Physics",
+    "department": "Arts and Humanities", 
+    "fees_paid": false
+  },
+  {
+    "id": 25,
+    "name": "Zella Zboncak",
+    "date_of_birth": "1995-12-29",
+    "GPA": "2.8",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 26,
+    "name": "Vernie Boyle",
+    "date_of_birth": "1967-08-31",
+    "GPA": "2.1",
+    "course": "Chemistry",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 27,
+    "name": "Annamae Wiza",
+    "date_of_birth": "1952-04-07",
+    "GPA": "2.8",
+    "course": "Mathematics",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 28,
+    "name": "Prof. Alexandro Morar",
+    "date_of_birth": "1975-12-25",
+    "GPA": "2.9",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 29,
+    "name": "Maximillian Morissette",
+    "date_of_birth": "1952-06-20",
+    "GPA": "2.5", 
+    "course": "Computer Science",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 30,
+    "name": "Wayne Schamberger",
+    "date_of_birth": "1987-04-27",
+    "GPA": "2.8",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 31,
+    "name": "Dr. Angelica Koch",
+    "date_of_birth": "1974-08-31",
+    "GPA": "3.4",
+    "course": "Chemistry",
+    "department": "Arts and Humanities",
+    "fees_paid": false
+  },
+  {
+    "id": 32,
+    "name": "Ova Runte",
+    "date_of_birth": "1951-04-18",
+    "GPA": "3.8",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 33,
+    "name": "Dr. Billie Hammes",
+    "date_of_birth": "1959-12-04",
+    "GPA": "3.7",
+    "course": "Computer Science",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 34,
+    "name": "Letha Reichert",
+    "date_of_birth": "1968-07-22",
+    "GPA": "2.3",
+    "course": "Mathematics",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 35,
+    "name": "Casandra Bins",
+    "date_of_birth": "1966-11-15",
+    "GPA": "3.4",
+    "course": "Chemistry",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 36,
+    "name": "Prof. Idell Gorczany",
+    "date_of_birth": "1976-05-31",
+    "GPA": "2.9",
+    "course": "Chemistry",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 37,
+    "name": "Pearl Kuvalis",
+    "date_of_birth": "1966-02-01",
+    "GPA": "2.1",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 38,
+    "name": "Letitia Hammes",
+    "date_of_birth": "1955-05-15",
+    "GPA": "3.7",
+    "course": "Mathematics",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 39,
+    "name": "Sophia Roob",
+    "date_of_birth": "1981-04-08",
+    "GPA": "3.4",
+    "course": "Computer Science",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 40,
+    "name": "Jaron Moen",
+    "date_of_birth": "1953-02-02",
+    "GPA": "2.6",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 41,
+    "name": "Duncan Beatty",
+    "date_of_birth": "1978-08-18",
+    "GPA": "3.4",
+    "course": "Mathematics", 
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 42,
+    "name": "Mrs. Meredith Buckridge",
+    "date_of_birth": "1957-07-31",
+    "GPA": "2.5",
+    "course": "Biology",
+    "department": "Arts and Humanities",
+    "fees_paid": false
+  },
+  {
+    "id": 43,
+    "name": "Quinton Kemmer",
+    "date_of_birth": "1969-12-24",
+    "GPA": "3.8",
+    "course": "Biology",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 44,
+    "name": "Germaine Braun",
+    "date_of_birth": "1958-10-04",
+    "GPA": "2.9",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 45,
+    "name": "Bryana Hoppe", 
+    "date_of_birth": "1956-02-26",
+    "GPA": "2.3",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 46,
+    "name": "Porter D'Amore",
+    "date_of_birth": "1961-12-20",
+    "GPA": "3.7",
+    "course": "Computer Science",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 47,
+    "name": "Prof. Marlene Runolfsdottir",
+    "date_of_birth": "1986-06-24",
+    "GPA": "3.1",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 48,
+    "name": "Alphonso Berge",
+    "date_of_birth": "1989-08-31",
+    "GPA": "3.2",
+    "course": "Computer Science",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 49,
+    "name": "Fiona Lebsack",
+    "date_of_birth": "1954-03-31",
+    "GPA": "2.5",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 50,
+    "name": "Ansley Stamm",
+    "date_of_birth": "1967-01-23",
+    "GPA": "2.4",
+    "course": "Computer Science",
+    "department": "Arts and Humanities",
+    "fees_paid": false
+  },
+  {
+    "id": 51,
+    "name": "Lenny Weimann",
+    "date_of_birth": "1956-03-09",
+    "GPA": "3.4",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 52,
+    "name": "Breanne Gulgowski",
+    "date_of_birth": "1972-06-21",
+    "GPA": "3.1",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 53,
+    "name": "Krista Shields",
+    "date_of_birth": "1969-03-05",
+    "GPA": "2.1",
+    "course": "Computer Science",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 54,
+    "name": "Kaleigh Cremin",
+    "date_of_birth": "1983-08-22",
+    "GPA": "2.9",
+    "course": "Mathematics",
+    "department": "Arts and Humanities",
+    "fees_paid": false
+  },
+  {
+    "id": 55,
+    "name": "Lavina Deckow",
+    "date_of_birth": "1976-12-17",
+    "GPA": "3.2",
+    "course": "Physics",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 56,
+    "name": "Bertha Kris",
+    "date_of_birth": "1974-02-28",
+    "GPA": "2.6",
+    "course": "Chemistry",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 57,
+    "name": "Katherine Keeling",
+    "date_of_birth": "1955-07-08",
+    "GPA": "3.1",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 58,
+    "name": "Mr. Antone Wiegand",
+    "date_of_birth": "1958-03-29",
+    "GPA": "3.1",
+    "course": "Physics",
+    "department": "Arts and Humanities", 
+    "fees_paid": true
+  },
+  {
+    "id": 59,
+    "name": "Alia McKenzie", 
+    "date_of_birth": "1967-05-23",
+    "GPA": "3.0",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 60,
+    "name": "Everardo O'Conner",
+    "date_of_birth": "1978-02-15",
+    "GPA": "2.6",
+    "course": "Chemistry",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 61,
+    "name": "Angelica Harris",
+    "date_of_birth": "1969-08-17",
+    "GPA": "2.7",
+    "course": "Computer Science",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 62,
+    "name": "Alleen Gottlieb",
+    "date_of_birth": "1982-09-27",
+    "GPA": "2.9",
+    "course": "Physics",
+    "department": "Arts and Humanities",
+    "fees_paid": false
+  },
+  {
+    "id": 63,
+    "name": "Alvina Hoppe",
+    "date_of_birth": "1957-04-13",
+    "GPA": "3.1",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 64,
+    "name": "Miss Frederique Auer",
+    "date_of_birth": "1959-08-25",
+    "GPA": "3.0",
+    "course": "Computer Science",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 65,
+    "name": "Hazle Huel",
+    "date_of_birth": "1977-07-07",
+    "GPA": "3.4",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 66, 
+    "name": "Lucious Hagenes",
+    "date_of_birth": "1955-12-10",
+    "GPA": "2.8",
+    "course": "Mathematics",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 67,
+    "name": "Prof. Roscoe Gusikowski", 
+    "date_of_birth": "1964-03-30",
+    "GPA": "3.4",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 68,
+    "name": "Prof. Nikita Nienow",
+    "date_of_birth": "1964-03-30",
+    "GPA": "3.4",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 69,
+    "name": "Alta Considine",
+    "date_of_birth": "1978-06-05",
+    "GPA": "2.9",
+    "course": "Computer Science",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 70,
+    "name": "Prof. Kelton Hilpert",
+    "date_of_birth": "1957-12-04",
+    "GPA": "3.3",
+    "course": "Chemistry", 
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 71,
+    "name": "Oleta Morar",
+    "date_of_birth": "1950-05-18",
+    "GPA": "3.4",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 72,
+    "name": "Jena Little",
+    "date_of_birth": "1957-08-17",
+    "GPA": "3.1",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 73,
+    "name": "Prof. Reynold Pagac",
+    "date_of_birth": "1976-03-06",
+    "GPA": "3.5",
+    "course": "Chemistry",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 74,
+    "name": "Mr. Freida Wintheiser",
+    "date_of_birth": "1957-12-30",
+    "GPA": "2.3",
+    "course": "Physics",
+    "department": "Arts and Humanities",
+    "fees_paid": false
+  },
+  {
+    "id": 75,
+    "name": "Archibald Heller",
+    "date_of_birth": "1966-06-29",
+    "GPA": "3.0",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 76,
+    "name": "Ms. Damian Schumm",
+    "date_of_birth": "1967-12-31",
+    "GPA": "3.1",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 77,
+    "name": "Elian Block",
+    "date_of_birth": "1955-04-24",
+    "GPA": "3.2",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 78,
+    "name": "Gregoria Nienow",
+    "date_of_birth": "1979-01-04",
+    "GPA": "2.7",
+    "course": "Chemistry",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 79,
+    "name": "Gordon Hagenes",
+    "date_of_birth": "1974-07-04",
+    "GPA": "3.7",
+    "course": "Chemistry",
+    "department": "Business",
+    "fees_paid": true
+  },
+  {
+    "id": 80,
+    "name": "Karlee Wolff",
+    "date_of_birth": "1973-11-20",
+    "GPA": "2.7",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": true
+  },
+  {
+    "id": 81,
+    "name": "Ryder Braun",
+    "date_of_birth": "1951-12-07",
+    "GPA": "3.1",
+    "course": "Computer Science",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 82,
+    "name": "Yvonne Kozey",
+    "date_of_birth": "1968-07-11",
+    "GPA": "2.8",
+    "course": "Physics",
+    "department": "Arts and Humanities",
+    "fees_paid": false
+  },
+  {
+    "id": 83,
+    "name": "Magnus Tillman",
+    "date_of_birth": "1990-10-06",
+    "GPA": "2.6",
+    "course": "Computer Science", 
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 84,
+    "name": "Archibald Harris",
+    "date_of_birth": "1962-04-20",
+    "GPA": "3.6",
+    "course": "Computer Science",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 85,
+    "name": "Jarrett Lang",
+    "date_of_birth": "1979-05-07",
+    "GPA": "2.7",
+    "course": "Physics",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 86,
+    "name": "Miss Neva Langosh",
+    "date_of_birth": "1962-12-08",
+    "GPA": "3.1",
+    "course": "Chemistry",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 87,
+    "name": "Mr. Bradford Cruickshank",
+    "date_of_birth": "1956-11-18",
+    "GPA": "2.3",
+    "course": "Physics",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 88,
+    "name": "Prof. Gerda Muller",
+    "date_of_birth": "1982-01-21",
+    "GPA": "3.4",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 89,
+    "name": "Corine Stiedemann",
+    "date_of_birth": "1976-05-02",
+    "GPA": "2.9",
+    "course": "Physics",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 90,
+    "name": "Krystina Romaguera",
+    "date_of_birth": "1986-03-13",
+    "GPA": "3.2",
+    "course": "Mathematics",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 91,
+    "name": "Talia Robel",
+    "date_of_birth": "1976-07-21",
+    "GPA": "2.9",
+    "course": "Mathematics",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 92,
+    "name": "Mozell Pollich",
+    "date_of_birth": "1987-12-25",
+    "GPA": "3.1",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 93,
+    "name": "Prof. Wilburn Auer",
+    "date_of_birth": "1987-09-20",
+    "GPA": "2.6",
+    "course": "Mathematics",
+    "department": "STEM",
+    "fees_paid": false
+  },
+  {
+    "id": 94,
+    "name": "Arthur Langosh PhD",
+    "date_of_birth": "1967-09-20",
+    "GPA": "3.0",
+    "course": "Physics",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 95,
+    "name": "Elyse Metz",
+    "date_of_birth": "1986-11-17",
+    "GPA": "2.5",
+    "course": "Physics",
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 96,
+    "name": "Molly Legros",
+    "date_of_birth": "1951-08-04",
+    "GPA": "2.3",
+    "course": "Mathematics",
+    "department": "Social Sciences",
+    "fees_paid": false
+  },
+  {
+    "id": 97, 
+    "name": "Marge Stiedemann",
+    "date_of_birth": "1998-05-18",
+    "GPA": "2.8",
+    "course": "Chemistry",
+    "department": "STEM",
+    "fees_paid": true
+  },
+  {
+    "id": 98,
+    "name": "Emelie Douglas",
+    "date_of_birth": "1977-06-11",
+    "GPA": "2.7",
+    "course": "Mathematics",
+    "department": "Arts and Humanities",
+    "fees_paid": true
+  },
+  {
+    "id": 99,
+    "name": "Eli Rogahn",
+    "date_of_birth": "1965-11-11",
+    "GPA": "3.1",
+    "course": "Chemistry", 
+    "department": "Business",
+    "fees_paid": false
+  },
+  {
+    "id": 100,
+    "name": "Miss Gaylord Toy",
+    "date_of_birth": "1978-08-27",
+    "GPA": "3.5",
+    "course": "Physics",
+    "department": "Social Sciences",
+    "fees_paid": true
+  }
+]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 4fb2019..cd587bd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
-    "name": "vue-table-component",
-    "version": "0.0.0",
+    "name": "@harv46/vue-table",
+    "version": "0.0.6",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
-            "name": "vue-table-component",
-            "version": "0.0.0",
+            "name": "@harv46/vue-table",
+            "version": "0.0.6",
             "license": "MIT",
             "dependencies": {
                 "vue": "^3.3.4"
@@ -16,7 +16,7 @@
                 "@vitejs/plugin-vue": "^4.2.3",
                 "autoprefixer": "^10.4.14",
                 "postcss": "^8.4.26",
-                "tailwindcss": "^3.3.3",
+                "tailwindcss": "^3.3.5",
                 "typescript": "^5.0.2",
                 "vite": "^4.4.0",
                 "vue-tsc": "^1.8.3"
@@ -1421,9 +1421,9 @@
             }
         },
         "node_modules/postcss": {
-            "version": "8.4.26",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
-            "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+            "version": "8.4.31",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+            "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
             "funding": [
                 {
                     "type": "opencollective",
@@ -1715,9 +1715,9 @@
             }
         },
         "node_modules/tailwindcss": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
-            "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+            "version": "3.3.5",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
+            "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
             "dev": true,
             "dependencies": {
                 "@alloc/quick-lru": "^5.2.0",
@@ -1725,10 +1725,10 @@
                 "chokidar": "^3.5.3",
                 "didyoumean": "^1.2.2",
                 "dlv": "^1.1.3",
-                "fast-glob": "^3.2.12",
+                "fast-glob": "^3.3.0",
                 "glob-parent": "^6.0.2",
                 "is-glob": "^4.0.3",
-                "jiti": "^1.18.2",
+                "jiti": "^1.19.1",
                 "lilconfig": "^2.1.0",
                 "micromatch": "^4.0.5",
                 "normalize-path": "^3.0.0",
@@ -2901,9 +2901,9 @@
             "dev": true
         },
         "postcss": {
-            "version": "8.4.26",
-            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.26.tgz",
-            "integrity": "sha512-jrXHFF8iTloAenySjM/ob3gSj7pCu0Ji49hnjqzsgSRa50hkWCKD0HQ+gMNJkW38jBI68MpAAg7ZWwHwX8NMMw==",
+            "version": "8.4.31",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+            "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
             "requires": {
                 "nanoid": "^3.3.6",
                 "picocolors": "^1.0.0",
@@ -3060,9 +3060,9 @@
             "dev": true
         },
         "tailwindcss": {
-            "version": "3.3.3",
-            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
-            "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+            "version": "3.3.5",
+            "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.5.tgz",
+            "integrity": "sha512-5SEZU4J7pxZgSkv7FP1zY8i2TIAOooNZ1e/OGtxIEv6GltpoiXUqWvLy89+a10qYTB1N5Ifkuw9lqQkN9sscvA==",
             "dev": true,
             "requires": {
                 "@alloc/quick-lru": "^5.2.0",
@@ -3070,10 +3070,10 @@
                 "chokidar": "^3.5.3",
                 "didyoumean": "^1.2.2",
                 "dlv": "^1.1.3",
-                "fast-glob": "^3.2.12",
+                "fast-glob": "^3.3.0",
                 "glob-parent": "^6.0.2",
                 "is-glob": "^4.0.3",
-                "jiti": "^1.18.2",
+                "jiti": "^1.19.1",
                 "lilconfig": "^2.1.0",
                 "micromatch": "^4.0.5",
                 "normalize-path": "^3.0.0",
diff --git a/package.json b/package.json
index 2d5d670..07ff75d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@harv46/vue-table",
     "private": false,
-    "version": "0.0.6",
+    "version": "0.1.0",
     "type": "module",
     "main": "./dist/umd.js",
     "module": "./dist/es.js",
@@ -30,7 +30,7 @@
         "@vitejs/plugin-vue": "^4.2.3",
         "autoprefixer": "^10.4.14",
         "postcss": "^8.4.26",
-        "tailwindcss": "^3.3.3",
+        "tailwindcss": "^3.3.5",
         "typescript": "^5.0.2",
         "vite": "^4.4.0",
         "vue-tsc": "^1.8.3"
@@ -45,6 +45,15 @@
         "type": "git",
         "url": "https://github.com/Sreesanth46/vue-table.git"
     },
+    "keywords": [
+        "vue-component",
+        "table",
+        "vue-table",
+        "paginate",
+        "paginator",
+        "pagination"
+    ],
+    "description": "A vue table component with pagination component included.",
     "license": "MIT",
     "publishConfig": {
         "access": "public"
diff --git a/paginationdemo.gif b/paginationdemo.gif
new file mode 100644
index 0000000..dbe3fc5
Binary files /dev/null and b/paginationdemo.gif differ
diff --git a/src/components/Paginator/NextNavigation.vue b/src/components/Paginator/NextNavigation.vue
new file mode 100644
index 0000000..d53972e
--- /dev/null
+++ b/src/components/Paginator/NextNavigation.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    large: boolean;
+  }>(),
+  {
+    large: false
+  }
+);
+</script>
+
+<template>
+  <li>
+    <button
+      class="flex items-center justify-center leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+      :class="[large ? 'px-4 h-10' : 'px-3 h-8']">
+      <span class="sr-only">Next</span>
+      <svg
+        :class="[large ? 'w-3 h-3' : 'w-2.5 h-2.5']"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 6 10">
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m1 9 4-4-4-4" />
+      </svg>
+    </button>
+  </li>
+</template>
diff --git a/src/components/Paginator/PageNumber.vue b/src/components/Paginator/PageNumber.vue
new file mode 100644
index 0000000..cce6d22
--- /dev/null
+++ b/src/components/Paginator/PageNumber.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    large: boolean;
+    active: boolean;
+  }>(),
+  {
+    large: false,
+    active: false
+  }
+);
+</script>
+
+<template>
+  <li>
+    <button
+      :aria-current="active ? 'page' : undefined"
+      class="flex items-center justify-center leading-tight"
+      :class="[
+        large ? 'px-4 h-10' : 'px-3 h-8',
+        active
+          ? 'z-10 text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white'
+          : 'text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white'
+      ]">
+      <slot></slot>
+    </button>
+  </li>
+</template>
diff --git a/src/components/Paginator/PreviousNavigation.vue b/src/components/Paginator/PreviousNavigation.vue
new file mode 100644
index 0000000..0b1509b
--- /dev/null
+++ b/src/components/Paginator/PreviousNavigation.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    large: boolean;
+  }>(),
+  {
+    large: false
+  }
+);
+</script>
+
+<template>
+  <li>
+    <button
+      class="flex items-center justify-center ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
+      :class="[large ? 'px-4 h-10' : 'px-3 h-8']">
+      <span class="sr-only">Previous</span>
+      <svg
+        :class="[large ? 'w-3 h-3' : 'w-2.5 h-2.5']"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 6 10">
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M5 1 1 5l4 4" />
+      </svg>
+    </button>
+  </li>
+</template>
diff --git a/src/components/Paginator/VuePaginator.vue b/src/components/Paginator/VuePaginator.vue
new file mode 100644
index 0000000..47adc74
--- /dev/null
+++ b/src/components/Paginator/VuePaginator.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import PreviousNavigation from './PreviousNavigation.vue';
+import NextNavigation from './NextNavigation.vue';
+import PageNumber from './PageNumber.vue';
+import { computed, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    large: boolean;
+    dark: boolean;
+    defaultPage: number;
+    bufferCount: number;
+    pageCount: number;
+  }>(),
+  {
+    large: false,
+    dark: false,
+    defaultPage: 1,
+    bufferCount: 2,
+    pageCount: 5
+  }
+);
+
+const emit = defineEmits({
+  onPageChange : (pageNumber: number) => PageNumber 
+})
+
+const currentPage = ref(props.defaultPage);
+
+watch(currentPage, (newPage: number) => emit('onPageChange', newPage))
+
+const pages = computed(() => {
+  const totalBuffer = props.bufferCount * 2;
+  const pageBuffer = Math.min(totalBuffer, props.pageCount);
+  let start = Math.max(currentPage.value - pageBuffer, 1);
+  const end = Math.min(start + pageBuffer, props.pageCount);
+
+  const pages = [];
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  return pages;
+});
+
+function nextPage(): void {
+  if (currentPage.value != props.pageCount) currentPage.value++;
+}
+
+function previousPage(): void {
+  // TODO: verify this condition
+  if (currentPage.value != 1) currentPage.value--;
+}
+
+function selectPage(pageNumber: number): void {
+  currentPage.value = pageNumber;
+}
+</script>
+
+<template>
+  <nav aria-label="Page navigation" :class="{ dark: dark }">
+    <ul
+      class="flex items-center -space-x-px"
+      :class="[large ? 'h-10 text-base' : 'h-8 text-sm']">
+      <PreviousNavigation :large="large" @click="previousPage" />
+      <page-number
+        :large="large"
+        v-for="item in pages"
+        :key="item"
+        :active="item === currentPage"
+        @click="selectPage(item)"
+        >{{ item }}</page-number
+      >
+      <NextNavigation :large="large" @click="nextPage" />
+    </ul>
+  </nav>
+</template>
diff --git a/src/components/VueTable.vue b/src/components/VueTable.vue
index 7a58989..02a8204 100644
--- a/src/components/VueTable.vue
+++ b/src/components/VueTable.vue
@@ -1,64 +1,55 @@
 <script setup lang="ts">
 withDefaults(
-    defineProps<{
-        headers: string[];
-        data: any[];
-        keys: string[];
-        dark: boolean;
-    }>(),
-    {
-        dark: false,
-    }
+  defineProps<{
+    headers: string[];
+    data: any[];
+    keys: string[];
+    dark: boolean;
+  }>(),
+  {
+    dark: false
+  }
 );
 
 const reduceObject = (obj: any, path: string[]) => {
-    return path.reduce((prev, key) => {
-        return prev?.[key];
-    }, obj);
+  return path.reduce((prev, key) => {
+    return prev?.[key];
+  }, obj);
 };
 </script>
 
 <template>
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg">
-        <table
-            class="w-full text-sm text-left text-gray-500"
-            :class="{ 'dark:text-gray-400': dark }"
-        >
-            <thead
-                class="text-xs text-gray-700 uppercase bg-gray-50"
-                :class="{ 'dark:bg-gray-700 dark:text-gray-400': dark }"
-            >
-                <tr>
-                    <th
-                        v-for="(header, i) in headers"
-                        :key="i"
-                        scope="col"
-                        class="px-6 py-3"
-                    >
-                        {{ header }}
-                    </th>
-                    <slot name="th" />
-                </tr>
-            </thead>
-            <tbody>
-                <tr
-                    class="bg-white border-b hover:bg-gray-50"
-                    :class="{
-                        'dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-600':
-                            dark,
-                    }"
-                    v-for="(item, i) in data"
-                    :key="i"
-                >
-                    <td v-for="(key, i) in keys" :key="i" class="px-6 py-4">
-                        <span v-if="typeof key === 'object'">
-                            {{ reduceObject(item, key) }}
-                        </span>
-                        <span v-else>{{ item[key] }}</span>
-                    </td>
-                    <slot name="td" :item="item" />
-                </tr>
-            </tbody>
-        </table>
-    </div>
+  <div
+    class="relative overflow-x-auto shadow-md sm:rounded-lg"
+    :class="{ 'dark': dark }">
+    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
+      <thead
+        class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+        <tr>
+          <th
+            v-for="(header, i) in headers"
+            :key="i"
+            scope="col"
+            class="px-6 py-3">
+            {{ header }}
+          </th>
+          <slot name="th" />
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          class="bg-white border-b hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-600"
+          v-for="(item, i) in data"
+          :key="i">
+          <td v-for="(key, i) in keys" :key="i" class="px-6 py-4">
+            <span v-if="typeof key === 'object'">
+              {{ reduceObject(item, key) }}
+            </span>
+            <span v-else>{{ item[key] }}</span>
+          </td>
+          <slot name="td" :item="item" />
+        </tr>
+      </tbody>
+    </table>
+  </div>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 6822fff..1ece6d6 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,12 +1,15 @@
 import VueTable from './components/VueTable.vue';
+import VuePaginator from './components/Paginator/VuePaginator.vue';
 import './assets/tailwind.css';
 
 export {
-    VueTable
+    VueTable,
+    VuePaginator
 }
 
 export default {
     install(app: any, options: any) {
-        app.component('VueTable', VueTable)
+        app.component('VueTable', VueTable),
+        app.component('VuePaginator', VuePaginator)
     }
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 925d91b..71ee9d8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  darkMode: 'class',
   theme: {
     extend: {},
   },