Two way scrollable table w/ fixed header

Vue powered table with fixed column width

by leonsaysHi

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div id="table">
  <div class="table">

    <div class="-fixed-header">
      <table>
        <!-- header -->
        <thead>
          <tr>
            <td v-for="cell in tableDatas.header.cols">
              <div v-html="cell.label"></div>
              <div v-html="cell.label" class="fixed"></div>
            </td>
          </tr>
        </thead>

        <!-- body -->
        <tbody>

          <tr v-for="row in tableDatas.rows">
            <td v-for="cell in row.cols" v-html="cell.label"></td>
          </tr>
        </tbody>

      </table>

    </div>
  </div>

</div>

SCSS

.table { 
  position: relative;        
  padding-top: 30px; 
  border: solid 1px blue;
  overflow: hidden;
  table {    
     width: 100%; 
  }
  
  .-fixed-header {
    height: 100px;
    overflow: auto;
    
    thead {
      th, td {
        min-width: 150px;
        > div {
          position: absolute;
          top: 0;
          width: 100%;
          line-height: 30px;
          height: 30px;
          min-width: 150px;
          white-space: nowrap;
          &.fixed {
            background-color: red;
          }          
        }
      } 
    }
  }
  
}

Vue

new Vue({
  el: "#table",
  data: {
  	table: {
      header: [
        { label: 'col1'/*, fixed: true*/ },
        { label: 'col2'/*, fixed: true*/ },
        { label: 'col3'/*, fixed: true*/ },
        { label: 'col4' },
        { label: 'col5' },
        { label: 'col6' },
        { label: 'col7' },
        { label: 'col8' }
      ],
      rows: [
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4'}, {label: '5'}, {label: '6'}],
        [{label: '1'}, {label: '2'}, {label:...