Tiptap tables: add rows without losing the document structure

For an original example, a repair note needs three columns: Component, Inspection, and Finding. The author adds a row for a replacement gasket after writing the initial inspection. That row should remain part of the note when the saved document is loaded again, with its finding under the correct header.

Register the complete table schema

In a current Tiptap 3 application that already has its base document extensions, add the kit to the existing extension list:

import { TableKit } from '@tiptap/extension-table';

const inspectionTables = TableKit.configure({
  table: { resizable: true }
});

Add inspectionTables once alongside the application's other extensions. This fragment supplies table support; it does not create an editor or install base paragraphs, text, styles, or application controls. Keep package versions compatible with the installed Tiptap release. Do not register a second standalone Table extension on top of the same kit.

The kit includes Table, TableRow, TableHeader, and TableCell. A table needs its child node types as well as its outer node. The Table reference documents resizing options and commands.

Insert a table where the author is working

With editor referring to the initialized application instance, this action inserts four rows and three columns, including a header row:

editor.chain().focus().insertTable({
  rows: 4,
  cols: 3,
  withHeaderRow: true
}).run();

The first row is included in the row count. Fill its headers with Component, Inspection, and Finding. Use the three following rows for the actual inspection records; do not leave illustrative findings in a real maintenance note.

Create a separate Add row action for an author who is already inside a table:

const canAddRow = editor.can().addRowAfter();

if (canAddRow) {
  editor.chain().focus().addRowAfter().run();
}

Reflect the command's availability in the button state and update it as the selection changes. A cursor outside the table does not identify a row after which the command can insert. If an external button loses the intended selection in your interface, fix that focus behavior before relying on the command.

Decide which structural edits belong in the interface

The table API also provides column insertion, row and column deletion, cell merging, and splitting. Expose the actions authors actually need. Deleting a column removes its cells; it is a content change that deserves a clear control and an available undo route.

For the inspection note, add the gasket row after the seal row, then enter its own finding. Check that the existing seal finding stayed in its original row. A successful command return alone cannot establish that the author chose the correct location.

Use header cells for the labels rather than styling the first row to look bold. Merging cells changes the table's structure, so avoid a merged title row when a heading above the table expresses the same information more clearly.

Save the model, then style the reader's table

Capture the supported representation used by the application's persistence path:

const documentSnapshot = editor.getJSON();

That value is an in-memory snapshot, not a server save. Persist it through the application's authorized document service and reload it with the same supported table nodes. If the application stores HTML instead, use its established serialization and safe rendering path. The Tiptap document integration guide covers deliberately loading supported content.

A resizable editor table does not supply the receiving page's entire layout. Give the published table readable borders, spacing, and an intentional narrow-screen treatment. If the table needs horizontal scrolling, confine it to the table region so navigation and surrounding paragraphs still fit the page.

Reopen the gasket finding in context

In the running development application, insert the table, add the gasket row, edit its finding, and save. Leave the note and reopen it from storage. Confirm the header row, original seal finding, and new gasket finding remain correctly associated. Exercise Undo on an added row in a separate unsaved copy so that the saved acceptance record remains clear.

The standalone editable table builder serves a different purpose: editing and sorting cells in a generated page. Tiptap table commands maintain a table inside a rich document. Finish by reading the reopened inspection at the width its maintainer uses and checking that each finding still identifies the right component.