JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cosmo/bootstrap.min.css">
<div class="container" id="app">
  <div class="row">
    <table class="table table-bordered table-striped table-hover">
      <thead>
        <tr class="tableizer-firstrow">
          <th colspan="3"></th>
          <th colspan="3">Test Pressure</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Brand</th>
          <th>Model</th>
          <th>No. of fans</th>
          <th>25 Pa</th>
          <th>50 Pa</th>
          <th>75 Pa</th>
        </tr>
        <tr>
          <th rowspan="6">Retrotec</th>
          <td>1000</td>
          <td>{{Math.ceil(c16 * c17 / f3)}} fans</td>
          <td></td>
          <td>{{f3}} m³/h</td>
          <td>9,005 m³/h</td>
        </tr>
        <tr>
          <td>3000</td>
          <td>{{Math.ceil(c16 * c17 / f4)}} fans</td>
          <td></td>
          <td>{{f4}} m³/h</td>
          <td>13,422 m³/h</td>
        </tr>
        <tr>
          <td>5000</td>
          <td>1 fans</td>
          <td></td>
          <td>9,684 m³/h</td>
          <td>9,175 m³/h</td>
        </tr>
        <tr>
          <td>6000</td>
          <td>1 fans</td>
          <td></td>
          <td>13,082 m³/h</td>
          <td>12,573 m³/h</td>
        </tr>
        <tr>
          <td>200</td>
          <td>1 fans</td>
          <td>1,053 m³/h</td>
          <td>1,019 m³/h</td>
          <td></td>
        </tr>
        <tr>
          <td>300</td>
          <td>1 fans</td>
          <td>1,342 m³/h</td>
          <td>1,291 m³/h</td>
          <td></td>
        </tr>
        <tr>
          <th rowspan="2">The Energy Convervatory</th>
          <td>BD3</td>
          <td>1 fans</td>
          <td></td>
          <td>8,920 m³/h</td>
          <td></td>
        </tr>
        <tr>
          <td>BD4</td>
          <td>1 fans</td>
          <td></td>
 ...

JavaScript

new Vue({
  el: '#app',
  data: {
    c16: 3,
    c17: 130,
    f3: 9514,
    f4: 14101,
  },
  computed: {
    q50: function() {
      return this.c16 * this.c17;
    },
    q4: function() {
      return 1 / 3600 * this.q50 * (Math.pow(4 / 50, 0.65));
    },
  },
});