# @harv46/vue-table

> A vue table component with pagination component included.

Latest version **0.1.2** (published 2024-01-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @harv46/vue-table
pnpm add @harv46/vue-table
yarn add @harv46/vue-table
bun add @harv46/vue-table
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2024-01-06 |
| First published | 2023-08-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 31.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Maintainers | harv46 |
| Keywords | vue-component, table, vue-table, paginate, paginator, pagination |

## Links

- npm: https://www.npmjs.com/package/@harv46/vue-table
- Repository: https://github.com/Sreesanth46/vue-table
- Homepage: https://github.com/Sreesanth46/vue-table#readme
- Issues: https://github.com/Sreesanth46/vue-table/issues
- npm.io page: https://npm.io/package/@harv46/vue-table

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.3.4

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 0.1.2 (latest) — 2024-01-06
- 0.1.1 — 2023-11-20
- 0.1.0 — 2023-11-05
- 0.0.6 — 2023-08-09
- 0.0.5 — 2023-08-03
- 0.0.4 — 2023-08-03
- 0.0.3 — 2023-08-03
- 0.0.2 — 2023-08-01
- 0.0.1 — 2023-08-01

## README

# VueTable + VuePaginator

This is a Table component for Vue.js

![VueTable demo](demo.gif)

## Installation

```
npm i @harv46/vue-table
```

## Basic usage example

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

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

## Advance usage example

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

![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`     |

---
_Source: https://npm.io/package/@harv46/vue-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._