Make table render

2 files changed, 25 insertions, 4 deletions

diff --git a/app/assets/javascripts/blob/xlsx/index.js b/app/assets/javascripts/blob/xlsx/index.js
index fb823e639de..b48a0b6855f 100644
--- a/app/assets/javascripts/blob/xlsx/index.js
+++ b/app/assets/javascripts/blob/xlsx/index.js
@@ -1,3 +1,4 @@
+import Vue from 'vue'
 import xlsx from 'xlsx'
 
 export default class XlsxViewer {
@@ -61,8 +62,18 @@ export default class XlsxViewer {
     // opts.on.wb(wb, sheetidx);
     var sheet = wb.SheetNames[sheetidx || 1];
     var json = this.toJson(wb)[sheet], cols = this.getColumns(wb.Sheets[sheet]);
-    // opts.on.sheet(json, cols, wb.SheetNames, chooseSheet);
-    console.log(sheet)
-    console.log(json)
+    this.loadVue(sheet, json)
+  }
+
+  loadVue(sheet, json) {
+    this.vue = new Vue({
+      el: this.el,
+      data() {
+        return {
+          sheet: sheet,
+          rows: json
+        }
+      }
+    });
   }
 }
\ No newline at end of file
diff --git a/app/views/projects/blob/_xlsx.html.haml b/app/views/projects/blob/_xlsx.html.haml
index b06a9abf6b4..15bbd97910e 100644
--- a/app/views/projects/blob/_xlsx.html.haml
+++ b/app/views/projects/blob/_xlsx.html.haml
@@ -1,4 +1,14 @@
 - content_for :page_specific_javascripts do
+  = page_specific_javascript_bundle_tag('common_vue')
   = page_specific_javascript_bundle_tag('xlsx_viewer')
 
-.file-content#js-xlsx-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
\ No newline at end of file
+.file-content#js-xlsx-viewer{ data: { endpoint: namespace_project_raw_path(@project.namespace, @project, @id) } }
+  %table.table
+    %thead
+      %tr
+        %th{"v-for" => "(val, prop) in rows[0]"}
+          {{prop}}
+    %tbody
+      %tr{"v-for" => "row in rows"}
+        %td{"v-for" => "(val, prop) in row"}
+          {{val}}