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.
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
Vuejs Template 1
<div class="dropdown"> No any dropdown content! </div>
Vuejs Template 2
<table id="{{ id }}" class="table contentgrid">
<thead>
<tr>
<th class="contentgrid-toggle-column">
<div class="toggle toggle-checkbox">
<label for="allrows"></label>
</div>
</th>
<th>
<div class="control-group">
<div class="contentgrid-header control control-fill">
<span>{{ column.name }}</span>
<span class="material-icons icon">{{ sortingDirection === 1 ? 'expand_more' : 'expand_less' }}</span>
</div>
<div class="button-group control">
<a id="{{ id }}-options" class="icon-button">
<span class="material-icons icon">settings</span>
</a>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-centre" colspan="{{ studentspan }}"><strong>No Results</strong></td>
</tr>
<tr class="table-group-header">
<td colspan="{{ studentspan }}">{{ formatData(groupingColumn, groupName) }}</td>
</tr>
<tr>
<td class="contentgrid-toggle-column">
<div class="toggle toggle-checkbox">
<label for="{{ getControlId(groupName, index) }}"></label>
</div>
</td>
<td>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="{{ studentspan }}">
<ul class="chips">
<li class="chip chip-removable"> 0" transition="chip">
<span class="chip-title">Selection</span>
<span class="chip-subtitle">{{ selectedRows.length }} rows selected</span>
<a class="chip-remove-button"></a>
</li>
<li class="chip chip-removable">
<span class="chip-title">Filtering on</span>
<span class="chip-subtitle">{{ dataFilter }}</span>
<a class="chip-remove-button"></a>
</li>
<li class="chip chip-removable">
<span class="chip-title">Grouping on</span>
<span class="chip-subtitle">{{ groupingColumn.name }}</span>
<a class="chip-remove-button"></a>
</li>
</ul>
</td>
</tr>
</tfoot>
</table>
Vuejs Template 3
<div class="contentgrid-options">
<div class="contentgrid-options-row">
</div>
<div class="contentgrid-options-row">
<div class="toggle toggle-switch">
<label for="{{ gridId }}-allow-selection"></label>
</div>
<label for="{{ gridId }}-allow-selection">Allow Selection</label>
<div class="toggle toggle-switch">
<label for="{{ gridId }}-allow-edit"></label>
</div>
<label for="{{ gridId }}-allow-edit">Allow Edit</label>
</div>
<div class="table-wrapper contentgrid-options-row">
<table>
<thead>
<tr>
<th>Column</th>
<th>Group By</th>
</tr>
</thead>
<tbody>
<tr>
<td>All</td>
<td class="text-centre">
<div class="toggle toggle-radio">
<label for="all"></label>
</div>
</td>
</tr>
<tr>
<td>{{ column.name }}</td>
<td class="text-centre">
<div class="toggle toggle-radio">
<label for="{{ getControlName(column.key, 'grp') }}"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
index.html
<div id="index" class="container">
<section>
<div class="table-wrapper">
</div>
</section>
</div>
index.js
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", "<span>{{ formatData(column, row[column.key]) }}</span>");
Vue.partial("editableGridCell", "");
Vue.partial("linkedGridCell", "<a href="http://www.google.com?q={{ row.PostName }}"></a>");
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"
}]
}
}
});
