Example | Tiptap Table Plus

Command	Parameters	Default	Description
duplicateColumn	withContent (boolean)	true	Duplicates the current column. If true, copies column content; if false, only duplicates the structure.
duplicateRow	withContent (boolean)	true	Duplicates the current row. If true, copies row content; if false, only duplicates the structure.

Example

Here are examples of how to use these commands in your Tiptap editor setup for both Tiptap V2 and V3:

Tiptap V3

import { Editor } from '@tiptap/core';
import { Table, TableRow, TableCell, TableHeader } from '@tiptap/extension-table';
import { WithoutPagination } from 'tiptap-table-plus';

const { TableKitPlus } = WithoutPagination;

const editor = new Editor({
extensions: [
  TableKitPlus
],
content: '<table border="1"><tr><th colspan="1" rowspan="1"><p>Name</p></th><th colspan="1" rowspan="1"><p>Region</p></th><th colspan="1" rowspan="1"><p>Country</p></th></tr><tr><td colspan="1" rowspan="1"><p>Liberty Hays</p></td><td colspan="1" rowspan="1"><p>Araucanía</p></td><td colspan="1" rowspan="1"><p>Canada</p></td></tr></table>',
});

Tiptap V2

import { Editor } from '@tiptap/core';
import TableRow from '@tiptap/extension-table-row';
import TableCell from '@tiptap/extension-table-cell';
import TableHeader from '@tiptap/extension-table-header';
import { WithoutPagination } from 'tiptap-table-plus';

const { TablePlus, TableRowPlus, TableCellPlus, TableHeaderPlus } = WithoutPagination;

const editor = new Editor({
extensions: [
  TablePlus,
  TableRowPlus,
  TableCellPlus,
  TableHeaderPlus,
],
content: '<table border="1"><tr><th colspan="1" rowspan="1"><p>Name</p></th><th colspan="1" rowspan="1"><p>Region</p></th><th colspan="1" rowspan="1"><p>Country</p></th></tr><tr><td colspan="1" rowspan="1"><p>Liberty Hays</p></td><td colspan="1" rowspan="1"><p>Araucanía</p></td><td colspan="1" rowspan="1"><p>Canada</p></td></tr></table>',
});

You can now use all the advanced table features in your editor.

Example

Links:

• NPM
• GitHub