Create Resizable Web Layouts Just Like Tables – ColumnsResize

Preview:

Description:

columns-resize is a JavaScript library to help create table-like, multi-column, and resizable web layouts using CSS Flexbox.

How to use it:

1. Install and import the ColumnsResize.

# NPM
$ npm i columns-resize

import ColumnsResize from 'columns-resize';

2. Add columns to the layout.

• row is the container of columns.
• each row must have display:flex
• data-column-id must provide an id unique for each column
• use data-no-auto-resize-handles to disable resize handlers on specific rows.
• use data-resize-handle to specify the drag handle elements

<div id="wrapper">
  <div class="row">
    <div class="column" data-column-id="name">
      Name
      <div data-resize-handle></div>
    </div>
    <div class="column" data-column-id="domain">
      Domain
      <div data-resize-handle></div>
    </div>
    <div class="column" data-column-id="email">
      Email
    </div>
  </div>
  <div class="row" data-no-auto-resize-handles>
    ... more columns here ...
  </div>
</div>

3. Initialize the ColumnsResize.

const instance = new ColumnsResize(document.getElementById('wrapper'))

4. Available options to config the layout.

const instance = new ColumnsResize(document.getElementById('wrapper'),{
      defaultMinWidth: 50,
      minWidthByColumnId: {
        'name': 100
      },
      autoResizeHandles: false,
      onResizeStart: () => console.log('resize start'),
      onResizeEnd: () => console.log('resize end'),
      logs: true,
})

5. API methods.

instance.reconnect()
instance.disconnect()
instance.reset()
instance.reset()