using Vue.js & DataTable(jquery plugin)

Question

i'm new in Vue.js and DataTable and i hope some of you have the experience with their integration.. can somebody say for sure that its a good way to integrate Vue.js & DataTable(jquery plugin)? it's works just fine but i want to be sure it's the right way... thanks :)

	var app = new Vue({

	    el: '#root',

		data(){
		    return{
                employees: [
                    {
                        Name: 'Tiger Nixon',
                        Position: 'System Architect',
                        Office: 'tokyo',
                        Age: '61',
                        StartDate: '2011/04/25',
                        Salary: '$320,800',
                    },
                ],
                name: '',
                position: '',
                office: '',
                age: '',
                startDate: '',
                salary: '',
                dataTable: null
            }
		},

		methods: {
		    addEmployee(){
			  this.dataTable.row.add([
			      this.name,
			      this.position,
			      this.office,
			      this.age,
			      this.startDate,
			      this.salary,
			  ]).draw(false);
		    }
		},

		mounted(){
		    this.dataTable = $('#data_table').DataTable({

		    });
		}


	})

#root{
  text-align: center;
}

.btn{
  margin-bottom: 30px;
}

<div id="root" class="container">
	<form class="form-inline">
		<div class="form-group">
			<label for="name">Name:</label><br>
			<input type="text" v-model="name" class="form-control" id="name">
		</div>
		<div class="form-group">
			<label for="position">Position</label><br>
			<input type="text" v-model="position" class="form-control" id="position">
		</div>
		<div class="form-group">
			<label for="office">Office</label><br>
			<input type="text" v-model="office" class="form-control" id="office">
		</div>
		<div class="form-group">
			<label for="age">Age</label><br>
			<input type="text" v-model="age" class="form-control" id="age">
		</div>
		<div class="form-group">
			<label for="Start_date">Start Date</label><br>
			<input type="text" v-model="startDate" class="form-control" id="start_date">
		</div>
		<div class="form-group">
			<label for="salary">Salary</label><br>
			<input type="text" v-model="salary" class="form-control" id="salary">
		</div><br><br>
		<button type="button" @click="addEmployee" class="btn btn-primary">Submit</button>
	</form>
	<table id="data_table" class="display" cellspacing="0" width="100%">
		<thead>
		<tr>
			<th>Name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start Date</th>
			<th>Salary</th>
		</tr>
		</thead>
		<tbody>
		<tr v-for="employee in employees">
			<td>{{ employee.Name }}</td>
			<td>{{ employee.Position }}</td>
			<td>{{ employee.Office }}</td>
			<td>{{ employee.Age }}</td>
			<td>{{ employee.StartDate }}</td>
			<td>{{ employee.Salary }}</td>
		</tr>
		</tbody>
	</table>
</div>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

Solution 1

I prefer alternatives for tables with vuejs. One of them is the component from ratiw https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/README.md

Pretty quick to start with and integrates easily with bootstrap or semantic ui framework. Also has very nicely customizable sort fields and search as well getting data from an api but that part needs specific data response format from your api and unless you don't have much control over that it's harder to implemented pagination for example.

Another option is https://github.com/matfish2/vue-tables-2. I found this one harder to start with because it needs some jsx setup but it's structured better than the first one above.

UPDATE: vue-tables-2 is now served precompiled and does not require any transforms or loaders

Honestly I would prefer one of the options from above or if you find another one in form of a component on awesome-vue (a list of vue components on github). By using such custom components you get rid of 2 libraries (jquery and datatables) and they play nicely with the reactive nature of vue.

Unless you don't need pdf exports, stylesheet exports or fancy print stuff, then I don't see why you should use datatables.

Solution 2

I have worked to rebuild the DataTable jQuery plugin using only VueJS. So far, my project, VueDataTable, has the following features:

• multiple column sorting
• search filter
• pagination
• entry length options
• customization text
• language support for English, Portuguese, and Spanish

You can install it with npm. For more information, please check that out on Github and on demo projects (demo1, and demo2)

I hope this will help you or someone else. Actually, I came here to this question a couple of weeks ago, and then, after not finding a good solution, I decided to create VueDataTable.

Comments

[Koby Biton]

thanks for the answer, but i do need to export files(excel etc) and the documentation and tools of jQuery DataTable is larger by far then any other library or framework, so i would really like to integrate Vue.js with jQuery DataTable for the advanced component technology of Vue and the powerful jQuery DataTable for using high quality of table features.. the answer i'm looking for is confirmation for my Vue.js & DataTable(jquery plugin) example above and some good implementation advices... thanks :)

[Cristi Jora]

It seems fine to me so far. As long as it's straight forward and easy to understand it's perfectly fine. I would suggest a couple of adjustments regarding the finding of the table. Either use $refs instead of id's or generate some unique id (e.g current date) this.tableId=new Date().getTime().toString()in the created hook and have <table :id="tableId"> This will assure that you can have as many tables as you wish per page without having id selection issues. Also you have to deal with updates/edits. Other than that seems fine to me

[Raj]

Hey! Thanks for your project! I always have concerns about integrating libraries that are only maintained by a single person, because they often get abandoned eventually. Can I ask how regular updates to the DataTables.net library will be incorporated into your port? Is there a streamlined process to do this or does it take a lot of manual labor to accomplish?