Skip to content

Latest commit

 

History

History
115 lines (82 loc) · 3.38 KB

README.md

File metadata and controls

115 lines (82 loc) · 3.38 KB

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

Operation Hotkey
Insert row after shift+enter
Insert row before cmd+shift+enter
Delete row cmd+shift+delete
Insert column to right cmd+shift+→
Insert column to left cmd+shift+←
Delete column cmd+alt+delete
Toggle header for first row cmd+shift+H
Toggle header for first column cmd+shift+V
cmd+a

Styling

Classname Element
yoopta-table-block Root of table
yoopta-table Table element
yoopta-table-selecting When table is under selection
yoopta-table-data-cell Table data cell
yoopta-table-data-cell-head Table data head cell
yoopta-table-data-cell-content Content of data cell