https://github.com/sreesanth46/vue-table

Vue table component using tailwind.
https://github.com/sreesanth46/vue-table

component npm-package package tailwind typescript vue-table vue-tailwind vue3

Last synced: 1 day ago
JSON representation

Vue table component using tailwind.

• Host: GitHub
• URL: https://github.com/sreesanth46/vue-table
• Owner: Sreesanth46
• License: mit
• Created: 2023-07-19T09:15:42.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-13T08:46:32.000Z (9 months ago)
• Last Synced: 2024-11-01T08:39:25.400Z (5 days ago)
• Topics: component, npm-package, package, tailwind, typescript, vue-table, vue-tailwind, vue3
• Language: Vue
• Homepage: https://www.npmjs.com/package/@harv46/vue-table
• Size: 1 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

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

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

}]

    


      

    


```

### Dark mode

```js

    


      

    


```

## Advance usage example

```js

    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

    }

    

      

         Actions

      

      

        {/* item will be the object in a row */}

        

            

            

        

      

    

```

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

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;

}

  


    

    


      

    

  


```

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