TABLE EDIT

Table-related commands executed via editor.execCommand — table insertion/removal, row/column operations, cell properties, borders, formulas.

Commands

• command - cellBackground
• command - cellSizeEqual
• command - cellVerticalAlign
• command - columnWidthEqual
• command - deleteCol
• command - deleteRow
• command - deleteTable
• command - fitTableWidth
• command - insertCol
• command - insertRow
• command - insertTable
• command - mergeCell
• command - resizeTable
• command - rowHeightEqual
• command - setBorderColor
• command - setBorderStyle
• command - setBorderWidth
• command - setCellProperties
• command - setFormula
• command - setTableProperties
• command - splitCell

command - cellBackground

Sets the background color of the selected cells.

editor.execCommand('cellBackground', '#ff0000');

command - cellSizeEqual

Equalizes the width and height of the selected cells.

editor.execCommand('cellSizeEqual');

command - cellVerticalAlign

Sets the vertical alignment of the selected cells.

editor.execCommand('cellVerticalAlign', 'top');     // top
editor.execCommand('cellVerticalAlign', 'middle');  // middle
editor.execCommand('cellVerticalAlign', 'bottom');  // bottom

command - columnWidthEqual

Equalizes the width of the selected columns.

editor.execCommand('columnWidthEqual');

command - deleteCol

Removes the selected column(s).

editor.execCommand('deleteCol');

command - deleteRow

Removes the selected row(s).

editor.execCommand('deleteRow');

command - deleteTable

Removes the selected table.

editor.execCommand('deleteTable');

command - fitTableWidth

Sets the selected table's width to 100%.

editor.execCommand('fitTableWidth');

command - insertCol

Inserts a column at the given index in the selected table.

editor.execCommand('insertCol', 1);
editor.execCommand('insertCol', 5);

command - insertRow

Inserts a row at the given index in the selected table.

editor.execCommand('insertRow', 1);
editor.execCommand('insertRow', 5);

command - insertTable

Inserts a table at the caret position. If the caret is between paragraphs, the paragraph is split and the table is inserted between. If a selection exists, the selection is removed before inserting the table.

editor.execCommand('insertTable', { row: 2, col: 2 });  // insert a 2x2 table

command - mergeCell

Merges the selected cells.

editor.execCommand('mergeCell');

command - resizeTable

Sets the width and height of the selected table.

editor.execCommand('resizeTable', 800, 400);

command - rowHeightEqual

Equalizes the height of the selected rows.

editor.execCommand('rowHeightEqual');

command - setBorderColor

Sets the border color of the selected cells.

editor.execCommand('setBorderColor', '#ff0000');  // red border

command - setBorderStyle

Sets the border style of the selected cells.

editor.execCommand('setBorderStyle', 'none');   // no border
editor.execCommand('setBorderStyle', 'solid');  // solid line

command - setBorderWidth

Sets the border width of the selected cells.

editor.execCommand('setBorderWidth', 5);  // 5px border

command - setCellProperties

Sets properties on the selected cell.

// Cell border
editor.execCommand('setCellProperties', {
  border: {
    style: 'dotted',                                  // 'solid', 'dotted', 'dashed', 'double'
    width: 5,                                         // px
    color: { r: 0, g: 0, b: 255 },
    select: [true, true, true, true, true, true]     // top, middle, bottom, left, center, right
  }
});

// Header cell
editor.execCommand('setCellProperties', {
  tableHead: {
    scope: 'none',  // 'none', 'row', 'col'
    tagName: 'th'   // 'th', 'td'
  }
});

// Cell background color
editor.execCommand('setCellProperties', {
  style: { backgroundColor: { r: 255, g: 0, b: 0 } }
});

// Vertical alignment
editor.execCommand('setCellProperties', {
  style: { verticalAlign: 'middle' }   // 'top', 'middle', 'bottom'
});

// Horizontal alignment
editor.execCommand('setCellProperties', {
  style: { align: 'right' }            // 'left', 'center', 'right', 'justify'
});

command - setFormula

Sets a formula on the selected cell.

editor.execCommand('setFormula', 'SUM(A1:B3)');      // sum
editor.execCommand('setFormula', 'AVERAGE(A1:B3)');  // average

command - setTableProperties

Sets properties on the selected table.

// Table caption
editor.execCommand('setTableProperties', {
  caption: {
    position: 'top',        // 'none', 'top', 'bottom'
    text: 'Table caption'
  }
});

// Header cells
editor.execCommand('setTableProperties', {
  head: {
    scope: false,
    value: 'row'            // 'none', 'row', 'col', 'both'
  }
});

// Table border style
editor.execCommand('setTableProperties', {
  style: {
    border: {
      style: 'dotted',                       // 'solid', 'dotted', 'dashed', 'double'
      width: 10,                             // px
      color: { r: 255, g: 0, b: 0 }
    }
  }
});

// Table width / height
editor.execCommand('setTableProperties', {
  style: {
    width:  { value: 800, unit: 'px' },
    height: { value: 300, unit: 'px' }
  }
});

// Table alignment
editor.execCommand('setTableProperties', {
  style: { blockAlign: 'center' }            // 'left', 'center', 'right'
});

// Other table style
editor.execCommand('setTableProperties', {
  style: {
    tableLayout: 'auto',   // 'auto', 'fixed'
    display: 'table'       // 'table', 'inline-table'
  }
});

command - splitCell

Splits the cell at the caret into the specified rows and columns.

editor.execCommand('splitCell', 2, 2);