Table operation commands allow you to create tables and modify their structure.
executeInsertTable
Inserts a new table at the current cursor position.
editor.command.executeInsertTable(options: {
row: number
col: number
}): void
Parameters
Number of rows in the table
Number of columns in the table
Example
// Insert 3x3 table
editor.command.executeInsertTable({ row: 3, col: 3 })
// Insert 5x4 table
editor.command.executeInsertTable({ row: 5, col: 4 })
executeInsertTableTopRow
Inserts a row above the current cell.
editor.command.executeInsertTableTopRow(): void
Example
// Place cursor in a table cell, then:
editor.command.executeInsertTableTopRow()
Notes
- Cursor must be inside a table cell
- New row inherits formatting from current row
executeInsertTableBottomRow
Inserts a row below the current cell.
editor.command.executeInsertTableBottomRow(): void
Example
editor.command.executeInsertTableBottomRow()
executeInsertTableLeftCol
Inserts a column to the left of the current cell.
editor.command.executeInsertTableLeftCol(): void
Example
editor.command.executeInsertTableLeftCol()
executeInsertTableRightCol
Inserts a column to the right of the current cell.
editor.command.executeInsertTableRightCol(): void
Example
editor.command.executeInsertTableRightCol()
executeDeleteTableRow
Deletes the current row.
editor.command.executeDeleteTableRow(): void
Example
editor.command.executeDeleteTableRow()
Notes
- If only one row remains, deletes the entire table
executeDeleteTableCol
Deletes the current column.
editor.command.executeDeleteTableCol(): void
Example
editor.command.executeDeleteTableCol()
Notes
- If only one column remains, deletes the entire table
executeDeleteTable
Deletes the entire table.
editor.command.executeDeleteTable(): void
Example
editor.command.executeDeleteTable()
executeMergeTableCell
Merges selected table cells.
editor.command.executeMergeTableCell(): void
Example
// Select multiple cells, then:
editor.command.executeMergeTableCell()
Notes
- Must have a cell range selected
- Cells must form a rectangular selection
executeCancelMergeTableCell
Unmerges a previously merged cell.
editor.command.executeCancelMergeTableCell(): void
Example
// Place cursor in merged cell, then:
editor.command.executeCancelMergeTableCell()
executeSplitVerticalTableCell
Splits a cell vertically (creates columns within the cell).
editor.command.executeSplitVerticalTableCell(): void
Example
editor.command.executeSplitVerticalTableCell()
executeSplitHorizontalTableCell
Splits a cell horizontally (creates rows within the cell).
editor.command.executeSplitHorizontalTableCell(): void
Example
editor.command.executeSplitHorizontalTableCell()
executeTableTdVerticalAlign
Sets vertical alignment for table cells.
editor.command.executeTableTdVerticalAlign(align: VerticalAlign): void
Parameters
Vertical alignment:
VerticalAlign.TOPVerticalAlign.MIDDLEVerticalAlign.BOTTOM
Example
import { VerticalAlign } from '@hufe921/canvas-editor'
editor.command.executeTableTdVerticalAlign(VerticalAlign.MIDDLE)
executeTableBorderType
Sets the border type for the entire table.
editor.command.executeTableBorderType(borderType: TableBorder): void
Parameters
Border style:
TableBorder.ALL - All bordersTableBorder.EMPTY - No bordersTableBorder.EXTERNAL - Only outer borders
Example
import { TableBorder } from '@hufe921/canvas-editor'
editor.command.executeTableBorderType(TableBorder.ALL)
executeTableBorderColor
Sets the border color for the entire table.
editor.command.executeTableBorderColor(color: string): void
Parameters
Hex color code (e.g., ‘#000000’)
Example
editor.command.executeTableBorderColor('#0000FF')
executeTableTdBorderType
Sets border type for selected cells.
editor.command.executeTableTdBorderType(borderTypes: TdBorder[]): void
Parameters
Array of border positions:
TdBorder.TOPTdBorder.RIGHTTdBorder.BOTTOMTdBorder.LEFT
Example
import { TdBorder } from '@hufe921/canvas-editor'
// Only top and bottom borders
editor.command.executeTableTdBorderType([TdBorder.TOP, TdBorder.BOTTOM])
executeTableTdSlashType
Adds diagonal slash lines to table cells.
editor.command.executeTableTdSlashType(slashType: TdSlash | null): void
Parameters
Slash type:
TdSlash.FORWARD - / (forward slash)TdSlash.BACK - \ (backslash)null - Remove slash
Example
import { TdSlash } from '@hufe921/canvas-editor'
editor.command.executeTableTdSlashType(TdSlash.FORWARD)
executeTableTdBackgroundColor
Sets background color for selected cells.
editor.command.executeTableTdBackgroundColor(color: string | null): void
Parameters
Hex color code or null to remove background
Example
// Light gray background
editor.command.executeTableTdBackgroundColor('#F0F0F0')
// Remove background
editor.command.executeTableTdBackgroundColor(null)
executeTableSelectAll
Selects all cells in the current table.
editor.command.executeTableSelectAll(): void
Example
// Place cursor in table, then:
editor.command.executeTableSelectAll()
Complete Example
import Editor, {
TableBorder,
TdBorder,
VerticalAlign
} from '@hufe921/canvas-editor'
const editor = new Editor(container, data)
// Create a formatted table
editor.command.executeInsertTable({ row: 4, col: 3 })
// Style the table
editor.command.executeTableBorderType(TableBorder.ALL)
editor.command.executeTableBorderColor('#333333')
// Add a header row with background
editor.command.executeTableSelectAll()
editor.command.executeSetRange(0, 10) // First row
editor.command.executeTableTdBackgroundColor('#CCCCCC')
editor.command.executeTableTdVerticalAlign(VerticalAlign.MIDDLE)
// Add more rows
editor.command.executeInsertTableBottomRow()
editor.command.executeInsertTableBottomRow()
// Merge cells in header
editor.command.executeMergeTableCell()