or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-tiptap--extension-table-row

Table row functionality from @tiptap/extension-table - provides TableRow node extension for table row elements

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@tiptap/extension-table@3.4.x

To install, run

npx @tessl/cli install tessl/npm-tiptap--extension-table-row@3.4.0

index.mddocs/

@tiptap/extension-table-row

The @tiptap/extension-table-row package provides table row functionality for the Tiptap rich text editor framework. It implements the TableRow Node extension that defines how table rows behave within the editor as part of the larger @tiptap/extension-table package.

Package Information

  • Package Name: @tiptap/extension-table-row
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-table
  • Part of Package: @tiptap/extension-table (table row is exported from the main table package)

Core Imports

import { TableRow } from "@tiptap/extension-table";

For importing just the table row functionality using the subpath export:

import { TableRow, type TableRowOptions } from "@tiptap/extension-table/row";

CommonJS:

const { TableRow } = require("@tiptap/extension-table");

Basic Usage

import { Editor } from "@tiptap/core";
import { TableRow } from "@tiptap/extension-table";

// Add TableRow to your editor
const editor = new Editor({
  extensions: [
    TableRow.configure({
      HTMLAttributes: {
        class: 'my-table-row'
      }
    })
  ]
});

// TableRow works automatically within table structures
// It provides the <tr> elements that contain table cells and headers

Architecture

The TableRow extension is built as a Tiptap Node extension with the following key characteristics:

  • Node Type: tableRow - defines the node name within ProseMirror schema
  • Table Role: row - integrates with ProseMirror's table role system
  • Content Model: (tableCell | tableHeader)* - allows table cells and headers as children
  • HTML Mapping: Maps to HTML <tr> elements with configurable attributes
  • ProseMirror Integration: Uses standard Tiptap Node patterns for parsing and rendering

Capabilities

TableRow Node Extension

Main table row node extension for creating table rows within Tiptap editors.

export const TableRow: Node<TableRowOptions, any>;

Configuration:

interface TableRowOptions {
  /**
   * The HTML attributes for a table row node.
   * @default {}
   * @example { class: 'foo' }
   */
  HTMLAttributes: Record<string, any>;
}

Usage Example:

import { TableRow } from "@tiptap/extension-table";

// Use with default options
TableRow

// Configure with custom HTML attributes
TableRow.configure({
  HTMLAttributes: {
    class: 'custom-table-row',
    'data-testid': 'table-row'
  }
})

Node Configuration Properties

The TableRow extension is configured with the following properties:

/**
 * Node name identifier used in ProseMirror schema
 */
name: "tableRow";

/**
 * Returns default options for the TableRow node
 */
addOptions(): TableRowOptions;

/**
 * Content model specification - allows table cells and headers as children
 */
content: "(tableCell | tableHeader)*";

/**
 * Table role identifier for ProseMirror table integration
 */
tableRole: "row";

/**
 * Defines HTML parsing rules for table rows
 * @returns Array containing single configuration object matching <tr> elements
 */
parseHTML(): [{ tag: "tr" }];

/**
 * Defines HTML rendering output for table rows
 * @param params - Rendering parameters including HTMLAttributes  
 * @returns HTML rendering array format ['tr', mergedAttributes, 0]
 */
renderHTML({ HTMLAttributes }: { HTMLAttributes: Record<string, any> }): ['tr', Record<string, any>, 0];

Types

TableRowOptions Interface

Configuration options for the TableRow node extension.

interface TableRowOptions {
  /**
   * HTML attributes applied to the table row element
   * These attributes are merged with any attributes specified during rendering
   * @default {}
   */
  HTMLAttributes: Record<string, any>;
}

Node Extension Type

/**
 * TableRow is a Tiptap Node extension with TableRowOptions configuration
 * Created using Node.create<TableRowOptions>()
 */
type TableRowExtension = Node<TableRowOptions, any>;

/**
 * Utility function from @tiptap/core for merging HTML attributes
 * Used internally by TableRow's renderHTML method
 */
function mergeAttributes(...attrs: Record<string, any>[]): Record<string, any>;

Integration Notes

  • Dependencies: Requires @tiptap/core for Node base class and mergeAttributes utility
  • Utility Functions: Uses mergeAttributes from @tiptap/core to combine default HTMLAttributes with runtime attributes
  • Table Ecosystem: Works in conjunction with TableCell, TableHeader, and Table extensions
  • ProseMirror: Integrates with ProseMirror's table role system for proper table behavior
  • HTML Output: Renders as <tr> elements in the final HTML output
  • Styling: Supports custom CSS classes and attributes via HTMLAttributes configuration
  • Content Validation: Automatically validates that only table cells and headers are allowed as children

Error Handling

The TableRow extension follows standard Tiptap patterns:

  • Invalid content models are rejected by ProseMirror's schema validation
  • HTML parsing only matches <tr> tags, other elements are ignored
  • Missing dependencies will cause initialization errors - ensure @tiptap/core is available
  • Table structure violations are handled by ProseMirror's table plugin validation