0
# @tiptap/extension-table-row
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: @tiptap/extension-table-row
7
- **Package Type**: npm  
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tiptap/extension-table`
10
- **Part of Package**: @tiptap/extension-table (table row is exported from the main table package)
11

12
## Core Imports
13

14
```typescript
15
import { TableRow } from "@tiptap/extension-table";
16
```
17

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

20
```typescript
21
import { TableRow, type TableRowOptions } from "@tiptap/extension-table/row";
22
```
23

24
CommonJS:
25

26
```javascript
27
const { TableRow } = require("@tiptap/extension-table");
28
```
29

30
## Basic Usage
31

32
```typescript
33
import { Editor } from "@tiptap/core";
34
import { TableRow } from "@tiptap/extension-table";
35

36
// Add TableRow to your editor
37
const editor = new Editor({
38
  extensions: [
39
    TableRow.configure({
40
      HTMLAttributes: {
41
        class: 'my-table-row'
42
      }
43
    })
44
  ]
45
});
46

47
// TableRow works automatically within table structures
48
// It provides the <tr> elements that contain table cells and headers
49
```
50

51
## Architecture
52

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

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

61
## Capabilities
62

63
### TableRow Node Extension
64

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

67
```typescript { .api }
68
export const TableRow: Node<TableRowOptions, any>;
69
```
70

71
**Configuration:**
72

73
```typescript { .api }
74
interface TableRowOptions {
75
  /**
76
   * The HTML attributes for a table row node.
77
   * @default {}
78
   * @example { class: 'foo' }
79
   */
80
  HTMLAttributes: Record<string, any>;
81
}
82
```
83

84
**Usage Example:**
85

86
```typescript
87
import { TableRow } from "@tiptap/extension-table";
88

89
// Use with default options
90
TableRow
91

92
// Configure with custom HTML attributes
93
TableRow.configure({
94
  HTMLAttributes: {
95
    class: 'custom-table-row',
96
    'data-testid': 'table-row'
97
  }
98
})
99
```
100

101
### Node Configuration Properties
102

103
The TableRow extension is configured with the following properties:
104

105
```typescript { .api }
106
/**
107
 * Node name identifier used in ProseMirror schema
108
 */
109
name: "tableRow";
110

111
/**
112
 * Returns default options for the TableRow node
113
 */
114
addOptions(): TableRowOptions;
115

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

121
/**
122
 * Table role identifier for ProseMirror table integration
123
 */
124
tableRole: "row";
125

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

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

140

141
## Types
142

143
### TableRowOptions Interface
144

145
Configuration options for the TableRow node extension.
146

147
```typescript { .api }
148
interface TableRowOptions {
149
  /**
150
   * HTML attributes applied to the table row element
151
   * These attributes are merged with any attributes specified during rendering
152
   * @default {}
153
   */
154
  HTMLAttributes: Record<string, any>;
155
}
156
```
157

158
### Node Extension Type
159

160
```typescript { .api }
161
/**
162
 * TableRow is a Tiptap Node extension with TableRowOptions configuration
163
 * Created using Node.create<TableRowOptions>()
164
 */
165
type TableRowExtension = Node<TableRowOptions, any>;
166

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

174
## Integration Notes
175

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

184
## Error Handling
185

186
The TableRow extension follows standard Tiptap patterns:
187

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