@validide/resizable-table-columns

Simple Javascript resizable table columns

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@validide/resizable-table-columns
1002.0.5a year ago2 years agoMinified + gzip package size for @validide/resizable-table-columns in KB

Readme

Simple JavaScript resizable table columns
Inspired by jquery-resizable-columns

Status

Codacy Badge
npm version

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

<table class="data" data-rtc-resizable-table="table.one">
    <thead>
        <tr>
            <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>
        </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 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.

Demos