Press "Enter" to skip to content

Vue Directive for Making Table Columns Resizable

vue-column-resizable is a simple Vue.js extension that makes table columns resizable by dragging and dropping.

drag and resize table columns javascript, vue table resizable columns, vue resizable, vuetify data table resize column, vue good table column width, resize table columns css

How to make use of it:

Install & Download:

npm install vue-columns-resizable --save

Usage

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

Vue.use(VueColumnsResizable);
<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>

drag-and-resize-table-columns-javascript

resizable table columns in vue js, vue-columns-resizable Plugin/Github, vue table freeze column


See Demo And Download

Official Website(Fuxy526): Click Here

This superior jQuery/javascript plugin is developed by Fuxy526. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.