Skip to main content
Table types define the structure and configuration of tables in Canvas Editor.

​
ITable

Complete table interface combining attributes, rules, and element properties.
src/editor/interface/Element.ts
type ITable = ITableAttr & ITableRule & ITableElement

​
ITableAttr

Table structure and styling attributes.
src/editor/interface/Element.ts
interface ITableAttr {
  colgroup?: IColgroup[]
  trList?: ITr[]
  borderType?: TableBorder
  borderColor?: string
  borderWidth?: number
  borderExternalWidth?: number
  translateX?: number
}
​
colgroup
IColgroup[]
Column definitions with widths
​
trList
ITr[]
Array of table rows
​
borderType
TableBorder
Border style: ALL, EMPTY, or EXTERNAL
​
borderColor
string
Border color (hex format)
​
borderWidth
number
Internal border width in pixels
​
borderExternalWidth
number
External border width in pixels
​
translateX
number
Horizontal translation offset

​
IColgroup

Column definition.
src/editor/interface/table/Colgroup.ts
interface IColgroup {
  width: number
}
​
width
number
required
Column width in pixels

​
Example

const columns: IColgroup[] = [
  { width: 100 },  // First column: 100px
  { width: 200 },  // Second column: 200px
  { width: 150 }   // Third column: 150px
]

​
ITr

Table row definition.
src/editor/interface/table/Tr.ts
interface ITr {
  id?: string
  height: number
  tdList: ITd[]
  pagingRepeat?: boolean
  minHeight?: number
}
​
id
string
Unique row identifier
​
height
number
required
Row height in pixels
​
tdList
ITd[]
required
Array of cells in this row
​
pagingRepeat
boolean
Whether row repeats on each page (for headers)
​
minHeight
number
Minimum row height

​
ITd

Table cell definition.
src/editor/interface/table/Td.ts
interface ITd {
  id?: string
  colspan?: number
  rowspan?: number
  valueList: IElement[]
  verticalAlign?: VerticalAlign
  backgroundColor?: string
  borderTypes?: TdBorder[]
  slashTypes?: TdSlash[]
  // ... more properties
}
​
id
string
Unique cell identifier
​
colspan
number
default:"1"
Number of columns to span
​
rowspan
number
default:"1"
Number of rows to span
​
valueList
IElement[]
required
Cell content elements
​
verticalAlign
VerticalAlign
Vertical alignment: TOP, MIDDLE, or BOTTOM
​
backgroundColor
string
Cell background color (hex format)
​
borderTypes
TdBorder[]
Which borders to show: TOP, RIGHT, BOTTOM, LEFT
​
slashTypes
TdSlash[]
Diagonal slash lines: FORWARD or BACK

​
Creating Tables

​
Simple Table

import { ElementType } from '@hufe921/canvas-editor'

const table: IElement = {
  type: ElementType.TABLE,
  value: '',
  colgroup: [
    { width: 150 },
    { width: 150 },
    { width: 150 }
  ],
  trList: [
    {
      height: 40,
      tdList: [
        { valueList: [{ value: 'Header 1' }] },
        { valueList: [{ value: 'Header 2' }] },
        { valueList: [{ value: 'Header 3' }] }
      ]
    },
    {
      height: 40,
      tdList: [
        { valueList: [{ value: 'Cell 1' }] },
        { valueList: [{ value: 'Cell 2' }] },
        { valueList: [{ value: 'Cell 3' }] }
      ]
    }
  ]
}

editor.command.executeInsertElementList([table])

​
Formatted Table

import { TableBorder, VerticalAlign } from '@hufe921/canvas-editor'

const formattedTable: IElement = {
  type: ElementType.TABLE,
  value: '',
  borderType: TableBorder.ALL,
  borderColor: '#000000',
  borderWidth: 1,
  colgroup: [
    { width: 200 },
    { width: 300 }
  ],
  trList: [
    {
      height: 50,
      tdList: [
        {
          valueList: [{ value: 'Name', bold: true }],
          backgroundColor: '#CCCCCC',
          verticalAlign: VerticalAlign.MIDDLE
        },
        {
          valueList: [{ value: 'Value', bold: true }],
          backgroundColor: '#CCCCCC',
          verticalAlign: VerticalAlign.MIDDLE
        }
      ]
    },
    {
      height: 40,
      tdList: [
        { valueList: [{ value: 'Item 1' }] },
        { valueList: [{ value: 'Description 1' }] }
      ]
    }
  ]
}

​
Table with Merged Cells

const mergedTable: IElement = {
  type: ElementType.TABLE,
  value: '',
  colgroup: [
    { width: 100 },
    { width: 100 },
    { width: 100 }
  ],
  trList: [
    {
      height: 40,
      tdList: [
        {
          colspan: 3,  // Spans all 3 columns
          valueList: [{ value: 'Title', bold: true }],
          verticalAlign: VerticalAlign.MIDDLE
        }
      ]
    },
    {
      height: 60,
      tdList: [
        {
          rowspan: 2,  // Spans 2 rows
          valueList: [{ value: 'Side' }]
        },
        { valueList: [{ value: 'Top Right' }] },
        { valueList: [{ value: 'Top Far Right' }] }
      ]
    },
    {
      height: 60,
      tdList: [
        { valueList: [{ value: 'Bottom Right' }] },
        { valueList: [{ value: 'Bottom Far Right' }] }
      ]
    }
  ]
}

​
Table with Diagonal Slash

import { TdSlash } from '@hufe921/canvas-editor'

const slashTable: IElement = {
  type: ElementType.TABLE,
  value: '',
  colgroup: [
    { width: 150 },
    { width: 150 }
  ],
  trList: [
    {
      height: 60,
      tdList: [
        {
          valueList: [
            { value: 'Name' },
            { value: '\n' },
            { value: 'Date' }
          ],
          slashTypes: [TdSlash.FORWARD]  // Add / diagonal
        },
        { valueList: [{ value: 'Value' }] }
      ]
    }
  ]
}

​
Table Operations

​
Using Command API

// Insert new table
editor.command.executeInsertTable({ row: 3, col: 3 })

// Add rows
editor.command.executeInsertTableTopRow()
editor.command.executeInsertTableBottomRow()

// Add columns
editor.command.executeInsertTableLeftCol()
editor.command.executeInsertTableRightCol()

// Delete
editor.command.executeDeleteTableRow()
editor.command.executeDeleteTableCol()
editor.command.executeDeleteTable()

// Merge/split cells
editor.command.executeMergeTableCell()
editor.command.executeCancelMergeTableCell()
editor.command.executeSplitVerticalTableCell()
editor.command.executeSplitHorizontalTableCell()

​
Styling Tables

import { TableBorder, VerticalAlign, TdBorder } from '@hufe921/canvas-editor'

// Set border style
editor.command.executeTableBorderType(TableBorder.ALL)
editor.command.executeTableBorderColor('#0000FF')

// Set cell alignment
editor.command.executeTableTdVerticalAlign(VerticalAlign.MIDDLE)

// Set cell background
editor.command.executeTableTdBackgroundColor('#F0F0F0')

// Custom cell borders
editor.command.executeTableTdBorderType([
  TdBorder.TOP,
  TdBorder.BOTTOM
])

​
ITableRule

Table behavior rules.
src/editor/interface/Element.ts
interface ITableRule {
  tableToolDisabled?: boolean
}
​
tableToolDisabled
boolean
Disable table editing tools

​
Example

const readonlyTable: IElement = {
  type: ElementType.TABLE,
  value: '',
  tableToolDisabled: true,  // Disable table toolbar
  colgroup: [{ width: 200 }],
  trList: [{
    height: 40,
    tdList: [{
      valueList: [{ value: 'Read-only cell' }]
    }]
  }]
}

​
Complete Example

import Editor, {
  ElementType,
  TableBorder,
  VerticalAlign,
  TdBorder,
  IElement,
  ITr,
  ITd
} from '@hufe921/canvas-editor'

const editor = new Editor(container, data)

// Create a styled data table
const createDataTable = (
  headers: string[],
  rows: string[][]
): IElement => {
  const colgroup = headers.map(() => ({ 
    width: 150 
  }))

  const headerRow: ITr = {
    height: 50,
    tdList: headers.map(header => ({
      valueList: [{ 
        value: header, 
        bold: true,
        color: '#FFFFFF'
      }],
      backgroundColor: '#4A90E2',
      verticalAlign: VerticalAlign.MIDDLE
    }))
  }

  const dataRows: ITr[] = rows.map((row, idx) => ({
    height: 40,
    tdList: row.map(cell => ({
      valueList: [{ value: cell }],
      backgroundColor: idx % 2 === 0 ? '#FFFFFF' : '#F5F5F5'
    }))
  }))

  return {
    type: ElementType.TABLE,
    value: '',
    borderType: TableBorder.ALL,
    borderColor: '#CCCCCC',
    borderWidth: 1,
    colgroup,
    trList: [headerRow, ...dataRows]
  }
}

// Use it
const table = createDataTable(
  ['Name', 'Email', 'Status'],
  [
    ['John Doe', '[email protected]', 'Active'],
    ['Jane Smith', '[email protected]', 'Active'],
    ['Bob Johnson', '[email protected]', 'Inactive']
  ]
)

editor.command.executeInsertElementList([table])

Build docs developers (and LLMs) love

Get started for freeTalk to us