Simple JavaScript resizable table columns

Inspired by jquery-resizable-columns

Status


Usage

$3

- 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

`` html






























No.	Name	Counrty	Region	City	Street	Post Code	Last updated	UUID
1	Eugenia	Serbia	MN	Minneapolis	Ap #207-8285 Nibh Rd.	41754	2017-11-15T16:52:00-08:00	E212DAC2-220E-9589-D96A-3B58242E9817

`

`js
//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
}
`

$3


`js
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.

Demos

* Demo
* Bootstrap Demo