vue-next-datatable

Vue Next Datatable

Vue Next Datatable is a Lightweight Datatable for Vue 3, Inspiration from DataTables.

Features

• Search
• Filter
• Pagination
• Sort
• Plugin System
• Server-side
• Customable Theme

Overview

Simple Usage

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>

Table Options

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'

VueNextTable Options

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	[]

Example Plugin

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')

Events

Component

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

Pagination

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

Filters

Event Name	Description	Parameter
search:change	When Search Value Change	search: string

Table

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

Table Server Mode

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

Contributing

You can follow the contributing guide listed here

Contributors

License

Vue Next Datatable is open-sourced software licensed under the MIT