VueJS Datagrid – Sorting Filtering Paging Grouping Example

VueJS Datagrid – Sorting Filtering Paging Grouping Example

List of Features Vuejs Datagrid

Vuejs using Sorting all the data(Click column header)
Vuejs using Grouping all the data(Use the advanced options)
Vuejs using Filtering Data
Vuejs using Toggle All the cell editing
Vuejs using Toggle All row selection
Vuejs using Custom cell templates dynemically(override default for new line whole grid table or just a new specific column)
Vuejs using Custom data filters for cell or row content
“VueJS Datagrid – Sorting Filtering Paging Grouping Example”

Vue.JS – Advanced Data Grid Component Example – VueJS Datagrid

Include Libs.

[php]
https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,600italic,700
https://fonts.googleapis.com/icon?family=Material+Icons
css/style.css
https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js
moment.js/2.12.0/moment.min.js
js/index.js
[/php]

Vuejs Template 1

[php]

[/php]

Vuejs Template 2

[php]

[/php]

Vuejs Template 3

[php]

[/php]

index.html

[php]

[/php]

index.js

[php]
Vue.filter(“groupBy”, function(value, key) {
var packet = {
data: value
};

if (key) {
packet = {};
for (var i = 0; i 0;
}

},
data: function() {

return {
sortingKey: null,
sortingDirection: 1,
groupingColumn: null,
dataFilter: null,
selectedRows: [],
selectAll: false
};

},
methods: {

getCellTemplate: function(column) {
return this.allowEdit ? “editableGridCell” : (column.template || this.cellTemplate);
},

getCellWidth: function(column) {
if (!column.width) {
return;
}

return column.width + (isNaN(column.width) ? “” : “%”);
},

getControlId: function(groupName, index, suffix) {
return groupName + “-” + index + (suffix ? “-” + suffix : “”);
},

sortBy: function(column) {
if (column.key === this.sortingKey) {
this.sortingDirection *= -1;
return;
}

this.sortingKey = column.key;
this.sortingDirection = 1;
},

groupBy: function(column) {
this.groupingColumn = column;
},

resetFilter() {
this.dataFilter = null;
},

resetGrouping() {
this.groupingColumn = null;
},

resetSelection() {
this.selectedRows = [];
this.selectAll = false;
},

formatData: function(column, value) {
if (column.hasOwnProperty(“filter”)) {
var filter = Vue.filter(column.filter.name);
var args = [].concat(value, column.filter.args);
return filter.apply(this, args);
}
return value;
}
},
watch: {

“selectAll”: function(value) {
this.selectedRows = value ? [].concat(this.data) : [];
}

}
});

Vue.partial(“defaultGridCell”, “{{ formatData(column, row[column.key]) }}“);
Vue.partial(“editableGridCell”, “”);
Vue.partial(“linkedGridCell”, ““);

var vue = new Vue({
el: “#index”,
data: {
customers: {
students: [{
key: “PostName”,
name: “Given Name”,
template: “linkedGridCell”
}, {
key: “webtutorial”,
name: “webtutorial”
}, {
key: “Email”,
name: “Email”,
width: 33
}, {
key: “PostDate”,
name: “Date of Birth”,
filter: {
name: “date”,
args: [“DD MMMM YYYY”]
}
}],
data: [{
“ID”: 0,
“PostName”: “John”,
“webtutorial”: “Smith”,
“PostDate”: “2017-10-03T00:00:00”,
“Email”: “[email protected]”,
“webTitle”: “Co-Founder and CEO”,
“website”: “Smith Steel Pty Ltd”
}, {
“ID”: 1,
“PostName”: “deep”,
“webtutorial”: “Smith”,
“PostDate”: “2018-05-28T00:00:00”,
“Email”: “[email protected]”,
“webTitle”: “Co-Founder and CEO”,
“website”: “Smith Steel Pty Ltd”
}, {
“ID”: 2,
“PostName”: “Richard”,
“webtutorial”: “Swanston”,
“PostDate”: “1972-08-15T00:00:00”,
“Email”: “[email protected]”,
“webTitle”: “Purchasing Officer”,
“website”: “Cortana Mining Co”
}, {
“ID”: 3,
“PostName”: “Robert”,
“webtutorial”: “Brown”,
“PostDate”: “2016-01-18T00:00:00”,
“Email”: “[email protected]”,
“webTitle”: “email Manager”,
“website”: “dreams Marketing”
}, {
“ID”: 4,
“PostName”: “kankot”,
“webtutorial”: “laro”,
“PostDate”: “1991-06-28T00:00:00”,
“Email”: “[email protected]”,
“webTitle”: “web Developer”,
“website”: “arith Pty Ltd”
}, {
“ID”: 5,
“PostName”: “kali”,
“webtutorial”: “Caldwell”,
“PostDate”: “2018-07-27T00:00:00”,
“Email”: “[email protected]”,
“webTitle”: “old Officer”,
“website”: “mynew Industries Ltd.”
}, {
“ID”: 6,
“PostName”: “Rachael”,
“webtutorial”: “O’pinch”,
“PostDate”: “2015-08-15T00:00:00”,
“Email”: “[email protected]”,
“webTitle”: “depl jamana and nags Officer”,
“website”: “Energy website”
}]
}
}
});
[/php]

Example