---
title: Column
docs:
  - route: /docs/components/column-element
    title: Column Element
  - route: /docs/components/column-group-element
    title: Column Group Element
---

<ComponentPreview name="column-demo" />

<PackageInfo>

## Features

- Add columns to your document.
- Choose from a variety of column layouts using `column-group-element` toolbar.
- [ ] Resizable columns

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-layout
```

## Usage

```tsx
import { ColumnPlugin, ColumnItemPlugin } from '@udecode/plate-layout/react';

const plugins = [
  // ...otherPlugins,
  ColumnPlugin,
];
```

## Plugins

### ColumnPlugin

Add Column Plugin to your document.

### ColumnItemPlugin

Add Column Item Plugin to your document.

## API

### TColumnGroupElement

<APIAttributes>
Extends `TElement`.

<APIItem name="layout" type="number[]" optional>
  Set the width of its children `Column`
</APIItem>
</APIAttributes>

### TColumnElement

<APIAttributes>
Extends `TElement`.

<APIItem name="width" type="string" optional>
  The `Column`'s width end with `%`
</APIItem>
</APIAttributes>

### insertColumnGroup

Insert a columnGroup with two empty columns.

<APIParameters>
  <APIItem name="editor" type="PlateEditor">
    The editor instance.
  </APIItem>
  <APIItem name="options" type="InsertNodesOptions & { layout?: number[] | number }">
    - `layout`: Array of column widths or number of equal-width columns (default: 2)
    - Other InsertNodesOptions to control insert behavior
  </APIItem>
</APIParameters>

### insertColumn

Insert an empty column. You can set the width by options.width default is "33%"

<APIParameters>
  <APIItem name="editor" type="PlateEditor">
    The editor instance.
  </APIItem>
  <APIItem name="options" type="InsertNodesOptions & { width?: string }">
    InsertNodesOptions and width to set the insert behavior.
  </APIItem>
</APIParameters>

### moveMiddleColumn

Move the middle column to the left or right by options.direction. If the middle node is empty, return false and remove it.

<APIParameters>
  <APIItem name="editor" type="PlateEditor">
    The editor instance.
  </APIItem>
  <APIItem name="nodeEntry" type="NodeEntry">
    The node entry of `column` element
  </APIItem>
  <APIItem name="options" type="{ direction: 'left' | 'right' }">
    Control the direction the middle column moves to
  </APIItem>
</APIParameters>

### setColumnWidth

Set the width of `ColumnGroup`'s children. In general, you don't need to use this function, since we will call this function automatically when the property of `layout` changes.
If you want to set the `layout` use setNodes.

<APIParameters>
  <APIItem name="editor" type="PlateEditor">
    The editor instance.
  </APIItem>
  <APIItem name="groupPathRef" type="PathRef">
    The path ref of `ColumnGroup`
  </APIItem>
  <APIItem name="layout" type="number[]">
    The element property of `layout`
  </APIItem>
</APIParameters>

### toggleColumnGroup

Convert a block into a column group layout. The selected block becomes the content of the first column.

<APIParameters>
  <APIItem name="editor" type="PlateEditor">
    The editor instance.
  </APIItem>
  <APIItem name="options" type="ReplaceNodeChildrenOptions & { layout?: number[] | number }">
    - `layout`: Array of column widths or number of equal-width columns (default: 2)
  </APIItem>
</APIParameters>

## API Components

### useColumnState

<APIReturns>
  <APIItem name="setDoubleColumn" type="function">
    Call this function to make the `ColumnGroup`'s children, column bisects the
    parent element space. This sets the `layout` property of
    `ColumnGroup` to `[50,50]`
  </APIItem>
  <APIItem name="setThreeColumn" type="function">
    Set the `layout` property of `ColumnGroup` to `[33, 33, 33]`
  </APIItem>
  <APIItem name="setRightSideDoubleColumn" type="function">
    Set the `layout` property of `ColumnGroup` to `[70,30]`
  </APIItem>
  <APIItem name="setLeftSideDoubleColumn" type="function">
    Set the `layout` property of `ColumnGroup` to `[30,70]`
  </APIItem>
  <APIItem name="setDoubleSideDoubleColumn" type="function">
    Set the `layout` property of `ColumnGroup` to `[25, 50, 25]`
  </APIItem>
</APIReturns>

### useDebouncePopoverOpen

<APIReturns>

<APIItem type="boolean">Control whether the `popover` is open or not</APIItem>

</APIReturns>