astondihor/app.js

## app.js
Vue.component('data-table', {
  template: '<table></table>',
  props: ['users'],
  data() {
    return {
      headers: [
        { title: 'ID' },
        { title: 'Username', class: 'some-special-class' },
        { title: 'Real Name' },
        { title: 'Phone' },
        { title: 'Email' },
        { title: 'Website' }
      ],
      rows: [] ,
      dtHandle: null
    }
  },
  watch: {
    users(val, oldVal) {
      let vm = this;
      vm.rows = [];
      // You should _probably_ check that this is changed data... but we'll skip that for this example.
      val.forEach(function (item) {
        // Fish out the specific column data for each item in your data set and push it to the appropriate place.
        // Basically we're just building a multi-dimensional array here. If the data is _already_ in the right format you could
        // skip this loop...
        let row = [];

        row.push(item.id);
        row.push(item.username);
        row.push(item.name);
        row.push(item.phone);
        row.push('<a href="mailto://' + item.email + '">' + item.email + '</a>');
        row.push('<a href="http://' + item.website + '" target="_blank">' + item.website + '</a>');

        vm.rows.push(row);
      });

      // Here's the magic to keeping the DataTable in sync.
      // It must be cleared, new rows added, then redrawn!
      vm.dtHandle.clear();
      vm.dtHandle.rows.add(vm.rows);
      vm.dtHandle.draw();
    }
  },
  mounted() {
    let vm = this;
    // Instantiate the datatable and store the reference to the instance in our dtHandle element.
    vm.dtHandle = $(this.$el).DataTable({
      // Specify whatever options you want, at a minimum these:
      columns: vm.headers,
      data: vm.rows,
      searching: false,
      paging: false,
      info: false
    });
  }
});

new Vue({
  el: '#tabledemo',
  data: {
    users: [],
    search: ''
  },
  computed: {
    filteredUsers: function () {
      let self = this
      let search = self.search.toLowerCase()
      return self.users.filter(function (user) {
        return 	user.username.toLowerCase().indexOf(search) !== -1 ||
          user.name.toLowerCase().indexOf(search) !== -1 ||
          user.phone.indexOf(search) !== -1 ||
          user.email.toLowerCase().indexOf(search) !== -1 ||
          user.website.toLowerCase().indexOf(search) !== -1
      })
    }
  },
  mounted() {
    let vm = this;
    $.ajax({
      url: 'https://jsonplaceholder.typicode.com/users',
      success(res) {
        vm.users = res;
      }
    });
  }
});

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Laravel CRUD</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
  <div id="tabledemo">
    <h3>Vue Datatable example</h3>
    Filter by anything: <input v-model="search">
    <hr>
    <data-table :users="filteredUsers"></data-table>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
  <script src="app.js"></script>
</body>
</html>
	Vue.component('data-table', {
	template: '<table></table>',
	props: ['users'],
	data() {
	return {
	headers: [
	{ title: 'ID' },
	{ title: 'Username', class: 'some-special-class' },
	{ title: 'Real Name' },
	{ title: 'Phone' },
	{ title: 'Email' },
	{ title: 'Website' }
	],
	rows: [] ,
	dtHandle: null
	}
	},
	watch: {
	users(val, oldVal) {
	let vm = this;
	vm.rows = [];
	// You should _probably_ check that this is changed data... but we'll skip that for this example.
	val.forEach(function (item) {
	// Fish out the specific column data for each item in your data set and push it to the appropriate place.
	// Basically we're just building a multi-dimensional array here. If the data is _already_ in the right format you could
	// skip this loop...
	let row = [];

	row.push(item.id);
	row.push(item.username);
	row.push(item.name);
	row.push(item.phone);
	row.push('<a href="mailto://' + item.email + '">' + item.email + '</a>');
	row.push('<a href="http://' + item.website + '" target="_blank">' + item.website + '</a>');

	vm.rows.push(row);
	});

	// Here's the magic to keeping the DataTable in sync.
	// It must be cleared, new rows added, then redrawn!
	vm.dtHandle.clear();
	vm.dtHandle.rows.add(vm.rows);
	vm.dtHandle.draw();
	}
	},
	mounted() {
	let vm = this;
	// Instantiate the datatable and store the reference to the instance in our dtHandle element.
	vm.dtHandle = $(this.$el).DataTable({
	// Specify whatever options you want, at a minimum these:
	columns: vm.headers,
	data: vm.rows,
	searching: false,
	paging: false,
	info: false
	});
	}
	});

	new Vue({
	el: '#tabledemo',
	data: {
	users: [],
	search: ''
	},
	computed: {
	filteredUsers: function () {
	let self = this
	let search = self.search.toLowerCase()
	return self.users.filter(function (user) {
	return user.username.toLowerCase().indexOf(search) !== -1 \|\|
	user.name.toLowerCase().indexOf(search) !== -1 \|\|
	user.phone.indexOf(search) !== -1 \|\|
	user.email.toLowerCase().indexOf(search) !== -1 \|\|
	user.website.toLowerCase().indexOf(search) !== -1
	})
	}
	},
	mounted() {
	let vm = this;
	$.ajax({
	url: 'https://jsonplaceholder.typicode.com/users',
	success(res) {
	vm.users = res;
	}
	});
	}
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title>Laravel CRUD</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
	</head>
	<body>
	<div id="tabledemo">
	<h3>Vue Datatable example</h3>
	Filter by anything: <input v-model="search">
	<hr>
	<data-table :users="filteredUsers"></data-table>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
	<script src="app.js"></script>
	</body>
	</html>