Vue Table Resizer

by Wagner Souza

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/column-resizer.js"></script>
<div id="app">
  <table border="1" ref="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>
</div>

CSS

table td, table th {
  padding: 1rem;
}

Vue

new Vue({
  el: "#app",
  data: {},
  
  mounted() {
  	let resizable = ColumnResizer.default
        
    new resizable(this.$refs.table, {
      liveDrag:true,
      draggingClass:"rangeDrag",
      gripInnerHtml:"<div class='rangeGrip'></div>",
      minWidth:8
    })
  }
})