Skip to content

validide/resizable-table-columns

Repository files navigation

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.

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

About

Simple Javascript resizable table columns

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors 2

  •  
  •