@yoopta/table v4.9.4

Table

Overview

The Table Plugin is a powerful extension for Yoopta-Editor, designed to bring seamless table creation and editing capabilities into your workflow

Installation

yarn add @yoopta/table

Elements

table

• props
• headerRow
• headerColumn
• children elements
• table-row

table-row

• props
• children elements
• table-data-cell

table-data-cell

• props
• asHeader
• width

Commands

export type TableCommands = {
  buildTableElements: (editor: YooEditor, options?: InsertOptions) => TableElement,
  insertTable: (editor: YooEditor, options?: InsertOptions) => void,
  deleteTable: (editor: YooEditor, blockId: string) => void,
  insertTableRow: (editor: YooEditor, blockId: string, options?: Options) => void,
  deleteTableRow: (editor: YooEditor, blockId: string, options?: DeleteOptions) => void,
  moveTableRow: (editor: YooEditor, blockId: string, options: MoveTableOptions) => void,
  moveTableColumn: (editor: YooEditor, blockId: string, options: MoveTableOptions) => void,
  insertTableColumn: (editor: YooEditor, blockId: string, options?: Options) => void,
  deleteTableColumn: (editor: YooEditor, blockId: string, options?: DeleteOptions) => void,
  updateColumnWidth: (editor: YooEditor, blockId: string, columnIndex: number, width: number) => void,
  toggleHeaderRow: (editor: YooEditor, blockId: string) => void,
  toggleHeaderColumn: (editor: YooEditor, blockId: string) => void,
};

buildTableElements

buildTableElements: (editor: YooEditor, options?: InsertOptions) => TableElement;

Define elements structure for slate value in your block

insertTable

editor.methods.insertTable(blockId: string, options?: InsertOptions) => void

Insert table block in specific path with options

Options:

• rows: number
• columns: number
• columnWidth?: number
• headerColumn?: boolean
• headerRow?: boolean

deleteTable

deleteTable: (editor: YooEditor, blockId: string) => void;

Delete table block

insertTableRow

insertTableRow: (editor: YooEditor, blockId: string, options?: Options) => void;

Insert table row in specific location

Options:

• path?: Location & Span
• select?: boolean
• insertMode?: 'before' | 'after';

Hotkeys

Styling