@parthfaladu/vue-js-datatable v1.1.6

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

Events