VueTable + VuePaginator

Installation

npm i @harv46/vue-table

Basic usage example

<script setup>
import { VueTable } from "@harv46/vue-table"
import "@harv46/vue-table/dist/style.css"
const header = ["Name", "Age"]
const keys=["name", "age"]
const data = [{
 name: "Example Name 1",
 age: 22
}, {
 name: "Example Name 2",
 age: 17
}]
</script>
<template>
 <div>
 <VueTable :headers="header" :data="data" :keys="keys" />
 </div>
</template>

Dark mode

<template>
 <div>
 <VueTable :headers="header" :data="data" :keys="keys" dark />
 </div>
</template>

Advance usage example

<script setup>
 import { VueTable } from "@harv46/vue-table"
 import "@harv46/vue-table/dist/style.css"
 const headers = ["id", "name", "amount", "status", "Created By"];
 const keyValue = [
 "id",
 "name",
 "amount",
 "status",
 ["createdUser", "user", "name"],
 ];
 const loading = ref(false);
 {/* getData[0].createdUser.user.name ==> [ ["createdUser", "user", "name"] ] */}
 {/* get data from api || store */}
 const getData = () => {
 const loading = ref(true);
 // get data
 }
</script>
<template>
 <VueTable
 :headers="headers"
 :keys="keyValues"
 :data="getData"
 :loading="loading"
 >
 <template #th>
 <th> Actions</th>
 </template>
 <template #td="{ item }">
 {/* item will be the object in a row */}
 <td class="flex">
 <DeleteIcon @click="deleteItem(item.id)" />
 <EditIcon @click="edit(item)" />
 </td>
 </template>
 </VueTable>
<template>

Props - VueTable

VuePaginator

<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