@parthfaladu/vue-js-datatable

vue-js-datatable

vue-js-datatable is wrapper vue package of datatables.net

Installation

npm install --save @parthfaladu/vue-js-datatable

Or using yarn

yarn add @parthfaladu/vue-js-datatable -dev

For Installing plugin import vue-js-datatable in your component page.

//foo.vue
import VueJsDatatable from "@parthfaladu/vue-js-datatable";
export default {
  components: {
    VueJsDatatable,
  },
}

Note

Please note that this package depends on jQuery and jquery.dataTables.js, but you won't need to add it to your project manually, vue-js-datatable will handle this for you automatically if this dependencies are not detected.

CSS

For styling of the table import datatable css file.

Basic Usage

You can pass an array of fullclendar objects through the props

<VueJsDatatable :url="url" type="post" :columns="columns" @gaction="onAction">
    <th>ID</th>
    <th>name</th>
    <th>City</th>
    <th>Action</th>
</VueJsDatatable>
...
<script>
import VueJsDatatable from '@parthfaladu/vue-js-datatable';
...
  components: {
	VueJsDatatable,
  },
  data() {
    return {
        columns: [
          {data:'id', name:'id' , width:"100px"},
          {data:'name', name:'name' , width:"300px"},
          {data:'city', name:'city' , width:"200px"},
          {data:(data) => {
		return "<button class='btn btn-outline-alternate' data-g-action='view' data-g-actiondata="+data.id+">Edit</button>";
	  }, name:'action', width:"150px"}
	],
	url: 'https://example.com/api/v1/get/user'
    }
  },
  ...
  methods: {
    onAction(action) {
	if(action.action === 'view') {
		console.log('view button click.');
	}
    }
  }
...
</script>

Props

Name	Type	Default	Description
columns	Array	[]	Table all columns
url	String	null	Ajax request url
type	String	'GET'	Ajax request type
searching	Boolean	true	Feature control search (filtering) abilities
lengthChange	Boolean	true	Feature control the end user's ability to change the paging display length of the table
paging	Boolean	true	Enable or disable table pagination
ordering	Boolean	true	Feature control ordering (sorting) abilities in DataTables
className	String	''	Table class names
serverSide	Boolean	true	Feature control DataTables' server-side processing mode
headers	Object	{}	Ajax request headers
order	Array	[]	Initial order (sort) to apply to the table

Events

Name	Description
gaction	In button define data-g-action='view' attribute and on button click this event will be emitted