0
# Tiptap Extension Table Cell
1

2
The @tiptap/extension-table-cell package is a deprecated wrapper that re-exports the TableCell extension from @tiptap/extension-table for backward compatibility. It provides table cell functionality for the Tiptap rich text editor built on ProseMirror.
3

4
## Package Information
5

6
- **Package Name**: @tiptap/extension-table-cell
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @tiptap/extension-table-cell`
10
- **Status**: Deprecated (use @tiptap/extension-table instead)
11

12
## Core Imports
13

14
```typescript
15
import TableCell from "@tiptap/extension-table-cell";
16
```
17

18
Named imports:
19

20
```typescript
21
import { TableCell, TableCellOptions } from "@tiptap/extension-table-cell";
22
```
23

24
For CommonJS:
25

26
```javascript
27
const TableCell = require("@tiptap/extension-table-cell");
28
const { TableCell, TableCellOptions } = require("@tiptap/extension-table-cell");
29
```
30

31
## Basic Usage
32

33
```typescript
34
import { Editor } from "@tiptap/core";
35
import TableCell from "@tiptap/extension-table-cell";
36

37
const editor = new Editor({
38
  extensions: [
39
    TableCell.configure({
40
      HTMLAttributes: {
41
        class: "custom-table-cell",
42
      },
43
    }),
44
  ],
45
});
46
```
47

48
## Capabilities
49

50
### TableCell Extension
51

52
Creates table cell nodes for Tiptap editor. This is a Node extension that handles `<td>` HTML elements and supports spanning attributes.
53

54
```typescript { .api }
55
/**
56
 * TableCell node extension for Tiptap editor
57
 * Handles table cell functionality with support for colspan, rowspan, and custom attributes
58
 */
59
const TableCell: Node<TableCellOptions>;
60

61
/**
62
 * Node extension class from @tiptap/core
63
 * Extends Extendable with configuration options and storage
64
 */
65
abstract class Node<Options = any, Storage = any> {
66
  type: 'node';
67
  name: string;
68
  
69
  /**
70
   * Create a new Node instance
71
   */
72
  static create<O = any, S = any>(
73
    config?: Partial<NodeConfig<O, S>> | (() => Partial<NodeConfig<O, S>>)
74
  ): Node<O, S>;
75
  
76
  /**
77
   * Configure the node with partial options
78
   */
79
  configure(options?: Partial<Options>): Node<Options, Storage>;
80
  
81
  /**
82
   * Extend the node with additional configuration
83
   */
84
  extend<ExtendedOptions = Options, ExtendedStorage = Storage>(
85
    extendedConfig?: Partial<NodeConfig<ExtendedOptions, ExtendedStorage>>
86
  ): Node<ExtendedOptions, ExtendedStorage>;
87
}
88

89
/**
90
 * DOM output specification type for rendering HTML elements
91
 */
92
type DOMOutputSpec = [string, Record<string, any>?, ...any];
93
```
94

95
**Usage Example:**
96

97
```typescript
98
import { Editor } from "@tiptap/core";
99
import TableCell from "@tiptap/extension-table-cell";
100

101
const editor = new Editor({
102
  extensions: [
103
    TableCell.configure({
104
      HTMLAttributes: {
105
        class: "my-cell",
106
        "data-test": "table-cell"
107
      },
108
    }),
109
  ],
110
});
111

112
// TableCell creates nodes with these properties:
113
// - name: 'tableCell'
114
// - content: 'block+'
115
// - tableRole: 'cell'
116
// - isolating: true
117
```
118

119
### Configuration Options
120

121
Configure HTML attributes for table cell elements.
122

123
```typescript { .api }
124
/**
125
 * Configuration options for TableCell extension
126
 */
127
interface TableCellOptions {
128
  /**
129
   * HTML attributes to apply to table cell elements
130
   * @default {}
131
   */
132
  HTMLAttributes: Record<string, any>;
133
}
134
```
135

136
**Usage Example:**
137

138
```typescript
139
TableCell.configure({
140
  HTMLAttributes: {
141
    class: "prose-table-cell",
142
    style: "padding: 8px;",
143
  },
144
});
145
```
146

147
## Node Properties
148

149
The TableCell extension defines these core node properties:
150

151
### tableRole
152

153
```typescript { .api }
154
/**
155
 * Defines the table role for this node
156
 * Used by table-related commands and behaviors
157
 */
158
tableRole: 'cell';
159
```
160

161
### isolating
162

163
```typescript { .api }
164
/**
165
 * Prevents content from being merged across node boundaries
166
 * Ensures table cell content stays within cell boundaries
167
 */
168
isolating: true;
169
```
170

171
### content
172

173
```typescript { .api }
174
/**
175
 * Content expression defining allowed child content
176
 * Allows one or more block-level elements
177
 */
178
content: 'block+';
179
```
180

181
## Cell Attributes
182

183
The TableCell extension automatically handles these HTML attributes:
184

185
### colspan
186

187
```typescript { .api }
188
/**
189
 * Number of columns the cell spans
190
 * @default 1
191
 */
192
colspan: number;
193
```
194

195
### rowspan
196

197
```typescript { .api }
198
/**
199
 * Number of rows the cell spans  
200
 * @default 1
201
 */
202
rowspan: number;
203
```
204

205
### colwidth
206

207
```typescript { .api }
208
/**
209
 * Column widths as an array of numbers
210
 * Parsed from comma-separated colwidth HTML attribute using:
211
 * colwidth.split(',').map(width => parseInt(width, 10))
212
 * @default null
213
 */
214
colwidth: number[] | null;
215
```
216

217
## HTML Parsing and Rendering
218

219
The extension handles HTML conversion through these methods:
220

221
### parseHTML
222

223
```typescript { .api }
224
/**
225
 * Defines how HTML elements are parsed into TableCell nodes
226
 * @returns Array of tag parsing rules
227
 */
228
parseHTML(): [{ tag: 'td' }];
229
```
230

231
### renderHTML
232

233
```typescript { .api }
234
/**
235
 * Defines how TableCell nodes are rendered to HTML
236
 * Merges configured HTMLAttributes with node attributes
237
 * @param params Object containing HTMLAttributes from the node
238
 * @returns DOM output specification: ['td', mergedAttributes, 0]
239
 */
240
renderHTML(params: { HTMLAttributes: Record<string, any> }): DOMOutputSpec;
241
```
242

243
**Rendering Process:**
244
- **Parses**: `<td>` elements into TableCell nodes
245
- **Renders**: TableCell nodes as `<td>` elements using `mergeAttributes` helper
246
- **Attributes**: Preserves colspan, rowspan, and colwidth attributes
247
- **Content**: Supports block-level content (`content: 'block+'`)
248
- **Merging**: Combines configured HTMLAttributes with node-specific attributes
249

250
## Migration Notice
251

252
This package is deprecated. For new projects, import TableCell directly from @tiptap/extension-table:
253

254
```typescript
255
// Instead of this deprecated import:
256
import TableCell from "@tiptap/extension-table-cell";
257

258
// Use this:
259
import { TableCell } from "@tiptap/extension-table";
260
```
261

262
The API and functionality are identical - this package exists solely for backward compatibility.