https://github.com/validide/resizable-table-columns

Simple Javascript resizable table columns
https://github.com/validide/resizable-table-columns

columns javascript resizable table

Last synced: 5 months ago
JSON representation

Simple Javascript resizable table columns

• Host: GitHub
• URL: https://github.com/validide/resizable-table-columns
• Owner: validide
• License: mit
• Created: 2017-10-07T19:05:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2025-11-22T05:57:14.000Z (6 months ago)
• Last Synced: 2025-11-22T07:16:21.270Z (6 months ago)
• Topics: columns, javascript, resizable, table
• Language: TypeScript
• Homepage:
• Size: 825 KB
• Stars: 41
• Watchers: 3
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Simple JavaScript resizable table columns

Inspired by **[jquery-resizable-columns](https://github.com/dobtco/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](https://app.codacy.com/project/badge/Grade/f963825a192e4c9a8fd148212fec5c13)](https://www.codacy.com/gh/validide/resizable-table-columns/dashboard?utm_source=github.com&utm_medium=referral&utm_content=validide/resizable-table-columns&utm_campaign=Badge_Grade)

[![npm version](https://img.shields.io/npm/v/@validide/resizable-table-columns)](https://www.npmjs.com/package/@validide/resizable-table-columns)

## 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

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

}

```

### Default configuration options

```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](https://validide.github.io/resizable-table-columns/dist/samples/index.html)

*  [Bootstrap Demo](https://validide.github.io/resizable-table-columns/dist/samples/bootstrap.html)