CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-tiptap--extension-table-header

Tiptap extension for creating table header cells in rich text editors

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

Tiptap Extension Table Header

The @tiptap/extension-table-header package provides table header cell functionality for Tiptap rich text editors. It exports the TableHeader node extension and its configuration options from the core @tiptap/extension-table package.

Package Information

  • Package Name: @tiptap/extension-table-header
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @tiptap/extension-table-header

Core Imports

import TableHeader from "@tiptap/extension-table-header";
import { TableHeader, TableHeaderOptions } from "@tiptap/extension-table-header";

For CommonJS:

const TableHeader = require("@tiptap/extension-table-header");
const { TableHeader, TableHeaderOptions } = require("@tiptap/extension-table-header");

Basic Usage

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

const editor = new Editor({
  extensions: [
    TableHeader.configure({
      HTMLAttributes: {
        class: 'custom-table-header',
      },
    }),
  ],
});

Capabilities

Table Header Node Extension

Creates table header cells (th elements) in Tiptap tables with support for spanning columns and rows.

/**
 * Tiptap Node extension for creating table header cells
 */
const TableHeader: Node<TableHeaderOptions>;

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

Usage Example:

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

// Basic configuration
const editor = new Editor({
  extensions: [
    TableHeader,
  ],
});

// With custom HTML attributes
const editorWithCustomAttributes = new Editor({
  extensions: [
    TableHeader.configure({
      HTMLAttributes: {
        class: 'my-table-header',
        style: 'font-weight: bold;',
      },
    }),
  ],
});

Node Properties

The TableHeader extension defines a node with the following characteristics:

interface TableHeaderNode {
  /** Node name identifier */
  name: 'tableHeader';
  /** Content model allowing block-level content */
  content: 'block+';
  /** Table role for ProseMirror table functionality */
  tableRole: 'header_cell';
  /** Prevents content from being selected across node boundaries */
  isolating: true;
}

Node Attributes

Table header nodes support the following attributes:

interface TableHeaderAttributes {
  /** Number of columns the header spans */
  colspan: number; // default: 1
  /** Number of rows the header spans */
  rowspan: number; // default: 1
  /** Array of column widths in pixels */
  colwidth: number[] | null; // default: null
}

Usage with attributes:

// HTML: <th colspan="2" rowspan="1" colwidth="100,150">Header</th>
// The extension automatically parses these attributes from HTML

HTML Integration

The TableHeader extension integrates with standard HTML table markup:

interface HTMLIntegration {
  /** Parses th elements from HTML */
  parseHTML(): { tag: 'th' }[];
  /** Renders as th elements with merged attributes */
  renderHTML(options: { HTMLAttributes: Record<string, any> }): ['th', Record<string, any>, 0];
}

Example HTML output:

<th class="custom-header" colspan="1" rowspan="1">
  <p>Header content</p>
</th>

Configuration Options

HTMLAttributes

Customize the HTML attributes applied to all table header elements:

interface TableHeaderOptions {
  HTMLAttributes: Record<string, any>;
}

Configuration examples:

// Add CSS classes
TableHeader.configure({
  HTMLAttributes: {
    class: 'table-header-cell',
  },
});

// Add inline styles
TableHeader.configure({
  HTMLAttributes: {
    style: 'background-color: #f5f5f5; font-weight: bold;',
  },
});

// Add data attributes
TableHeader.configure({
  HTMLAttributes: {
    'data-testid': 'table-header',
    'data-role': 'header',
  },
});

Types

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

/**
 * Tiptap Node extension for creating table header cells (th elements)
 * Re-exported from @tiptap/extension-table
 */
declare const TableHeader: Node<TableHeaderOptions>;

docs

index.md

tile.json