# Vue Datatables
> Server Side Processing Datatables written with Vuejs Framework.
Reference: https://datatables.net/examples/styling/bootstrap4
## The Problem
> Rendering a table of over 5k records on the client-side will make the browser crush.
## The Solution
> By leveraging of server-side pagination we gain a preformance advantange.
## Quickstart
Inside the vue project run:
```sh
npm i turbo-datatables
```
Inside main.js file or the js file entry point where your vue app starts add:
```javascript
import Vue from 'vue'
import App from './App'
import Datatables from 'turbo-datatables'
Vue.use(Datatables); // This line of code will make the components available in your app.
Vue.config.productionTip = false
new Vue({
el: '#app',
components: { App },
template: ''
})
```
You are all set, look at usage to apply the components.
## Usage
Choose whatever component you need:
```html
```
## Components Events
| Component | Events |
| ------------------------- | ------------------------------ |
| `` | perPageChanged |
| `` | searching |
| `` | gettingRecords, recordsFetched |
| `` | loading |
| `` | columnClicked |
| `` | prev, next, linkClicked |
## Server-Side
> In general the datatable will make an ajax request to the given url and expects a JSON response in the following format:
```javascript
{
"columns": [
{
"name": "id",
"label": "#",
"width": "33%"
},
{
"name": "email",
"label": "Email",
"width": "33%"
},
{
"name": "phone",
"label": "Phone",
"width": "33%"
}
],
"data": [
{
"id": 1,
"email": "Willow_Kassulke91@gmail.com",
"phone": "1-196-138-6202 x30775"
},
...
],
"pagination": {
"currentPage": 1,
"nextPage": 2,
"prevPage": 1,
"lastPage": 50,
"total": 50,
"totalPages": 5,
"lastPageUrl": "?page=5", // optional
"nextPageUrl": "?page=2", // optional
"prevPageUrl": "?page=1", // optional
"from": 1,
"to": 10
}
}
```
This example will create a table with 3 columns: id, name, email.
Usable classes for generating this kind of response on the server-side comming up soon.
## Build
Seed dummy data
```sh
./datatables seed --records 150
```
Run demo server
```sh
npm run demo-server
```
## Todo
- [ ] Set config file where the user can put his database configurations.
- [x] Allow the users to hide columns.
- [ ] Add action component to allow editing or creation of new records.