Skip to main content

​
Overview

The Table plugin provides a rich table editor with support for header rows/columns, cell merging, column resizing, cell styling, and more.

​
Installation

npm install @yoopta/table

​
Basic Usage

import { useMemo } from 'react';
import YooptaEditor, { createYooptaEditor } from '@yoopta/editor';
import Table from '@yoopta/table';

const plugins = [Table];

export default function Editor() {
  const editor = useMemo(() => createYooptaEditor({ plugins, marks: [] }), []);
  return <YooptaEditor editor={editor} onChange={() => {}} />;
}

​
Features

  • Rich Editing: Full table editing with rows and columns
  • Headers: Toggle header rows and columns
  • Cell Operations: Merge cells, set background/text colors, align content
  • Column Resizing: Adjustable column widths
  • Row/Column Management: Insert, delete, and move rows/columns
  • Keyboard Navigation: Navigate cells with Tab, Arrow keys
  • Shortcuts: Type table, ||, or 3x3 to insert

​
Structure

The Table block consists of nested elements: 
table (props: headerRow, headerColumn, columnWidths)
└── table-row (multiple)
    └── table-data-cell (multiple, props: asHeader, align, colSpan, rowSpan, etc.)

​
Configuration

import Table from '@yoopta/table';

const plugins = [Table];

​
Options

​
display
object
​
shortcuts
string[]
default:"['table', '||', '3x3']"
Keyboard shortcuts to trigger the plugin in slash menu

​
Element Props

​
Table Element

​
table.props
object

​
Table Cell Element

​
table-data-cell.props
object

​
Commands

Table commands are available via TableCommands.

​
insertTable

Insert a new Table block. 
import Table, { TableCommands } from '@yoopta/table';

TableCommands.insertTable(editor, {
  rows: 4,
  columns: 3,
  columnWidth: 200,
  headerRow: true,
  headerColumn: false,
  at: 0,
});
​
rows
number
default:"3"
Number of rows to create
​
columns
number
default:"3"
Number of columns to create
​
columnWidth
number
default:"200"
Default column width in pixels
​
headerRow
boolean
default:"false"
Make first row a header row
​
headerColumn
boolean
default:"false"
Make first column a header column
​
at
YooptaPathIndex
Index where to insert the block

​
Row Operations

import { TableCommands } from '@yoopta/table';

// Insert row
TableCommands.insertTableRow(editor, blockId, {
  insertMode: 'after', // or 'before'
  select: true,
});

// Delete row
TableCommands.deleteTableRow(editor, blockId);

// Move row
TableCommands.moveTableRow(editor, blockId, {
  from: [0, 1],
  to: [0, 2],
});

​
Column Operations

import { TableCommands } from '@yoopta/table';

// Insert column
TableCommands.insertTableColumn(editor, blockId, {
  insertMode: 'after', // or 'before'
  select: true,
});

// Delete column
TableCommands.deleteTableColumn(editor, blockId);

// Move column
TableCommands.moveTableColumn(editor, blockId, {
  from: [0, 0, 1],
  to: [0, 0, 2],
});

// Set column width
TableCommands.setColumnWidth(editor, blockId, columnIndex, 300);

​
Header Operations

import { TableCommands } from '@yoopta/table';

// Toggle header row
TableCommands.toggleHeaderRow(editor, blockId);

// Toggle header column
TableCommands.toggleHeaderColumn(editor, blockId);

​
Cell Operations

import { TableCommands } from '@yoopta/table';

// Merge cells
TableCommands.mergeCells(editor, blockId, {
  cells: selectedCells, // Array of [cell, path] tuples
});

// Clear cell contents
TableCommands.clearContents(editor, blockId, {
  cells: selectedCells,
});

// Set cell background color
TableCommands.setCellBackgroundColor(editor, blockId, {
  cells: selectedCells,
  color: '#f0f0f0',
});

// Set cell text color
TableCommands.setCellTextColor(editor, blockId, {
  cells: selectedCells,
  color: '#333333',
});

// Set horizontal alignment
TableCommands.setCellHorizontalAlign(editor, blockId, {
  cells: selectedCells,
  align: 'center', // 'left' | 'center' | 'right' | 'justify'
});

// Set vertical alignment
TableCommands.setCellVerticalAlign(editor, blockId, {
  cells: selectedCells,
  align: 'middle', // 'top' | 'middle' | 'bottom'
});

​
deleteTable

Delete a table block. 
import { TableCommands } from '@yoopta/table';

TableCommands.deleteTable(editor, blockId);

​
buildTableElements

Build table element structure (used internally). 
import { TableCommands } from '@yoopta/table';

const tableElement = TableCommands.buildTableElements(editor, {
  rows: 3,
  columns: 3,
});

​
Keyboard Behavior

  • Tab: Move to next cell (creates new row at end of table)
  • Shift+Tab: Move to previous cell
  • Arrow Keys: Navigate between cells
  • Enter: Insert new row (when in last row)
  • Backspace: Delete empty row or cell content

​
Parsers

​
HTML

  • Deserialize: <table> with <tr>, <th>, <td> elements
  • Serialize: Table block → <table> with proper structure and cell attributes

​
Markdown

  • Serialize: Table → Markdown table syntax with pipes and alignment

​
Email

  • Serialize: Table-based layout with inline styles for email client compatibility

​
Utilities

​
Selection Management

import { TABLE_CELLS_IN_SELECTION, TABLE_SLATE_TO_SELECTION_SET } from '@yoopta/table';

// WeakMaps for tracking cell selection state
// Used internally for multi-cell selection
  • Lists — Ordered and unordered lists
  • Code — Code blocks
  • Callout — Callout boxes

Build docs developers (and LLMs) love

Get started for freeTalk to us