vue-columns-resizable

Vue directive for making table columns resizable.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-columns-resizable
0.0.14 years ago4 years agoMinified + gzip package size for vue-columns-resizable in KB

Readme

vue-columns-resizable

Version Downloads License


Vue directive for making table columns resizable.
demo

Install

npm install vue-columns-resizable --save

Usage

main.js

import VueColumnsResizable from './plugins/vue-columns-resizable';

Vue.use(VueColumnsResizable);

.vue

<table border="1" class="table" v-columns-resizable>
  <thead>
    <tr>
      <th width="50%">name</th>
      <th width="25%">age</th>
      <th width="25%">gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>20</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Emma</td>
      <td>18</td>
      <td>female</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>21</td>
      <td>male</td>
    </tr>
  </tbody>
</table>

Resize on thead
<table border="1" class="table">
  <thead v-columns-resizable>
    <tr>
      <th width="50%">name</th>
      <th width="25%">age</th>
      <th width="25%">gender</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>20</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Emma</td>
      <td>18</td>
      <td>female</td>
    </tr>
    <tr>
      <td>Peter</td>
      <td>21</td>
      <td>male</td>
    </tr>
  </tbody>
</table>

Changelog

  • 0.0.1 - Resize on columns & Resize on thead