vue-resizable-table

A Vue 3 directive and composable for adding resizable columns to any HTML table or Vuetify data table — no CSS setup required.
All required styles (including separator lines) are injected automatically.

Features

• Resizable columns for any .
• Works with plain HTML tables and Vuetify v-data-table.
• Configurable column separators:
  • always visible
  • visible only on hover
  • fully disabled
• Adjustable separator vertical height (px).
• Zero required CSS — everything is auto-injected.
• Fully typed TypeScript API.
• Supports dynamic headers.

Installation

NPM

npm install vue-resizable-table-column

Yarn

yarn add vue-resizable-table-column

Usage

Global Registration

import { createApp } from "vue";
import App from "./App.vue";
import { vResizable } from "vue-resizable-table-column";

const app = createApp(App);
app.directive("resizable", vResizable);
app.mount("#app");

Basic Example

<table v-resizable>
  <thead>
    <tr>
      <th>Name</th>
      <th>Calories</th>
      <th>Fat</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows -->
  </tbody>
</table>

Configuration Options

You may pass an options object to the directive:

<table v-resizable="{
  vuetifyBorders: 'hover',
  borderHeight: 40
}">

Option: vuetifyBorders

Controls separator visibility.

• "always" → separators always visible
• "hover" → separators appear only when hovering
• "none" → no separators

Example:

Option: borderHeight

Controls the vertical height of the separator line (in px).
Default: full height.

Example:

<table v-resizable="{ borderHeight: 40 }">

Full Example Usage

<table
  v-resizable="{
    vuetifyBorders: 'hover',
    borderHeight: 30
  }"
>
  <thead>
    <tr>
      <th>Dessert</th>
      <th>Calories</th>
      <th>Fat</th>
      <th>Carbs</th>
      <th>Protein</th>
    </tr>
  </thead>
  <tbody>
    <!-- rows -->
  </tbody>
</table>

Notes

• Required CSS is injected automatically on first use.
• Table layout is set to table-layout: fixed for proper resizing.
• Works well with dynamic Vuetify tables and server-driven headers.
• Directive applies all necessary inline styles for correct resizing.

Development

npm install npm run build

Compatibility

• Vue >= 3.3.0 and < 4.0.0
• Works with Vuetify 3

Contact

Please open an issue for bugs or feature requests.