vue-resizable-table

A Vue 3 directive and composable to add resizable columns to any HTML table, including Vuetify data tables, with zero CSS setup required. This package applies necessary inline styles automatically.

Features

• Resizable columns for <table> elements.
• Works with plain HTML tables and Vuetify v-data-table.
• Minimal setup: just add the directive or call the composable.
• Automatically applies inline styles — no extra CSS required.
• Written in TypeScript with proper Vue 3 typings.

Installation

Using the Library in Projects

1. Installing the Library

• NPM

npm install @jtekt/vue-resizable-table-column

• Yarn:

yarn add @jtekt/vue-resizable-table-column

Usage

Register Globally

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

const app = createApp(App);

// Register the directive globally as `v-resizable`
app.directive("resizable", vResizable);

app.mount("#app");

Now you can add v-resizable to any <table> element:

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

Register Locally in a Component

<script setup lang="ts">
import { vResizable } from "@jtekt/vue-resizable-table-column";
</script>

<template>
  <table v-resizable>
    <!-- your table content -->
  </table>
</template>

<script lang="ts">
export default {
  directives: {
    resizable: vResizable,
  },
};
</script>

Notes

• The directive apply inline styles required for resizing, so you don't need to add CSS yourself.
• Your tables will default to width: 100% for better resizing behavior.
• The directive is fully typed to avoid TypeScript compatibility issues — no need for users to cast the directive type manually.

Development

Clone this repo and run:

npm install
npm run build

Dependencies

This library is designed to work with:

• vue: >=3.3.0 <4.0.0

Contact

For issues or suggestions, please open an issue or reach out.