<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>

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

<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>

<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>