Column

PreviousNext
Column Nodes
Loading...
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

Features

  • Add columns to your document.
  • Choose from a variety of column layouts using column-group-node toolbar.
  • Resizable columns

Kit Usage

Installation

The fastest way to add column functionality is with the ColumnKit, which includes pre-configured ColumnPlugin and ColumnItemPlugin with Plate UI components.

'use client';
 
import { ColumnItemPlugin, ColumnPlugin } from '@platejs/layout/react';
 
import { ColumnElement, ColumnGroupElement } from '@/components/ui/column-node';
 
export const ColumnKit = [
  ColumnPlugin.withComponent(ColumnGroupElement),
  ColumnItemPlugin.withComponent(ColumnElement),
];

Add Kit

Add the kit to your plugins:

import { createPlateEditor } from 'platejs/react';
import { ColumnKit } from '@/components/editor/plugins/column-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ...ColumnKit,
  ],
});

Manual Usage

Installation

pnpm add @platejs/layout

Add Plugins

Include the column plugins in your Plate plugins array when creating the editor.

import { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ColumnPlugin,
    ColumnItemPlugin,
  ],
});

Configure Plugins

Configure the plugins with custom components to render column layouts.

import { ColumnPlugin, ColumnItemPlugin } from '@platejs/layout/react';
import { createPlateEditor } from 'platejs/react';
import { ColumnGroupElement, ColumnElement } from '@/components/ui/column-node';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    ColumnPlugin.withComponent(ColumnGroupElement),
    ColumnItemPlugin.withComponent(ColumnElement),
  ],
});

Turn Into Toolbar Button

You can add this item to the Turn Into Toolbar Button to convert blocks into column layouts:

{
  icon: <Columns3Icon />,
  label: '3 columns',
  value: 'action_three_columns',
}

Plugins

ColumnPlugin

Add Column Plugin to your document.

ColumnItemPlugin

Add Column Item Plugin to your document.

Types

TColumnGroupElement

Extends TElement.

TColumnElement

Extends TElement.

Attributes

Collapse all

    The column's width (must end with %)

Transforms

insertColumnGroup

Insert a columnGroup with two empty columns.

OptionsInsertNodesOptions & { columns?: number[] | number }

Collapse all
    • columns: Array of column widths or number of equal-width columns (default: 2)
    • Other InsertNodesOptions to control insert behavior

    Array of column widths or number of equal-width columns (default: 2)

    Other options to control insert behavior

insertColumn

Insert an empty column.

OptionsInsertNodesOptions & { width?: string }

Collapse all

    Column width (default: "33%")

    Other options to control insert behavior

moveMiddleColumn

Move the middle column to the left or right.

Parameters

Collapse all

    The node entry of column element

    Control the direction the middle column moves to

Returnsboolean

    Returns false if the middle node is empty (and removes it), true otherwise.

toggleColumnGroup

Convert a block into a column group layout or update an existing column group's layout.

  • If the target block is not a column group, wraps it in a new column group with the specified number of columns
  • If the target block is already a column group, updates its column layout using setColumns
  • The original content becomes the content of the first column
  • Additional columns are created with empty paragraphs

Optionsobject

Collapse all

    The location to toggle the column group at.

    Number of equal-width columns to create (default: 2)

    Array of column widths (e.g., ['50%', '50%']). Takes precedence over columns.

setColumns

Update the column layout of an existing column group.

  • When increasing columns:
    • Keeps existing column content
    • Adds new empty columns with specified widths
  • When decreasing columns:
    • Merges content from removed columns into the last remaining column
    • Updates widths of remaining columns
  • When keeping same number of columns:
    • Only updates column widths

Optionsobject

Collapse all

    The path to the column group element.

    Number of equal-width columns to create.

    Array of column widths (e.g., ['33%', '67%']). Takes precedence over columns.

Hooks

useDebouncePopoverOpen

Returnsboolean

    Whether the popover is open.

Code BlockDate
Column - Plate