Vue table sample

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="vue-instance">
  <h1>Vue table sample</h1>
  <table class="table-borderd table-striped">
    <thead>
      <tr>
        <th><div>Name</div></th>
        <th><div>Price</div></th>
        <th><div>Quantity</div></th>
        <th><div>Width</div></th>
        <th><div>Height</div></th>
      </tr>
    </thead>
    <tr v-for="item in vueState.items">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.width }}</td>
      <td>{{ item.height }}</td>
    </tr>
  </table>
</div>

CSS

table {
  width: 100%;
  border: 1px solid black;
}
th {
    white-space: nowrap;
    vertical-align: middle;
    min-width: max-content;
    border: 1px solid black;
}

th div {
  resize: horizontal;
  overflow: auto;
  padding-right: 20px;
  min-width: max-content;
}

td {
  white-space: normal;
  word-break: break-word;
  border: 1px solid black;
}

JavaScript

var vueStore = {
  state: {
			items: [
        {name: 'Item1 item1 item1', price: 1000, quantity: 4, width: '150cm', height: '200cm'},
        {name: 'Item2Item2Item2', price: 1800, quantity: 4, width: '150cm', height: '200cm'},
        {name: 'Item3', price: 1400, quantity: 4, width: '150cm', height: '200cm'},
        {name: 'Item4Item4 Item4Item4 Item4Item4', price: 300, quantity: 4, width: '150cm', height: '200cm'}
      ]    
  }
}


var vm = new Vue({
  el: '#vue-instance',
  data: {
    vueState: vueStore.state
  }
});