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-datatableAttention:
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. |
Contributing
- Fork the repository.
- Create a new branch.
- Make your changes and commit them with clear commit messages.
- Push your changes to your fork.
- Open a pull request to the original repository.
License
MIT © Mohiuddin Sadek (mhddnsadek@gmail.com)