Simple Javascript resizable table columns

Usage no npm install needed!

<script type="module">
  import validideResizableTableColumns from 'https://cdn.skypack.dev/@validide/resizable-table-columns';


Simple JavaScript resizable table columns

Inspired by jquery-resizable-columns


Codacy Badge npm version



  • Add the resizable-table-columns.css file to the page.
  • Add the bundle/index.js file to the page.
  • Optionally add a store library
  • Add the HTML table markup
  • Create a new instance of the resizable table like below

  <table class="data" data-rtc-resizable-table="table.one">
              <th>No.</th><!-- THIS COLUMN WILL NOT BE RESIZABLE -->
              <th data-rtc-resizable="name">Name</th>
              <th data-rtc-resizable="country">Counrty</th>
              <th data-rtc-resizable="region">Region</th>
              <th>City</th><!-- THIS COLUMN WILL NOT BE RESIZABLE -->
              <th data-rtc-resizable="street">Street</th>
              <th data-rtc-resizable="post-code">Post Code</th>
              <th data-rtc-resizable="last-update">Last updated</th>
              <th data-rtc-resizable="uuid">UUID</th>
              <td>Ap #207-8285 Nibh Rd.</td>

//will use the default options
new ResizableTableColumns(tableElement, null);

//override the default options
new ResizableTableColumns(tableElement, {
  resizeFromBody: false,
  store: store

// The store needs to implement the following interface
interface IStore {
  get(id: string): any;
  set(id: string, data: any): void

Default configuration options

var  options = {
  // boolean - The resize handle will span the entire height of the table
  resizeFromBody: true,

  // null or number - The minimum width any column in the table should have
  minWidth: 40,

  // null or number - The maximum width any column in the table should have
  maxWidth: null,

  // number - The maximum number off milliseconds between to pointer down events to consider the action a 'double click'
  doubleClickDelay: 500,

  // data store provider (ex: https://github.com/marcuswestin/store.js)
  store: null,

  // null or number - The suggestion for how wide (in pixels) a cell might be in case the content is really wide.
  maxInitialWidthHint: null

Supported Browsers

All modern browsers are supported. IE and older browsers might require polyfills for the library to work.