Vuejs UI Grid Component Sorting Filtering Paging Grouping

Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs UI Grid Component Sorting Filtering Paging Grouping

In this post we will show you Best way to implement Displaying data using the Vuejs v-grid Examples, hear for How to Vuejs UI Grid Example – step by step with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

index.html

[php]

[/php]

index.js

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

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

},
data: function() {

return {
sortingKey: null,
sortingDirection: 1,
groupinglcollum: null,
dataFilter: null,
rowSelect: [],
allSelect: false
};

},
methods: {

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

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

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

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

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

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

groupBy: function(lcollum) {
this.groupinglcollum = lcollum;
},

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

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

resetSelection() {
this.rowSelect = [];
this.allSelect = false;
},

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

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

}
});

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

var vue = new Vue({
el: “#index”,
data: {
employers: {
rowlcollums: [{
key: “firstname”,
name: “Given Name”,
template: “linkedGridCell”
}, {
key: “lastname”,
name: “lastname”
}, {
key: “Email”,
name: “Email”,
width: 33
}, {
key: “birthdate”,
name: “Date of Birth”,
filter: {
name: “date”,
largedata: [“DD MMMM YYYY”]
}
}],
data: [{
“ID”: 0,
“firstname”: “John”,
“lastname”: “live24u”,
“birthdate”: “1986-10-03T00:00:00”,
“Email”: “john.live24u@live24usteel.com”,
“schoolName”: “Co-Founder and CEO”,
“school”: “live24u Steel Pty Ltd”
}, {
“ID”: 1,
“firstname”: “Jane”,
“lastname”: “live24u”,
“birthdate”: “1988-05-28T00:00:00”,
“Email”: “jane.live24u@live24usteel.com”,
“schoolName”: “Co-live24u and CEO”,
“school”: “dhara Steel dimple Ltd”
}, {
“ID”: 2,
“firstname”: “manshu”,
“lastname”: “rajkot”,
“birthdate”: “1972-08-15T00:00:00”,
“Email”: “dibanjs@telco.com”,
“schoolName”: “Purchasing Officer”,
“school”: “bahavana Mining Co”
}, {
“ID”: 3,
“firstname”: “Robert”,
“lastname”: “dhamsha”,
“birthdate”: “1992-01-18T00:00:00”,
“Email”: “robbrown@othertelco.com”,
“schoolName”: “Sales Manager”,
“school”: “Powerhouse Marketing”
}, {
“ID”: 4,
“firstname”: “Phillip”,
“lastname”: “Zucco”,
“birthdate”: “1992-06-28T00:00:00”,
“Email”: “phil.zucco@workplace.com”,
“schoolName”: “crative Developer”,
“school”: “Workplace simple Ltd”
}, {
“ID”: 5,
“firstname”: “James”,
“lastname”: “sejal”,
“birthdate”: “1975-07-27T00:00:00”,
“Email”: “james.sejal@livedata.com”,
“schoolName”: “jakkas Officer”,
“school”: “livedata Industries Ltd.”
}, {
“ID”: 6,
“firstname”: “Rachael”,
“lastname”: “O’Reilly”,
“birthdate”: “1972-08-15T00:00:00”,
“Email”: “roreilly@divyabharti.com”,
“schoolName”: “Workplace Health and Safety Officer”,
“school”: “divyabharti school”
}]
}
}
});
[/php]

Example

I hope you have Got Vuejs UI Grid Sorting Filtering Paging Grouping Example And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.