diff --git a/package-lock.json b/package-lock.json
index 69fb3fc6..c8ac612d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6427,6 +6427,14 @@
         "is-object": "^1.0.1"
       }
     },
+    "jexcel": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/jexcel/-/jexcel-3.9.1.tgz",
+      "integrity": "sha512-/jzt+pNHzoOxCYzmNMIvBY75xLnN0ppgVgVmyPIgngbLLzje3f2bLQUW1ZXD9dnPRcWfB6WeIntlQZ5l5YfxKQ==",
+      "requires": {
+        "jsuites": "^2.7.1"
+      }
+    },
     "jquery": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
@@ -6557,6 +6565,11 @@
         "verror": "1.10.0"
       }
     },
+    "jsuites": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/jsuites/-/jsuites-2.7.1.tgz",
+      "integrity": "sha512-gvnw8RUNrVIqVZyPXc7/O/H7ZQHiuZJcDRQ6RSaOweEcZWMV1NzKX9Ut3nWJN06Sf02tUN3rvS1kLFjDXyrnww=="
+    },
     "karma": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/karma/-/karma-1.7.1.tgz",
diff --git a/package.json b/package.json
index 424287af..2720c681 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "faker": "^3.1.0",
     "hideseek": "^0.7.0",
     "http-server": "^0.9.0",
+    "jexcel": "^3.9.1",
     "jquery": "^2.2.2",
     "moment": "^2.12.0",
     "vue": "^2.2.2",
diff --git a/src/components/views/Excel.vue b/src/components/views/Excel.vue
new file mode 100644
index 00000000..791ec90d
--- /dev/null
+++ b/src/components/views/Excel.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <div id="app" ref="spreadsheet"></div>
+    <div><input type="button" value="Add new row" @click="() => spreadsheet.insertRow()" /></div>
+  </div>
+</template>
+
+<script>
+import jexcel from 'jexcel'
+import 'jexcel/dist/jexcel.css'
+var data = [
+  ['Jazz', 'Honda', '2019-02-12', '', true, '$ 2.000,00', '#777700'],
+  ['Civic', 'Honda', '2018-07-11', '', true, '$ 4.000,01', '#007777']
+]
+var options = {
+  data: data,
+  allowToolbar: true,
+  columns: [
+    { type: 'text', title: 'Car', width: '120px' },
+    { type: 'dropdown', title: 'Make', width: '250px', source: [ 'Alfa Romeo', 'Audi', 'Bmw' ] },
+    { type: 'calendar', title: 'Available', width: '250px' },
+    { type: 'image', title: 'Photo', width: '120px' },
+    { type: 'checkbox', title: 'Stock', width: '80px' },
+    { type: 'numeric', title: 'Price', width: '100px', mask: '$ #.##,00', decimal: ',' },
+    { type: 'color', width: '100px', render: 'square' }
+  ]
+}
+export default {
+  name: 'App',
+  mounted: function () {
+    let spreadsheet = jexcel(this.$el, options)
+    Object.assign(this, { spreadsheet })
+  }
+}
+</script>
diff --git a/src/routes.js b/src/routes.js
index 8192e253..d737a4e2 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -10,6 +10,7 @@ import SettingView from './components/views/Setting.vue'
 import AccessView from './components/views/Access.vue'
 import ServerView from './components/views/Server.vue'
 import ReposView from './components/views/Repos.vue'
+import ExcelView from './components/views/Excel.vue'
 
 // Routes
 const routes = [
@@ -57,6 +58,11 @@ const routes = [
         component: ReposView,
         name: 'Repository',
         meta: {description: 'List of popular javascript repos'}
+      }, {
+        path: 'excel',
+        component: ExcelView,
+        name: 'Excel',
+        meta: {description: 'Excel'}
       }
     ]
   }, {