Skip to main content
Canvas Editor provides comprehensive table functionality including creation, modification, cell operations, and styling. Tables are rendered on the canvas with full editing capabilities.

​
Creating Tables

​
Insert a New Table

Insert a table at the current cursor position: 
import Editor from '@hufe921/canvas-editor'

const editor = new Editor(container, {
  main: [{ value: '' }]
})

// Insert a 3x4 table (3 rows, 4 columns)
editor.command.executeInsertTable(3, 4)

// Insert a 2x2 table
editor.command.executeInsertTable(2, 2)
Tables automatically adjust their width to fit the page margins. Column widths distribute evenly by default.

​
Row Operations

Insert Top Row

Add a new row above the current cell

Insert Bottom Row

Add a new row below the current cell

Delete Row

Remove the current row from the table

Select All

Select all cells in the table

​
Row Manipulation

// Position cursor inside a table cell first

// Insert row above current cell
editor.command.executeInsertTableTopRow()

// Insert row below current cell
editor.command.executeInsertTableBottomRow()

// Delete current row
editor.command.executeDeleteTableRow()

​
Column Operations

Manage table columns with precision: 
// Insert column to the left of current cell
editor.command.executeInsertTableLeftCol()

// Insert column to the right of current cell
editor.command.executeInsertTableRightCol()

// Delete current column
editor.command.executeDeleteTableCol()
All row and column operations require the cursor to be positioned inside a table cell.

​
Cell Operations

​
Merging Cells

Merge multiple cells into one:
1

Select Cells

Select the range of cells you want to merge by clicking and dragging.
2

Execute Merge

editor.command.executeMergeTableCell()

​
Unmerging Cells

Reverse a cell merge operation: 
// Position cursor in merged cell
editor.command.executeCancelMergeTableCell()

​
Splitting Cells

Split a cell vertically (create columns):
editor.command.executeSplitVerticalTableCell()

​
Table Styling

​
Border Styles

Customize table borders: 
import { TableBorder } from '@hufe921/canvas-editor'

// Set border type for entire table
editor.command.executeTableBorderType(TableBorder.ALL) // All borders
editor.command.executeTableBorderType(TableBorder.EMPTY) // No borders
editor.command.executeTableBorderType(TableBorder.EXTERNAL) // Only outer border
editor.command.executeTableBorderType(TableBorder.INTERNAL) // Only inner borders
Available border types:
  • TableBorder.ALL - Show all borders
  • TableBorder.EMPTY - Hide all borders
  • TableBorder.EXTERNAL - Only external borders
  • TableBorder.INTERNAL - Only internal borders

​
Border Colors

// Set border color for entire table
editor.command.executeTableBorderColor('#000000')

// Set border for individual cell
editor.command.executeTableTdBorderType(/* border configuration */)

​
Cell Background Colors

Apply background colors to individual cells: 
// Set background color for current cell
editor.command.executeTableTdBackgroundColor('#F0F0F0')

// Remove background color
editor.command.executeTableTdBackgroundColor('')

editor.command.executeTableTdBackgroundColor('#F5F5F5')

​
Vertical Alignment

Align cell content vertically: 
import { VerticalAlign } from '@hufe921/canvas-editor'

// Align to top
editor.command.executeTableTdVerticalAlign(VerticalAlign.TOP)

// Align to middle
editor.command.executeTableTdVerticalAlign(VerticalAlign.MIDDLE)

// Align to bottom
editor.command.executeTableTdVerticalAlign(VerticalAlign.BOTTOM)

​
Cell Diagonal Lines

Add diagonal slash lines to cells: 
import { TdSlash } from '@hufe921/canvas-editor'

// Add forward slash (\)
editor.command.executeTableTdSlashType(TdSlash.FORWARD)

// Add backward slash (/)
editor.command.executeTableTdSlashType(TdSlash.BACK)

// Remove slash
editor.command.executeTableTdSlashType(TdSlash.NONE)

​
Selecting Table Content

// Select all cells in the table
editor.command.executeTableSelectAll()

​
Deleting Tables

Remove an entire table: 
// Position cursor inside table
editor.command.executeDeleteTable()
Deleting a table is permanent and cannot be undone except through the undo command.

​
Complete Example

Create a styled table programmatically: 
import Editor, { TableBorder, VerticalAlign } from '@hufe921/canvas-editor'

const container = document.querySelector('.editor')
const editor = new Editor(container, {
  main: [{ value: '' }]
})

// Create a table
editor.command.executeInsertTable(4, 3)

// Style the table
function styleTable() {
  // Set border style
  editor.command.executeTableBorderType(TableBorder.ALL)
  editor.command.executeTableBorderColor('#CCCCCC')
  
  // Style header row (assuming cursor is in first row)
  editor.command.executeTableSelectAll()
  editor.command.executeTableTdBackgroundColor('#4A90E2')
  editor.command.executeTableTdVerticalAlign(VerticalAlign.MIDDLE)
  
  // Insert content
  editor.command.executeInsertElementList([
    { value: 'Header 1', bold: true, color: '#FFFFFF' }
  ])
}

styleTable()

​
Programmatic Table Creation

Create tables with predefined content and structure: 
editor.command.executeInsertElementList([
  {
    type: 'table',
    value: '',
    colgroup: [
      { width: 200 },
      { width: 200 },
      { width: 200 }
    ],
    trList: [
      {
        height: 40,
        tdList: [
          {
            colspan: 1,
            rowspan: 1,
            value: [
              { value: 'Cell 1-1', bold: true }
            ]
          },
          {
            colspan: 1,
            rowspan: 1,
            value: [
              { value: 'Cell 1-2' }
            ]
          },
          {
            colspan: 1,
            rowspan: 1,
            value: [
              { value: 'Cell 1-3' }
            ]
          }
        ]
      }
    ]
  }
])

​
Best Practices

  • Use headers with distinct styling for better readability
  • Apply consistent cell padding and spacing
  • Use background colors sparingly to highlight important data
  • Keep tables simple - complex nested structures reduce readability
  • Limit table size for better rendering performance
  • Avoid excessive cell merging which complicates the structure
  • Use table pagination for large datasets (see roadmap)
  • Ensure sufficient contrast between cell backgrounds and text
  • Use semantic headers for screen readers
  • Maintain logical reading order in merged cells

Text Formatting

Format text within table cells

Print & Export

Export tables to PDF or images

Build docs developers (and LLMs) love

Get started for freeTalk to us