Table

This is the Table extension. It allows you to insert and manipulate tables with support for adding/removing rows and columns, merging cells, and more.

Basic Table

Insert a default 3x3 table with header row.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlTable :editor="editor" :action="'insertTable'" />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'addColumnBefore'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'addColumnAfter'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'addRowBefore'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'addRowAfter'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'deleteRow'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'deleteColumn'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'mergeCells'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'splitCell'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'deleteTable'"
      />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlTable,
    Table,
    TableRow,
    TableHeader,
    TableCell,
  } from '@platform-ui/rte'

  const content = ref()
  const HTML = ref()

  const editor = new Editor({
    content: '<p>Click the table button to insert a table</p>',
    extensions: [
      Table,
      TableRow,
      TableHeader,
      TableCell,
      RequiredExtensions.configure({}),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Customizing rows and columns

Insert a table with custom rows, columns, and header settings.

Vue

<template>
  <HLTextEditor :editor="editor">
    <template #header>
      <RTEControlTable
        :editor="editor"
        :action="'insertTable'"
        :defaultRows="5"
        :defaultColumns="4"
        :withHeader="false"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'addColumnBefore'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'addColumnAfter'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'addRowBefore'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'addRowAfter'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'deleteRow'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'deleteColumn'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'mergeCells'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'splitCell'"
      />
      <RTEControlTable
        v-if="editor?.isActive('table')"
        :editor="editor"
        :action="'deleteTable'"
      />
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlTable,
    Table,
    TableRow,
    TableHeader,
    TableCell,
  } from '@platform-ui/rte'

  const editor = new Editor({
    content: '<p>Insert a custom table with specific dimensions</p>',
    extensions: [
      Table,
      TableRow,
      TableHeader,
      TableCell,
      RequiredExtensions.configure({}),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Without Header

Insert a table without a header row.

Vue

<template>
  <HLTextEditor :editor="editor2">
    <template #header>
      <RTEControlHistory :editor="editor2" type="undo" />
      <RTEControlHistory :editor="editor2" type="redo" />
      <RTEControlToolbarSeparator />
      <RTEControlTable
        :editor="editor2"
        :action="'insertTable'"
        :defaultRows="5"
        :defaultColumns="4"
        :withHeader="false"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'addColumnBefore'"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'addColumnAfter'"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'addRowBefore'"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'addRowAfter'"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'deleteRow'"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'deleteColumn'"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'mergeCells'"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'splitCell'"
      />
      <RTEControlTable
        v-if="editor2?.isActive('table')"
        :editor="editor2"
        :action="'deleteTable'"
      />
    </template>
    <template #footer>
      <div>Footer</div>
    </template>
  </HLTextEditor>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import {
    RequiredExtensions,
    Editor,
    HLTextEditor,
    RTEControlTable,
    Table,
    TableRow,
    TableHeader,
    TableCell,
  } from '@platform-ui/rte'

  const editor2 = new Editor({
    content: '<p>Insert a custom table with specific dimensions</p>',
    extensions: [
      Table,
      TableRow,
      TableHeader,
      TableCell,
      RequiredExtensions.configure({}),
    ],
    onUpdate({ editor }) {
      content.value = editor.getText()
      HTML.value = editor.getHTML()
    },
  })
</script>

Imports

import {
  RequiredExtensions,
  Editor,
  HLTextEditor,
  RTEControlTable,
  Table,
  TableRow,
  TableHeader,
  TableCell,
} from '@platform-ui/rte'

Commands

// Insert table
editor
  ?.chain()
  .focus()
  .insertTable({
    rows: 3,
    cols: 3,
    withHeaderRow: true,
  })
  .run()

// Add column before current column
editor?.chain().focus().addColumnBefore().run()

// Add column after current column
editor?.chain().focus().addColumnAfter().run()

// Add row before current row
editor?.chain().focus().addRowBefore().run()

// Add row after current row
editor?.chain().focus().addRowAfter().run()

// Delete current column
editor?.chain().focus().deleteColumn().run()

// Delete current row
editor?.chain().focus().deleteRow().run()

// Delete entire table
editor?.chain().focus().deleteTable().run()

// Merge selected cells
editor?.chain().focus().mergeCells().run()

// Split merged cell
editor?.chain().focus().splitCell().run()

Props

Prop	Type	Default	Description
editor *	Editor	-	The editor instance
action *	Actions	InsertTable	The table action to perform
defaultRows	number	3	Default number of rows when inserting
defaultColumns	number	3	Default number of columns when inserting
withHeader	boolean	true	Whether to include a header row
tooltipLabel	string	-	The tooltip label
tooltipPosition	Placement	'top'	The tooltip position
language	Language	'en-US'	The language for localization
ariaLabel	string	null	Accessibility label

Table Actions

type TableControlActions =
  | 'addColumnAfter'
  | 'addColumnBefore'
  | 'addRowAfter'
  | 'addRowBefore'
  | 'deleteColumn'
  | 'deleteRow'
  | 'deleteTable'
  | 'insertTable'
  | 'mergeCells'
  | 'splitCell'

Slots

Slot	Description	Default
icon	The icon to display	Depends on the action prop