Vue.js 2.0 table generator

Vue.js 2.0 table generator

by Michael Menaker

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mikemenaker/vue-data-table/1.0.1/src/v-data-table.js"></script>

<!-- demo root element -->
<div id="demo">
  <div v-for="key in Object.keys(tablifiedObj)">
    <data-table :data="tablifiedObj[key]">
      <template slot="caption">{{ key }}</template>
    </data-table>
    <br />
  </div>
</div>

CSS

body {
  font-family: Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  color: #444;
}

table {
  border: 2px solid #42b983;
  border-radius: 3px;
  background-color: #fff;
}

th {
  background-color: #42b983;
  color: rgba(255, 255, 255, 0.66);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

td {
  background-color: #f9f9f9;
}

th,
td {
  min-width: 120px;
  padding: 10px 20px;
}

th.active {
  color: #fff;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #fff;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #fff;
}

JavaScript

// bootstrap the demo
var demo = new Vue({
  el: '#demo',
  data: {
    jsonData: {
      "test": "test",
      "obj": {
        "test": "test"
      },
      "arr": [{
        "test": 1, "test2":1
      }, {
        "test": 2, "test2":2
      }, {
        "test": 3, "test2":false
      }],
      "another test": "val"
    }    
  },
  computed: {
    tablifiedObj() {
      return this.tableifyObj(this.jsonData, "test title");
    }
  },
  methods: {
    tableifyObj(data, title) {
      let newObj = {};
      let base = [];
      for (var key in data) {
        if (data.hasOwnProperty(key)) {
          if (data[key].constructor === Array) {
            newObj[key] = data[key];
          } else if (typeof data[key] === 'object') {
            newObj[key] = this.tableifyObj(data[key], key)[key];
          } else {
            // horiz|vertical
            base.push({
              name: key,
              value: data[key]
            });
          }
        }
      }

      newObj[title] = base;
      //alert(JSON.stringify(newObj));
      return newObj;
    }
  }
})