# 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](https://webartistxyz.github.io/v-datatable-demo/) - Click here to view the live demo of the application.
### [Demo App Source URL](https://github.com/webartistxyz/v-datatable-demo) - https://github.com/webartistxyz/v-datatable-demo.
### Install Plugin
```shell
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.
```html
```
---
#### 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.
```js
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)
}
};
```
```html
//It's a header slot to show or add anything that you want.