Create Resizable Web Layouts Just Like Tables – ColumnsResize

Category: Javascript , Layout | April 28, 2023
Author:gVguy
Views Total:167 views
Official Page:Go to website
Last Update:April 28, 2023
License:MIT

Preview:

Create Resizable Web Layouts Just Like Tables – ColumnsResize

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()

You Might Be Interested In:


Leave a Reply