Vue Next Datatable is a Lightweight Datatable for Vue 3, Inspiration from DataTables.
- Search
- Filter
- Pagination
- Sort
- Plugin System
- Server-side
- Customable Theme
Install to vue
import { createApp } from 'vue'
import NextDatatable from 'vue-next-datatable'
const app = createApp(App)
const options = { debug: false }
app.use(NextDatatable, options)
app.mount('#app')
Add to your component
<template> <NextDatatable :data="data" :columns="columns" :options="{}"> </template> <script> import { reactive } from 'vue' export default { setup() { let data = reactive([ { id: 1, name: 'Alfian Dwi Nugraha', age: 19, address: 'Surabaya, East Java, Indonesia.' } ]) let columns = [ { name: 'id', label: 'ID', }, { name: 'name', label: 'Name', }, { name: 'age', label: 'Age', }, { name: 'address', label: 'Address', }, ] return { data, columns, } } } </script>
| Key | Type | Description | Default Value |
|---|---|---|---|
| perPage | number | number of items displayed in one page | 10 |
| showEntriesBy | array | number of items allowed to view per page | [10, 20, 50, 100] |
| type | string | type table style bordered or borderless |
'bordered' |
| size | string | size of table | 'md' |
| server | object | remote server option | {...} |
| server.url | string | url of server api | '' |
| pagination | object | pagination option | {...} |
| pagination.position | string | position pagination | 'end' |
| pagination.type | string | type pagination style extended or minimal |
'extended' |
| pagination.activeColor | string | button color on active | '#185ADB' |
| Key | Type | Description | Default |
|---|---|---|---|
| defaults | object | table options | { ...TableOptions } |
| debug | boolean | view emit dispatch & error handler | true |
| plugins | array | register plugins | [] |
| themes | array | register themes | [] |
Create your plugin file
# VueNextDatatable.js
export default function install(nextDatatable, options) {
// this is function called when table:init event
const onTableInit = function () {
console.log('VueNextDatatable on table:init')
}
// register function to event listener
nextDatatable.addListener('table:init', onTableInit)
//
console.log('My Example Plugin Installed')
}
And then register your plugin in global options
import NextDatatable from 'vue-next-datatable'
import VueNextDatatable from './plugins/VueNextDatatable'
const app = createApp(App)
const options = {
...
plugins: [VueNextDatatable],
}
app.use(NextDatatable, options)
app.mount('#app')
| Event Name | Description | Parameter |
|---|---|---|
| on:before-mount | On Table Component Before Mount | |
| on:mounted | On Table Component Mounted | |
| on:before-unmount | On Table Component Before Unmount | |
| on:unmounted | On Table Component Unmounted | |
| on:activated | On Table Component Before Mount | |
| on:deactivated | On Table Component Before Mount | |
| wrapper:init | On NextDatatableWrapper Construct |
| Event Name | Description | Parameter |
|---|---|---|
| pagination:change | When Pagination Value Change | pagination: object |
| pagination:before-navigate | When pagination navigate | toPage: number, fromPage: number |
| pagination:navigated | after pagination navigate | toPage: number, fromPage: number |
| Event Name | Description | Parameter |
|---|---|---|
| search:change | When Search Value Change | search: string |
| Event Name | Description | Parameter |
|---|---|---|
| table:init | On Before Table Init | |
| table:data-changed | When Data in Props Changed | data: array |
| table:rows-changed | When Rows Re-render | rows: array |
| table:props-changed | When Rows Re-render | search: object |
| table:thead:column:click | when table head column click | column: object |
| table:tfood:column:click | when table foot column click | column: object |
| table:tbody:column:click | when table body column click | row: object, column: object |
| Event Name | Description | Parameter |
|---|---|---|
| table:server:data-changed | when data from fetch changed | data: array |
| table:server:rows-changed | when rows changed | rows: array |
| table:server:fetch | when fetch data trigger | |
| table:server:fetch-complete | when fetch data complete no error | response: object |
| table:server:fetch-error | when fetch data error | error: object |
| table:server:fetch-finally | when fetch data finally complete |
You can follow the contributing guide listed here
Vue Next Datatable is open-sourced software licensed under the MIT