July 1, 2018
VueJS Grid – Advanced Data Grid Component
VueJS Grid – Advanced Data Grid Component
In this Post We Will Explain About is VueJS Grid – Advanced Data Grid Component With Example and Demo.
Welcome on infinityknow.com – Examples ,The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Simple Vuejs Grid Component – Vuejs Script
In this post we will show you Best way to implement Data Grid Control – Vuejs Data Grid Component, hear for How to Vue.JS – Advanced Data Grid Component with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
First of simple create a new This is an simple example of new creating a very reusable grid data component data and using simple it with more external dataGrid Component Example.
index.html
<script type="text/x-template" id="dropdown-template">
<div class="dropdown" v-show="show" v-bind:class="originClass" transition="dropdown">
<slot>No any data dropdown content!</slot>
</div>
</script>
<script type="text/x-template" id="datagrid-template">
<table id="{{ id }}" class="table-striped datagrid">
<thead>
<tr>
<th class="datagrid-toggle-column" v-if="data_all_sel">
<div class="toggle toggle-checkbox">
<input type="checkbox" id="allrows" name="allrows" v-model="selectAll">
<label for="allrows"></label>
</div>
</th>
<th v-for="(index, column) in columns" v-bind:style="{ width: getCellWidth(column) }">
<div class="control-group">
<div class="datagrid-header control control-fill" v-on:click="sortBy(column)">
<span>{{ column.name }}</span>
<span class="material-icons icon" v-show="sortingKey === column.key">{{ sortingDirection === 1 ? 'expand_more' : 'expand_less' }}</span>
</div>
<div class="button-group control" v-if="showOptions && index === (columns.length - 1)">
<a id="{{ id }}-options" class="icon-button">
<span class="material-icons icon">settings</span>
</a>
<dropdown v-bind:for="id + '-options'" origin="top left" v-bind:preserve-state="true">
<datagrid-options v-bind:grid-id="id" v-bind:columns="columns" v-bind:allow-selection.sync="data_all_sel" v-bind:allow-edit.sync="allowEdit" v-bind:data-filter.sync="dataFilter" v-bind:grouping-column.sync="gpcolm" v-bind:show-advanced-options="showAdvancedOptions">
</datagrid-options>
</dropdown>
</div>
</div>
</th>
</tr>
</thead>
<tbody v-for="(mygpname, all_groupdata) in data | filterBy dataFilter | orderBy sortingKey sortingDirection | groupBy gpcolm.key">
<tr v-if="all_groupdata.length === 0">
<td class="text-centre" colspan="{{ data_colspan }}"><strong>No Results</strong></td>
</tr>
<tr class="table-group-header" v-if="gpcolm">
<td colspan="{{ data_colspan }}">{{ formatData(gpcolm, mygpname) }}</td>
</tr>
<tr v-for="(index, row) in all_groupdata">
<td class="datagrid-toggle-column" v-if="data_all_sel">
<div class="toggle toggle-checkbox">
<input type="checkbox" id="{{ getControlId(mygpname, index) }}" name="{{ getControlId(mygpname, index) }}" v-bind:value="row" v-model="myrow">
<label for="{{ getControlId(mygpname, index) }}"></label>
</div>
</td>
<td v-for="column in columns">
<partial v-bind:name="getCellTemplate(column)"></partial>
</td>
</tr>
</tbody>
<tfoot v-if="showFooter">
<tr>
<td colspan="{{ data_colspan }}">
<ul class="chips">
<li class="chip chip-removable" v-show="myrow.length > 0" transition="chip">
<span class="chip-title">Selection</span>
<span class="chip-subtitle">{{ myrow.length }} rows selected</span>
<a class="chip-remove-button" v-on:click="resetSelection()"></a>
</li>
<li class="chip chip-removable" v-show="dataFilter" transition="chip">
<span class="chip-title">Filtering on</span>
<span class="chip-subtitle">{{ dataFilter }}</span>
<a class="chip-remove-button" v-on:click="resetFilter()"></a>
</li>
<li class="chip chip-removable" v-show="gpcolm" transition="chip">
<span class="chip-title">Grouping on</span>
<span class="chip-subtitle">{{ gpcolm.name }}</span>
<a class="chip-remove-button" v-on:click="total_grouping()"></a>
</li>
</ul>
</td>
</tr>
</tfoot>
</table>
</script>
<script type="text/x-template" id="datagrid-options-template">
<div class="datagrid-options">
<div class="datagrid-options-row">
<input type="search" placeholder="Filter this dataset" v-model="dataFilter" />
</div>
<div class="datagrid-options-row" v-if="showAdvancedOptions">
<div class="toggle toggle-switch">
<input type="checkbox" id="{{ gridId }}-allow-selection" name="{{ gridId }}-allow-selection" value="" v-model="data_all_sel">
<label for="{{ gridId }}-allow-selection"></label>
</div>
<label for="{{ gridId }}-allow-selection">Allow Selection</label>
<div class="toggle toggle-switch">
<input type="checkbox" id="{{ gridId }}-allow-edit" name="{{ gridId }}-allow-edit" value="" v-model="allowEdit">
<label for="{{ gridId }}-allow-edit"></label>
</div>
<label for="{{ gridId }}-allow-edit">Allow Edit</label>
</div>
<div class="table-wrapper datagrid-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">
<input type="radio" id="all" name="group-by" value="" v-model="gpcolm">
<label for="all"></label>
</div>
</td>
</tr>
<tr v-for="column in columns">
<td>{{ column.name }}</td>
<td class="text-centre">
<div class="toggle toggle-radio">
<input type="radio" id="{{ getDatactrlnm(column.key, 'grp') }}" name="group-by" v-bind:value="column" v-model="gpcolm">
<label for="{{ getDatactrlnm(column.key, 'grp') }}"></label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
<div id="index" class="container">
<section>
<h1>Vue.JS simple table Datagrid</h1>
</section>
<section>
<div class="table-wrapper">
<datagrid id="employeer-grid"
v-bind:columns="employeer.columns"
v-bind:data="employeer.data"
v-bind:show-advanced-options="true">
</datagrid>
</div>
</section>
</div>
Script.js
Vue.filter("groupBy", function(value, key) {
var data_groups = {
data: value
};
if (key) {
data_groups = {};
for (var data_in = 0; data_in < value.length; data_in++) {
var row = value[data_in];
var datacell = row[key];
if (!data_groups.hasOwnProperty(datacell)) {
data_groups[datacell] = [];
}
data_groups[datacell].push(row);
}
}
return data_groups;
});
Vue.filter("date", function(value, format) {
var date = moment(value);
if (!date.isValid()) {
return value;
}
return date.format(format);
});
Vue.component("dropdown", {
template: "#dropdown-template",
props: {
for: {
type: String,
required: true
},
origin: {
type: String,
default: "top right"
},
preserveState: {
type: Boolean,
default: false
}
},
computed: {
originClass: function() {
switch (this.origin) {
case "top left":
return "dropdown-top-left";
case "bottom left":
return "dropdown-bottom-left";
case "bottom right":
return "dropdown-bottom-right";
}
}
},
data: function() {
return {
show: false
};
},
ready: function() {
var _this = this;
var element = document.getElementById(_this.for);
var hide = function(event) {
event.stopPropagation();
if (!(_this.preserveState && _this.$el.contains(event.target))) {
_this.show = false;
document.body.removeEventListener("click", hide);
}
};
var show = function(event) {
event.preventDefault();
event.stopPropagation();
var dropdowns = [].slice.call(document.querySelectorAll(".dropdown"));
dropdowns.forEach(function(dropdown) {
dropdown.__vue__.show = false;
});
if (!_this.show) {
_this.show = true;
document.body.addEventListener("click", hide);
}
};
element.addEventListener("click", show);
}
});
Vue.component("datagridOptions", {
template: "#datagrid-options-template",
props: {
gridId: {
type: String,
required: true
},
columns: {
type: Array,
required: true
},
data_all_sel: {
type: Boolean
},
allowEdit: {
type: Boolean
},
gpcolm: {
type: Object,
required: true
},
dataFilter: {
type: String,
required: true
},
showAdvancedOptions: {
type: Boolean
}
},
methods: {
getDatactrlnm(columnKey, datasufix) {
return this.gridId + "-" + columnKey + "-" + datasufix;
}
}
});
Vue.component("datagrid", {
template: "#datagrid-template",
components: ["datagridOptions"],
props: {
id: {
type: String,
required: true
},
columns: {
type: Array,
required: true
},
data: {
type: Array
},
datacellTemplate: {
type: String,
required: false,
default: "firstgrid"
},
data_all_sel: {
type: Boolean,
required: false,
default: false
},
allowEdit: {
type: Boolean,
required: false,
default: false
},
showDefaultOptions: {
type: Boolean,
required: false,
default: true
},
showAdvancedOptions: {
type: Boolean,
required: false,
default: false
}
},
computed: {
data_colspan: function() {
return this.data_all_sel ? this.columns.length + 1 : this.columns.length;
},
showOptions: function() {
return this.showDefaultOptions || this.showAdvancedOptions;
},
showFooter: function() {
return this.dataFilter || this.gpcolm || this.myrow.length > 0;
}
},
data: function() {
return {
sortingKey: null,
sortingDirection: 1,
gpcolm: null,
dataFilter: null,
myrow: [],
selectAll: false
};
},
methods: {
getCellTemplate: function(column) {
return this.allowEdit ? "editableGridCell" : (column.template || this.datacellTemplate);
},
getCellWidth: function(column) {
if (!column.width) {
return;
}
return column.width + (isNaN(column.width) ? "" : "%");
},
getControlId: function(mygpname, index, datasufix) {
return mygpname + "-" + index + (datasufix ? "-" + datasufix : "");
},
sortBy: function(column) {
if (column.key === this.sortingKey) {
this.sortingDirection *= -1;
return;
}
this.sortingKey = column.key;
this.sortingDirection = 1;
},
groupBy: function(column) {
this.gpcolm = column;
},
resetFilter() {
this.dataFilter = null;
},
total_grouping() {
this.gpcolm = null;
},
resetSelection() {
this.myrow = [];
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.myrow = value ? [].concat(this.data) : [];
}
}
});
Vue.partial("firstgrid", "<span>{{ formatData(column, row[column.key]) }}</span>");
Vue.partial("editableGridCell", "<input type=\"text\" v-model=\"row[column.key]\" lazy>");
Vue.partial("linkedGridCell", "<a href=\"https://www.google.com?q={{ row.user_fname }}\"><partial name=\"firstgrid\"></partial></a>");
var vue = new Vue({
el: "#index",
data: {
employeer: {
columns: [{
key: "user_fname",
name: "Given Name",
template: "linkedGridCell"
}, {
key: "user_lastname",
name: "user_lastname"
}, {
key: "useremail",
name: "useremail",
width: 33
}, {
key: "date_birth",
name: "Date of Birth",
filter: {
name: "date",
args: ["DD MMMM YYYY"]
}
}],
data: [{
"ID": 0,
"user_fname": "John",
"user_lastname": "drhitesh",
"date_birth": "1986-10-03T00:00:00",
"useremail": "[email protected]",
"posttitle": "Co-Founder and CEO",
"office": "drhitesh Steel Pty Ltd"
}, {
"ID": 1,
"user_fname": "Jane",
"user_lastname": "drhitesh",
"date_birth": "1988-05-28T00:00:00",
"useremail": "[email protected]",
"posttitle": "Co-Founder and CEO",
"office": "drhitesh Steel Pty Ltd"
}, {
"ID": 2,
"user_fname": "Richard",
"user_lastname": "Swanston",
"date_birth": "1972-08-15T00:00:00",
"useremail": "[email protected]",
"posttitle": "Purchasing manager",
"office": "Cortana Mining Co"
}, {
"ID": 3,
"user_fname": "Robert",
"user_lastname": "Brown",
"date_birth": "1968-01-18T00:00:00",
"useremail": "[email protected]",
"posttitle": "Sales Manager",
"office": "Powerhouse Marketing"
}, {
"ID": 4,
"user_fname": "Phillip",
"user_lastname": "Zucco",
"date_birth": "2018-06-28T00:00:00",
"useremail": "[email protected]",
"posttitle": "Applications Developer",
"office": "Workplace Pty Ltd"
}, {
"ID": 5,
"user_fname": "arti",
"user_lastname": "arti",
"date_birth": "2018-07-27T00:00:00",
"useremail": "[email protected]",
"posttitle": "arti manager",
"office": "mayur Industries Ltd."
}, {
"ID": 6,
"user_fname": "dwplak",
"user_lastname": "O'Reilly",
"date_birth": "2018-08-15T00:00:00",
"useremail": "[email protected]",
"posttitle": "Workplace Health and Safety manager",
"office": "lorial office"
}]
}
}
});
I hope you have Got TreeGrid: Vuejs table, grid, tree view or Gantt chart 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.
AngularJS Modal Popup open and close from controller
AngularJS Custom Directives example – Angular Directives
