Vue

by KomathiKarunakaran

HTML

<div id="app">

   <h2>Basic HTML Table</h2>

<table border="1">  
<tr> <th colspan="2"></th> 
<th v-for="(header, index) in headerArray" :key="index">{{header.project_id}}</th>
</tr> 

<tr> 
  <th rowspan="8"><span class="rot">Project Economy</span></th>
</tr>
<tr> <td>Start Dato</td> <td>Chocolate</td> </tr> 
<tr> <td>Slutt Dato</td> <td>Chocolate</td> </tr> 
<tr><td>Kostnad vs Salgssum%</td> <td>Chocolate</td> </tr> 
<tr><td>Kostnader sum.eks.MVA</td> <td>Chocolate</td> </tr> 
<tr><td>Salgssum</td> <td>Chocolate</td> </tr> 
<tr><td>Kost arbeid</td> <td>Chocolate</td> </tr> 
<tr><td>Summert kostnad</td> <td>Chocolate</td> </tr> 
<tbody>
<tr> 
<th rowspan="7"><span class="rot">Project Timer</span></th> 
</tr> 
<tr> <td>Start Dato</td> <td>Chocolate</td> </tr> 
<tr> <td>Slutt Dato</td> <td>Chocolate</td> </tr> 
<tr><td>Kostnad vs Salgssum%</td> <td>Chocolate</td> </tr> 
<tr><td>Kostnader sum.eks.MVA</td> <td>Chocolate</td> </tr> 
<tr><td>Salgssum</td> <td>Chocolate</td> </tr> 
<tr><td>Kost arbeid</td> <td>Chocolate</td> </tr>
</tbody>
</table>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ],
    headerArray: [
    {
      "project_id": 1,
      "color": "#0e6cb0"
    },
    {
      "project_id": 2,
      "color": "#979da1"
    },
    {
      "project_id": 3,
      "color": "#edb22d"
    },
    {
      "project_id": 4,
      "color": "#2dcaed"
    },
    {
      "project_id": 5,
      "color": "#539d4e"
    }
  ],
  economyrecords: [
    {
      "project_id": 3,
      "start_date": "03.08.2015T00.00.00",
      "end_date": "15.09.2015T00.00.00",
      "cost_sum_ext_vat": 2201.8,
      "sale_sum": null,
      "diet_work": 0,
      "summed_cost": null,
      "cost_vs_sale_sum": 0
    },
    {
      "project_id": 5,
      "start_date": "22.06.2015T00.00.00",
      "end_date": "01.10.2015T00.00.00",
      "cost_sum_ext_vat": null,
      "sale_sum": null,
      "diet_work": 0,
      "summed_cost": null,
      "cost_vs_sale_sum": 0
    }
  ],
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})