Container

import React from 'react';
import { ColumnResizer, Resizer } from '@column-resizer/react';
 
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  vertical?: boolean;
  onActivate?: () => void;
  beforeApplyResizer?: (resizer: Resizer) => void;
  afterResizing?: () => void;
  columnResizerRef?: React.RefObject<ColumnResizer>;
}

Props

vertical

type vertical = boolean;

Determine whether using vertical layout or not, default is false.

onActivate

type onActivate = () => void;

Triggered when any Bar is activated. i.e, onMouseDown (opens in a new tab) or onTouchStart (opens in a new tab).

beforeApplyResizer

import { Resizer } from '@column-resizer/react';
 
type beforeApplyResizer = (resizer: Resizer) => void;

Used to customize resize behavior. In this method, you don't need to call applyResizer to apply the resize result. Please note that you should not do any side effect on this method. If you want to do something after resizing, see afterResizing below.

afterResizing

type afterResizing = () => void;

Triggered after a resizing section is completed, which means that it will be triggered after onMouseUp (opens in a new tab) and onTouchEnd (opens in a new tab) events. If you want to do something after size of section has changed, use onSizeChanged props on the Section instead.

columnResizerRef

import React from 'react';
import { ColumnResizer } from '@column-resizer/react';
 
type columnResizerRef = React.RefObject<ColumnResizer>;

Used to get ColumnResizer.

Quick Start Section