Table Editor

@erag/text-editor-vue includes complete table creation and editing tools built into the toolbar and menubar.

---

Inserting Tables

Click the Table icon in the toolbar or navigate to Table → Insert table in the menubar. A grid selector allows you to choose row and column dimensions (e.g. 3x3, 4x5).

<script setup lang="ts">
import { shallowRef } from 'vue';
import { Editor, type EditorInit } from '@erag/text-editor-vue';

const content = shallowRef('');
const config: EditorInit = {
    tableGridSize: 10,
    toolbar: 'undo redo | blocks | bold italic | table | code',
};
</script>

<template>
    <Editor v-model="content" :init="config" />
</template>

tableGridSize controls the maximum row and column count offered by the visual picker. Its default is 10.

---

Table Operations

When a table or table cell is focused inside the editor canvas, the Table menu unlocks full operations:

• Row Operations: Insert row above, Insert row below, Delete row.
• Column Operations: Insert column before, Insert column after, Delete column.
• Table Deletion: Delete entire table.
• Cell Operations: Cell properties, merge cells, and split cells.
• Table Properties: Width, cell padding, borders, colors, and alignment through the properties dialog.

Table-only actions remain disabled until the current selection is inside a table. Press Tab or Shift+Tab inside a cell to move forward or backward through table cells.

Table alignment is applied with table margins so left, center, and right remain visually distinct across editor widths. Cell properties separately support horizontal left/center/right alignment and vertical top/middle/bottom alignment.