Quick Start

Installation

pnpm i @column-resizer/core

Ready to Go!

Here is a minimal example for two-column layout:

app.js

import { ColumnResizer } from '@column-resizer/core';
 
const columnResizer = new ColumnResizer({ vertical: false });
const containerElm = document.getElementById('resizer-container');
 
columnResizer.init(containerElm);

index.html

<div id='resizer-container'>
  <!-- Section -->
  <div data-item-type='SECTION'>
    <div>Left</div>
  </div>
 
  <!-- Bar -->
  <div data-item-type='BAR' />
 
  <!-- Section -->
  <div data-item-type='SECTION'>
    <div>Right</div>
  </div>
</div>

Left

Right

Or use with CDN

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Column Resizer</title>
    <script src="https://unpkg.com/@column-resizer/core/dist/index.global.js"></script>
  </head>
  <body>
    <div id="resizer-container" style="background: #999999; height: 60vh">
      <!-- Section -->
      <div data-item-type="SECTION" data-item-config='{ "minSize": 150 }'>
        <div>Left (Min Size 150px)</div>
      </div>
 
      <!-- Bar -->
      <div data-item-type="BAR" style="background: #2e2e2e; cursor: pointer"></div>
 
      <!-- Section -->
      <div data-item-type="SECTION">
        <div>Right</div>
      </div>
    </div>
 
    <script>
      const columnResizer = new ColumnResizerCore.ColumnResizer({ vertical: false });
      const containerElm = document.getElementById('resizer-container');
 
      columnResizer.init(containerElm);
    </script>
  </body>
</html>

Check out the live demo here.

Core ColumnResizer