Author: | gVguy |
---|---|
Views Total: | 167 views |
Official Page: | Go to website |
Last Update: | April 28, 2023 |
License: | MIT |
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()