@webartistxyz/vue-datatable NPM

VDataTable Plugin for Vue 3

A simple Vue 3 data table including sorting, searching, pagination, and CSV download feature also. This data table has multiple customize options also.

Demo App URL - Click here to view the live demo of the application.

Demo App Source URL - https://github.com/webartistxyz/v-datatable-demo.

Install Plugin

npm i @webartistxyz/vue-datatable

Attention:

VDataTable is using bootstrap 5 CSS file. The size of the style.css file is 152kb. But the main file size of the VDataTable is only 10kb. So If you have already included a bootstrap CSS file in your project you don't need to import the VDataTable CSS file. Otherwise, you need to import the CSS file.

<!-- Import css file -->
<style>
    @import "@webartistxyz/vue-datatable/dist/style.css";
</style>

How to use !!!

Method 1

Import within a specific component to use only in a component

After installing import the component in your desired file.

import { VDataTable } from "@webartistxyz/vue-datatable"

export default {
    name: "YourComponentName", 
    components: {VDataTable},
    data() {
        return {
            dataSet: [],
            columns: [
                {title: "SL", sort_key: ''}, // We are using sort_key to sort data in ACS order or DESC order. If you don't want to enable the sorting feature then you can keep it an empty string.
                {title: "Name", sort_key: 'title'},
                {title: "Description", sort_key: 'body'},
                {title: "Action", sort_key: ''}
            ],
        };
    },
    mounted() {
        setTimeout(() => {
            fetch('https://jsonplaceholder.typicode.com/posts')
                .then(response => response.json())
                .then(json => {
                    this.dataSet = json;
                })
        }, 1)
    }
};

<!-- Component.vue template -->
<template>
    <div class="py-4 container-fluid">
        <div class="row">
            <div class="col-12">
                <v-data-table :columns="columns" :data="dataSet">
                    
                    //It's a header slot to show or add anything that you want.
                    <template #header>
                        <div class="d-flex align-items-center justify-content-between">
                            <h6>The header of the list</h6>
                            <button type="button" class="mb-0 btn btn-outline-success btn-sm" @click="">Create data</button>
                        </div>
                    </template>
                    
                    //Scoped slot to show list data in your own way.
                    <template #table_data="{item, index}">
                        <td>
                            <span class="text-secondary text-xs font-weight-bold ps-3">{{ index }}</span>
                        </td>
                        <td>
                            <span class="text-secondary text-xs font-weight-bold ps-3">{{ item.title }}</span>
                        </td>
                        <td>
                            <span class="text-secondary text-xs font-weight-bold ps-3 show-dot-sign">{{ item.body }}</span>
                        </td>
                        <td>
                          <span>
                              <a
                                      href="javascript:;"
                                      class="text-secondary text-xs font-weight-bold ps-3"
                              >Edit</a>
                              <a
                                      href="javascript:;"
                                      class="text-danger text-xs font-weight-bold ps-3"
                              >Delete</a>
                          </span>
                        </td>
                    </template>
                </v-data-table>
            </div>
        </div>
    </div>
</template>

Method 2

Import in main.js file to use globally

After installing import the component in your main.js file.

import VDataTable from "@webartistxyz/vue-datatable"

createApp(App).use(VDataTable).mount("#app");

Configuration

Props

Name	Type	Default	Description
columns	`array`	`[]`	Use this to pass your table column names and to control sorting behavior.
pagination	`boolean`	`true`	To show or hide the pagination feature.
perPageOptions	`array`	`[5, 10, 25, 50, 100]`	You can overwrite this to set your own per-page options.
data	`array`	`[]`	Use this prop to show your data list in the table row.
isSearchAble	`boolean`	`true`	Set false if you want to hid the search field.
entriesClass	`string`	`col-md-3`	Use this prop to set your own class for per page select option.
searchClass	`string`	`false`	Use to show optional word beside the label if your field is optional.
searchPlaceholder	`string`	`'Search'`	Use this prop to set search input placeholder.
filterClass	`string`	`col-md-4`	If you use extra fields between search and per page option the you can use this prop to control this size.
fileName	`string`	`List`	Use thi prop to overwrite the name of CSV file.
isShowPerPageOption	`boolean`	`true`	Set false if you want to hide per page select option.

Slots

Name	Description
header	Pass any HTML to show in the table header.
filters	Pass any HTML element to show between per page select option and search input field.
table_data	This slot is used to show the list in your desired way.
table_footer	Use this slot if you want to use anything in the table footer as tfoot.