⚡ Impove example

Author: icebob

dev/app.vue

@@ -40,9 +40,10 @@
 
 	import {each, isFunction, cloneDeep, merge} from 'lodash';	
 
+	Vue.use(VueFormGenerator);
+
 	export default {
 		components: {
-			"VueFormGenerator": VueFormGenerator.component,
 			DataTable
 		},
 

dev/dataTable.vue

@@ -6,22 +6,29 @@
 				th Name
 				th E-mail
 				th Country
+				th Role
+				th Status
 
 		tbody
 			tr(v-for="row in rows", @click="select($event, row)", :class="{ active: isSelected(row) }")
 				td {{ row.id }}
 				td 
+					img(:src="row.avatar") 
 					| {{ row.name }} 
 					.label.label-warning(v-if="!row.status") Inactive
 				td {{ row.email }}
 				td {{ row.address.country }}
+				td {{ getRoleName(row) }}
+				td 
+					i.fa(:class=" row.status? 'fa-check' : 'fa-ban' ")
 </template>
 
 <script>
 	import Vue from "vue";
 	import VueFormGenerator from "../src";
 	import Schema from "./schema";
-	import { users } from "./data";
+	import { find } from "lodash";
+	import { users, roles } from "./data";
 
 	export default {
 		props: [
@@ -33,7 +40,12 @@
 		methods: {
 			isSelected(row) {
 				return this.selected.indexOf(row) != -1;
-			}			
+			},
+
+			getRoleName(row) {
+				let role = find(roles, role => role.id == row.role);
+				return role ? role.name : "";
+			}
 		}
 	}
 </script>
@@ -44,6 +56,15 @@
 	.table {
 		tr {
 			cursor: pointer;
+
+			td {
+				img {
+					width: 32px;
+					height: 32px;
+					border-radius: 100%;
+					margin-right: 0.4em;
+				}
+			}
 		}
 	}