Simple JavaScript resizable table columns

Inspired by jquery-resizable-columns

Status

At the moment the project is in "maintenance mode". I will not be investing any more time into developing new features of fixing any bugs.

Usage

Basic

• 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

<tableclass="data" data-rtc-resizable-table="table.one"><thead><tr><th>No.</th><!-- THIS COLUMN WILL NOT BE RESIZABLE --><thdata-rtc-resizable="name">Name</th><thdata-rtc-resizable="country">Counrty</th><thdata-rtc-resizable="region">Region</th><th>City</th><!-- THIS COLUMN WILL NOT BE RESIZABLE --><thdata-rtc-resizable="street">Street</th><thdata-rtc-resizable="post-code">Post Code</th><thdata-rtc-resizable="last-update">Last updated</th><thdata-rtc-resizable="uuid">UUID</th></tr></thead><tbody><tr><td>1</td><td>Eugenia</td><td>Serbia</td><td>MN</td><td>Minneapolis</td><td>Ap #207-8285 Nibh Rd.</td><td>41754</td><td>2017-11-15T16:52:00-08:00</td><td>E212DAC2-220E-9589-D96A-3B58242E9817</td></tr></tbody></table>

//will use the default optionsnewResizableTableColumns(tableElement,null);//override the default optionsnewResizableTableColumns(tableElement,{resizeFromBody: false,store: store});// The store needs to implement the following interfaceinterfaceIStore{get(id: string): any;set(id: string,data: any): void}

Default configuration options

varoptions={// boolean - The resize handle will span the entire height of the tableresizeFromBody: true,// null or number - The minimum width any column in the table should haveminWidth: 40,// null or number - The maximum width any column in the table should havemaxWidth: 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.

Demos

• Demo
• Bootstrap Demo