diff --git a/dev/app.vue b/dev/app.vue
index 5445bbb8..83883086 100644
--- a/dev/app.vue
+++ b/dev/app.vue
@@ -1,85 +1,154 @@
 <template lang="jade">
-    .row
-      .col-md-6
-        vue-form-generator(:schema='schema', :model='model', :options='formOptions')
-      .col-md-6
-        pre(v-if='model') {{{ model | prettyJSON }}}   
+		.row
+			.col-md-10.col-md-offset-1
+				data-table(:rows="rows", :selected="selected", :select="selectRow")
+
+		.row(v-if="model")
+			.col-md-6
+				.buttons.text-center
+					button.btn.btn-default.new(@click="newModel") New
+					button.btn.btn-primary.save(@click="saveModel") Save
+					button.btn.btn-danger.delete(@click="deleteModel") Delete
+
+				vue-form-generator(:schema='schema', :model='model', :options='formOptions', :multiple="selected.length > 1", v-ref:form, :is-new-model="isNewModel")
+
+
+			.col-md-6
+				pre(v-if='model') {{{ model | prettyJSON }}}   
 
 </template>
 
 <script>
 	import Vue from "vue";
 	import VueFormGenerator from "../src";
+	import DataTable from "./dataTable.vue";
+
 	import Schema from "./schema";
+	import { users } from "./data";
+	import { filters } from "./utils";
+
+	import {each, isFunction, cloneDeep, merge} from 'lodash';	
 
 	export default {
 		components: {
-			"VueFormGenerator": VueFormGenerator.component
+			"VueFormGenerator": VueFormGenerator.component,
+			DataTable
 		},
 
-		filters: {
-			prettyJSON: function(json) {
-				if (json) {
-					json = JSON.stringify(json, undefined, 4);
-					json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
-					return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
-						var cls = 'number';
-						if (/^"/.test(match)) {
-							if (/:$/.test(match)) {
-								cls = 'key';
-							} else {
-								cls = 'string';
-							}
-						} else if (/true|false/.test(match)) {
-							cls = 'boolean';
-						} else if (/null/.test(match)) {
-							cls = 'null';
-						}
-						return '<span class="' + cls + '">' + match + '</span>';
-					});
-				}
-			}
-		},
+		filters: filters,
 
 		data() {
 			return {
-				model: {
-					id: 1,
-					name: "John Doe",
-					type: "personal",
-					password: "J0hnD03!x4",
-					skills: [
-						"Javascript",
-						"VueJS"
-					],
-					email: "john.doe@gmail.com",
-					language: "en-GB",
-					age: 35,
-					dob: 348966000000,
-					rank: 6,
-					address: {
-						country: "United Kingdom",
-						city: "London",
-						street: "SW1A 5 Parliament St",
-						geo: {
-							lat: 51.501015, 
-							lng: -0.126005
-						}
-					},
-					role: "admin",
-					created: 1461834815864,
-					bio: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non lacus porttitor, pellentesque odio sit amet, hendrerit felis. In turpis mauris, viverra a lacinia nec, fringilla ut nisi. Curabitur rutrum mattis risus, at dapibus nisl tempus et. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus eget elementum lorem. Pellentesque tempor nec ante ut molestie. Suspendisse imperdiet tempus hendrerit. Morbi a dignissim augue.",
-					status: true,
-
-				},
+				isNewModel: false, 
+
+				selected: [],
+
+				model: null,
+
+				rows: users,
 
 				schema: Schema,
 
 				formOptions: {
 					validateAfterLoad: true,
-					validateAfterChanged: true
+					validateAfterChanged: true,
+					validateBeforeSave: true
+				}
+			}
+		},
+
+		methods: {
+			selectRow(event, row, add) {
+				if ( (add || (event && event.ctrlKey))) {
+					if (this.selected.indexOf(row) != -1)
+						this.selected.$remove(row);
+					else
+						this.selected.push(row);
+				} else {
+					this.clearSelection();
+					this.selected.push(row);
+				}
+				this.generateModel();
+			},
+
+			clearSelection() {
+				this.selected.splice(0);
+				this.generateModel();
+			},			
+
+			generateModel() {
+				if (this.selected.length == 1) {
+					this.model = cloneDeep(this.selected[0]);
 				}
+				else if (this.selected.length > 1) {
+					this.model = VueFormGenerator.schema.mergeMultiObjectFields(Schema, this.selected);
+				}
+				else
+					this.model = null;				
+			},
+
+			newModel() {
+				console.log("Create new model...");
+				this.selected.splice(0);
+				let newRow = VueFormGenerator.schema.createDefaultObject(Schema, { id: this.getNextID() })
+				this.isNewModel = true;
+				this.model = newRow;
+
+				let el = document.querySelector("div.form input:nth-child(1):not([readonly]):not(:disabled)");
+				if (el)
+					el.focus()
+
+			},			
+
+			saveModel() {
+				console.log("Save model...");
+				if (this.formOptions.validateBeforeSave === false ||  this.validate()) {
+					this.mergeModelValues();
+
+					if (this.isNewModel) {
+						this.rows.push(this.model);
+						this.selectRow(null, this.model, false);
+					}
+
+				} else {
+					// Validation error
+				}
+			},
+
+			mergeModelValues() {
+				let model = this.model;
+				if (model && this.selected.length > 0) {
+					each(this.selected, (row) => {
+						merge(row, model);
+					});
+				}
+			},
+
+			deleteModel() {
+				if (this.selected.length > 0) {
+					each(this.selected, (row) => {
+						this.rows.$remove(row);
+					})
+					this.clearSelection();
+				}
+			},
+
+			getNextID() {
+				let id = 0;
+
+				each(this.rows, (row) => {
+					if (row.id > id)
+						id = row.id;
+				});
+
+				return ++id;
+			},
+
+			validate()	{
+				return this.$refs.form.validate();
 			}
+
+			 
 		},
 		
 		ready() {
@@ -95,7 +164,7 @@
 
 	html {
 		font-family: "Open Sans";
-        font-size: 14px;
+				font-size: 14px;
 	}
 
 	* {
@@ -104,14 +173,14 @@
 		box-sizing: border-box;
 	}
 
-      pre {
-        overflow: auto;
-        
-        .string { color: #885800; }
-        .number { color: blue; }
-        .boolean { color: magenta; }
-        .null { color: red; }
-        .key { color: green; }    	
-      }
+	pre {
+		overflow: auto;
+		
+		.string { color: #885800; }
+		.number { color: blue; }
+		.boolean { color: magenta; }
+		.null { color: red; }
+		.key { color: green; }    	
+	}
 
 </style>
\ No newline at end of file
diff --git a/dev/data.js b/dev/data.js
new file mode 100644
index 00000000..ca8e97a1
--- /dev/null
+++ b/dev/data.js
@@ -0,0 +1,74 @@
+import faker from 'faker';
+import moment from 'moment';
+
+module.exports = {
+	roles: [
+		{ id: "admin", name: "Administrator"},
+		{ id: "moderator", name: "Moderator"},
+		{ id: "user", name: "Registered User"},
+		{ id: "visitor", name: "Visitor"}
+	],
+
+	skills: [ "HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS" ],
+
+	users: (function() {
+		let res = [];
+		for (let i = 0; i < 5; i++) {
+			let lang = faker.helpers.randomize(['en-US', 'en-GB', 'de', 'fr', 'it']);
+			//faker.locale = lang;
+			let user = faker.helpers.createCard();
+			user.id = i + 1;
+			user.type = faker.helpers.randomize(["personal", "business"]);
+			user.password = faker.internet.password(10);
+			user.bio = faker.lorem.paragraph();
+			let dob = faker.date.past(40, "1998-01-01");
+			user.dob = dob.valueOf();
+			user.age = moment().year() - moment(dob).year();
+			user.rank = faker.random.number({
+				min: 1,
+				max: 10
+			});
+			user.role = faker.helpers.randomize(module.exports.roles).id;
+
+
+			user.skills = [];
+			user.skills.push(faker.helpers.randomize(module.exports.skills));
+			user.skills.push(faker.helpers.randomize(module.exports.skills));
+
+			user.language = lang;
+			user.status = faker.helpers.randomize([true, false, true]);
+			user.created = faker.date.recent(30).valueOf();
+
+			if (user.type == "business") {
+				user.company = {
+					"name": faker.company.companyName(),
+					"catchPhrase": faker.company.catchPhrase(),
+					"bs": faker.company.bs(),
+					"website": faker.internet.domainName(),
+					"phone": faker.phone.phoneNumber(),
+					"address": {
+						"street": faker.address.streetAddress(),
+						"city": faker.address.city(),
+						"country": faker.address.country(),
+						"zipcode": faker.address.zipCode(),
+						"geo": {
+							"lat": faker.address.latitude(),
+							"lng": faker.address.longitude()
+						}
+					}
+
+				}
+			} else {
+				user.company = undefined;
+			}
+
+			user.posts = undefined;
+			user.accountHistory = undefined;
+
+			res.push(user);
+			console.log(user);
+		}
+		//console.log(res);
+		return res;
+	})()
+}
diff --git a/dev/dataTable.vue b/dev/dataTable.vue
new file mode 100644
index 00000000..a155d1d7
--- /dev/null
+++ b/dev/dataTable.vue
@@ -0,0 +1,48 @@
+<template lang="jade">
+	table.table.table-hover.table-bordered
+		thead
+			tr
+				th ID
+				th Name
+				th E-mail
+				th Country
+
+		tbody
+			tr(v-for="row in rows", @click="select($event, row)", :class="{ active: isSelected(row) }")
+				td {{ row.id }}
+				td {{ row.name }}
+				td {{ row.email }}
+				td {{ row.address.country }}
+</template>
+
+<script>
+	import Vue from "vue";
+	import VueFormGenerator from "../src";
+	import Schema from "./schema";
+	import { users } from "./data";
+
+	export default {
+		props: [
+			"rows",
+			"selected",
+			"select"
+		],
+
+		methods: {
+			isSelected(row) {
+				return this.selected.indexOf(row) != -1;
+			}			
+		}
+	}
+</script>
+
+<style lang="sass" scoped>
+
+
+	.table {
+		tr {
+			cursor: pointer;
+		}
+	}
+
+</style>
\ No newline at end of file
diff --git a/dev/index.html b/dev/index.html
index 2c164995..99e99857 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -15,7 +15,8 @@
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
   </head>
   <body>
-    <app class="container-fluid"></app>
+    <div class="container-fluid"></div>
+    <app></app>
   	<script src="/app.js"></script>
   </body>
 </html>
diff --git a/dev/schema.js b/dev/schema.js
index 9e7b1d08..90950615 100644
--- a/dev/schema.js
+++ b/dev/schema.js
@@ -1,4 +1,5 @@
 import moment from "moment";
+import faker from "faker";
 import {} from "lodash";
 
 import { validators } from "../src";
@@ -76,7 +77,7 @@ module.exports = {
 				"CoffeeScript",
 				"AngularJS",
 				"ReactJS",
-				"VueJS",
+				"VueJS"
 			]
 		},	
 		{
@@ -174,19 +175,19 @@ module.exports = {
 			default: "en_GB"
 		},
 		{
-			type: "select",
+			type: "selectEx",
 			label: "Country",
 			model: "address.country",
 			multi: true,
 			required: true,
-			values: [
-				"France",
-				"United Kingdom",
-				"United States of America",
-				"Germany",
-				"Italiy"
-			],
-			default: "United Kingdom"
+			values: faker.definitions.address.country,
+			default: "United Kingdom",
+			multiSelect: false,
+			selectOptions: {
+				// https://silviomoreto.github.io/bootstrap-select/options/
+				liveSearch: true,
+				size: 10
+			}
 		},
 		{
 			type: "text",
diff --git a/dev/utils.js b/dev/utils.js
new file mode 100644
index 00000000..1413d0ad
--- /dev/null
+++ b/dev/utils.js
@@ -0,0 +1,27 @@
+module.exports = {
+	
+	filters: {
+		prettyJSON: function(json) {
+			if (json) {
+				json = JSON.stringify(json, undefined, 4);
+				json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+				return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+					var cls = 'number';
+					if (/^"/.test(match)) {
+						if (/:$/.test(match)) {
+							cls = 'key';
+						} else {
+							cls = 'string';
+						}
+					} else if (/true|false/.test(match)) {
+						cls = 'boolean';
+					} else if (/null/.test(match)) {
+						cls = 'null';
+					}
+					return '<span class="' + cls + '">' + match + '</span>';
+				});
+			}
+		}
+
+	}
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 4304d8b1..fe6d83e8 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "babel-preset-stage-0": "6.5.0",
     "babel-runtime": "5.8.38",
     "css-loader": "0.23.1",
+    "faker": "3.1.0",
     "jade": "1.11.0",
     "jade-loader": "0.8.0",
     "lodash": "4.11.1",