JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="wrapper">
  <table class="table-header">
    <colgroup>
      <col name="column1" width="100"></col>
      <col name="column2" width="110" colspan="3"></col>
      <col name="column3" width="250"></col>
      <col name="scroll" width="15"></col>
    </colgroup>
    <thead>
      <tr>
        <th class="column1">Column1</th>
        <th class="column2">Column2</th>
        <th class="column3">Column3</th>
        <th class="scroll"></th>
      </tr>
    </thead>
  </table>
  <div class="body-wrapper">
    <table class="table-body">
      <colgroup>
        <col name="column1" width="100"></col>
        <col name="column2" width="40"></col>
        <col name="column3" width="40"></col>
        <col name="column4" width="30"></col>
        <col name="column5" width="250"></col>
      </colgroup>
      <tbody>
        <tr v-for="(data, index) in tableData">
          <td class="column1">{{ data.name }}</td>
          <td class="column2">{{ data.status1 }}</td>
          <td class="column3">{{ data.status2 }}</td>
          <td class="column4">{{ data.status3 }}</td>
          <td class="column5">{{ data.text }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

#wrapper {
  width: 460px;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  color: #fff;
  font-size: 12px;
}

table th,
table td {
  padding: 5px;
  border-bottom: 1px solid #ccc;
}

.table-header {
  background-color: #333;
  display: table-header-group;
}

.table-body {
  background-color: #555;
  display: table-row-group;
}

.table-body tr:hover {
  background: #222;
}

.body-wrapper {
  height: 400px;
  
  overflow-y: scroll;
}

JavaScript

new Vue({
  el: '#wrapper',
  
  created () {
    this.tableData = new Array(50).fill(null).map((val, index) => {
      const status1 = Math.floor(Math.random() * 101)
      const status2 = Math.floor(Math.random() * 101)
      return {
        name: `dataname${index}`,
        status1,
        status2,
        status3: status1 + status2 >= 70 ? 'OK' : 'NG',
        text: 'text text text sample text sample'
      }
    })
  },
  
  data () {
    return {
      tableData: []    
    }
  }
})