VueTable + VuePaginator

This is a Table component for Vue.js

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

Prop	Description	Default
data	Data to be rendered
headers	Heading of the table
keys	Keys of the table data (can be nested)
dark	Dark mode	false
loading	Data loading state - show a spinner	false
noDataMessage	Message when there is no data	No data available

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

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