0
# Table Extensions
1

2
React-specific table functionality with interactive components for creating and editing tables within the editor.
3

4
## Capabilities
5

6
### Table Extensions
7

8
Core extensions for table functionality with React-based node views.
9

10
```typescript { .api }
11
/**
12
 * Main table extension with React node views and interactive features
13
 */
14
class TableExtension extends NodeExtension<TableOptions> {
15
  /** Extension name */
16
  static readonly name = 'table';
17
  
18
  /** Create table commands */
19
  createCommands(): TableCommands;
20
  
21
  /** Create table node views with React components */
22
  createNodeViews(): NodeViewMethod;
23
  
24
  /** Create table-specific plugins */
25
  createPlugins(): ProsemirrorPlugin[];
26
}
27

28
interface TableOptions {
29
  /** Whether tables are resizable */
30
  resizable?: boolean;
31
  /** Default number of rows */
32
  defaultRows?: number;
33
  /** Default number of columns */
34
  defaultColumns?: number;
35
  /** Whether to show table controls */
36
  showControls?: boolean;
37
  /** Custom cell types */
38
  cellTypes?: string[];
39
}
40

41
/**
42
 * Extension for table cell nodes
43
 */
44
class TableCellExtension extends NodeExtension<TableCellOptions> {
45
  static readonly name = 'tableCell';
46
}
47

48
interface TableCellOptions {
49
  /** Whether cells can span multiple columns */
50
  allowColumnSpan?: boolean;
51
  /** Whether cells can span multiple rows */
52
  allowRowSpan?: boolean;
53
  /** Default cell content */
54
  defaultContent?: string;
55
}
56

57
/**
58
 * Extension for table header cell nodes
59
 */
60
class TableHeaderCellExtension extends NodeExtension<TableHeaderCellOptions> {
61
  static readonly name = 'tableHeaderCell';
62
}
63

64
interface TableHeaderCellOptions extends TableCellOptions {
65
  /** Header cell styling */
66
  headerStyle?: 'bold' | 'background' | 'both';
67
}
68

69
/**
70
 * Extension for table row nodes
71
 */
72
class TableRowExtension extends NodeExtension<TableRowOptions> {
73
  static readonly name = 'tableRow';
74
}
75

76
interface TableRowOptions {
77
  /** Whether rows can be reordered */
78
  allowReorder?: boolean;
79
  /** Minimum number of cells per row */
80
  minCells?: number;
81
}
82

83
/**
84
 * Extension for table controller cells (for row/column operations)
85
 */
86
class TableControllerCellExtension extends NodeExtension<TableControllerOptions> {
87
  static readonly name = 'tableControllerCell';
88
}
89

90
interface TableControllerOptions {
91
  /** Controller cell position */
92
  position?: 'top-left' | 'top' | 'left';
93
  /** Whether to show controller */
94
  showController?: boolean;
95
}
96
```
97

98
**Usage Example:**
99

100
```typescript
101
import React from 'react';
102
import { 
103
  useRemirror,
104
  Remirror,
105
  TableExtension,
106
  TableCellExtension,
107
  TableHeaderCellExtension,
108
  TableRowExtension,
109
  CreateTableButton
110
} from '@remirror/react';
111

112
function EditorWithTables() {
113
  const { manager, state } = useRemirror({
114
    extensions: () => [
115
      new TableExtension({
116
        resizable: true,
117
        defaultRows: 3,
118
        defaultColumns: 3,
119
        showControls: true,
120
      }),
121
      new TableCellExtension(),
122
      new TableHeaderCellExtension(),
123
      new TableRowExtension(),
124
    ],
125
  });
126

127
  return (
128
    <div>
129
      <div>
130
        <CreateTableButton />
131
      </div>
132
      <Remirror manager={manager} initialContent={state} />
133
    </div>
134
  );
135
}
136
```
137

138
### Table UI Components
139

140
React components for table interaction and management.
141

142
```typescript { .api }
143
/**
144
 * Main wrapper component for all table UI elements
145
 */
146
interface TableComponents extends React.Component<TableComponentsProps> {}
147

148
interface TableComponentsProps {
149
  /** Whether to show table controls */
150
  showControls?: boolean;
151
  /** Custom control components */
152
  controlComponents?: {
153
    deleteRow?: ComponentType;
154
    deleteColumn?: ComponentType;
155
    addRow?: ComponentType;
156
    addColumn?: ComponentType;
157
  };
158
}
159

160
/**
161
 * Interactive menu for table cells with editing options
162
 */
163
interface TableCellMenu extends React.Component<TableCellMenuProps> {}
164

165
interface TableCellMenuProps {
166
  /** Cell position */
167
  position?: { row: number; col: number };
168
  /** Available menu actions */
169
  actions?: TableCellAction[];
170
  /** Custom menu items */
171
  customItems?: React.ReactNode;
172
  /** Menu visibility */
173
  visible?: boolean;
174
  /** Callback when menu item is selected */
175
  onSelect?: (action: TableCellAction) => void;
176
}
177

178
interface TableCellAction {
179
  /** Action identifier */
180
  id: string;
181
  /** Display label */
182
  label: string;
183
  /** Action icon */
184
  icon?: React.ReactNode;
185
  /** Action handler */
186
  handler: () => void;
187
  /** Whether action is disabled */
188
  disabled?: boolean;
189
}
190

191
/**
192
 * Props for table cell menu components
193
 */
194
interface TableCellMenuComponentProps {
195
  /** Current cell element */
196
  cell: HTMLElement;
197
  /** Cell coordinates */
198
  coordinates: { row: number; col: number };
199
  /** Available actions */
200
  actions: TableCellAction[];
201
  /** Close menu callback */
202
  onClose: () => void;
203
}
204
```
205

206
### Table Control Buttons
207

208
Specialized button components for table operations.
209

210
```typescript { .api }
211
/**
212
 * Button for deleting table rows or columns
213
 */
214
interface TableDeleteRowColumnButton extends React.Component<TableDeleteButtonProps> {}
215

216
interface TableDeleteButtonProps {
217
  /** What to delete */
218
  target: 'row' | 'column';
219
  /** Button icon */
220
  icon?: React.ReactNode;
221
  /** Button label */
222
  label?: string;
223
  /** Custom styling */
224
  className?: string;
225
}
226

227
/**
228
 * Button for deleting entire tables
229
 */
230
interface TableDeleteButton extends React.Component<{
231
  /** Confirmation message */
232
  confirmMessage?: string;
233
  /** Button icon */
234
  icon?: React.ReactNode;
235
  /** Button label */
236
  label?: string;
237
}> {}
238
```
239

240
**Usage Example:**
241

242
```typescript
243
import React from 'react';
244
import { 
245
  TableComponents,
246
  TableCellMenu,
247
  TableDeleteRowColumnButton,
248
  TableDeleteButton,
249
  useCommands
250
} from '@remirror/react';
251

252
function TableInterface() {
253
  const commands = useCommands();
254

255
  const cellActions = [
256
    {
257
      id: 'merge-right',
258
      label: 'Merge Right',
259
      handler: () => commands.mergeCells(),
260
    },
261
    {
262
      id: 'split-cell',
263
      label: 'Split Cell',
264
      handler: () => commands.splitCell(),
265
    },
266
  ];
267

268
  return (
269
    <div>
270
      <TableComponents
271
        showControls={true}
272
        controlComponents={{
273
          deleteRow: () => <TableDeleteRowColumnButton target="row" />,
274
          deleteColumn: () => <TableDeleteRowColumnButton target="column" />,
275
        }}
276
      />
277
      <TableCellMenu
278
        actions={cellActions}
279
        onSelect={(action) => action.handler()}
280
      />
281
    </div>
282
  );
283
}
284
```
285

286
### Table Commands
287

288
TypeScript interfaces for table-related commands.
289

290
```typescript { .api }
291
interface TableCommands {
292
  /** Create a new table */
293
  createTable: (options?: {
294
    rows?: number;
295
    columns?: number;
296
    withHeaderRow?: boolean;
297
  }) => CommandFunction;
298
  
299
  /** Delete the current table */
300
  deleteTable: () => CommandFunction;
301
  
302
  /** Add a row above current position */
303
  addRowBefore: () => CommandFunction;
304
  
305
  /** Add a row below current position */
306
  addRowAfter: () => CommandFunction;
307
  
308
  /** Delete the current row */
309
  deleteRow: () => CommandFunction;
310
  
311
  /** Add a column before current position */
312
  addColumnBefore: () => CommandFunction;
313
  
314
  /** Add a column after current position */
315
  addColumnAfter: () => CommandFunction;
316
  
317
  /** Delete the current column */
318
  deleteColumn: () => CommandFunction;
319
  
320
  /** Merge selected cells */
321
  mergeCells: () => CommandFunction;
322
  
323
  /** Split the current cell */
324
  splitCell: () => CommandFunction;
325
  
326
  /** Toggle header row */
327
  toggleHeaderRow: () => CommandFunction;
328
  
329
  /** Toggle header column */
330
  toggleHeaderColumn: () => CommandFunction;
331
  
332
  /** Move to next cell */
333
  goToNextCell: () => CommandFunction;
334
  
335
  /** Move to previous cell */
336
  goToPreviousCell: () => CommandFunction;
337
}
338
```
339

340
### Table Plugin System
341

342
Plugin key and utilities for table functionality.
343

344
```typescript { .api }
345
/**
346
 * Plugin key for table controller functionality
347
 */
348
const tableControllerPluginKey: PluginKey<TableControllerState>;
349

350
interface TableControllerState {
351
  /** Currently selected table */
352
  selectedTable?: HTMLElement;
353
  /** Selected cells */
354
  selectedCells: HTMLElement[];
355
  /** Controller UI state */
356
  controllerVisible: boolean;
357
  /** Current operation mode */
358
  mode: 'select' | 'resize' | 'edit';
359
}
360

361
/**
362
 * Utilities for working with table structures
363
 */
364
interface TableUtils {
365
  /** Find table containing the current selection */
366
  findTable: (state: EditorState) => ProsemirrorNode | null;
367
  
368
  /** Get cell at specific coordinates */
369
  getCellAt: (table: ProsemirrorNode, row: number, col: number) => ProsemirrorNode | null;
370
  
371
  /** Get table dimensions */
372
  getTableDimensions: (table: ProsemirrorNode) => { rows: number; cols: number };
373
  
374
  /** Check if position is inside a table */
375
  isInTable: (state: EditorState) => boolean;
376
  
377
  /** Get current cell coordinates */
378
  getCellCoordinates: (state: EditorState) => { row: number; col: number } | null;
379
}
380
```
381

382
## Table Styling and Theming
383

384
```typescript { .api }
385
/**
386
 * Table theme configuration
387
 */
388
interface TableTheme {
389
  /** Table border styles */
390
  border?: {
391
    width?: string;
392
    style?: 'solid' | 'dashed' | 'dotted';
393
    color?: string;
394
  };
395
  
396
  /** Cell padding */
397
  cellPadding?: string;
398
  
399
  /** Header cell styling */
400
  headerCell?: {
401
    backgroundColor?: string;
402
    fontWeight?: string;
403
    textAlign?: 'left' | 'center' | 'right';
404
  };
405
  
406
  /** Selected cell styling */
407
  selectedCell?: {
408
    backgroundColor?: string;
409
    borderColor?: string;
410
  };
411
  
412
  /** Controller styling */
413
  controller?: {
414
    backgroundColor?: string;
415
    borderColor?: string;
416
    buttonColor?: string;
417
  };
418
}
419

420
/**
421
 * Apply theme to table components
422
 * @param theme - Table theme configuration
423
 */
424
function applyTableTheme(theme: TableTheme): void;
425
```
426

427
## Advanced Table Features
428

429
```typescript { .api }
430
/**
431
 * Table resize functionality
432
 */
433
interface TableResizer {
434
  /** Enable column resizing */
435
  enableColumnResize: (table: HTMLElement) => void;
436
  
437
  /** Disable column resizing */
438
  disableColumnResize: (table: HTMLElement) => void;
439
  
440
  /** Set column width */
441
  setColumnWidth: (columnIndex: number, width: number) => void;
442
  
443
  /** Get column width */
444
  getColumnWidth: (columnIndex: number) => number;
445
}
446

447
/**
448
 * Table sorting functionality
449
 */
450
interface TableSorter {
451
  /** Sort table by column */
452
  sortByColumn: (columnIndex: number, direction: 'asc' | 'desc') => void;
453
  
454
  /** Enable column sorting */
455
  enableSorting: (columns: number[]) => void;
456
  
457
  /** Disable column sorting */
458
  disableSorting: () => void;
459
}
460

461
/**
462
 * Table export functionality
463
 */
464
interface TableExporter {
465
  /** Export table as CSV */
466
  toCSV: (table: ProsemirrorNode) => string;
467
  
468
  /** Export table as HTML */
469
  toHTML: (table: ProsemirrorNode) => string;
470
  
471
  /** Export table as JSON */
472
  toJSON: (table: ProsemirrorNode) => any[][];
473
}
474
```
475

476
**Usage Example:**
477

478
```typescript
479
import React from 'react';
480
import { 
481
  useCommands,
482
  useExtension,
483
  TableExtension,
484
  applyTableTheme
485
} from '@remirror/react';
486

487
function AdvancedTableControls() {
488
  const commands = useCommands();
489
  const tableExtension = useExtension(TableExtension);
490

491
  React.useEffect(() => {
492
    // Apply custom table theme
493
    applyTableTheme({
494
      border: { width: '2px', style: 'solid', color: '#333' },
495
      cellPadding: '12px',
496
      headerCell: {
497
        backgroundColor: '#f5f5f5',
498
        fontWeight: 'bold',
499
      },
500
    });
501
  }, []);
502

503
  const createAdvancedTable = () => {
504
    commands.createTable({
505
      rows: 5,
506
      columns: 4,
507
      withHeaderRow: true,
508
    });
509
  };
510

511
  return (
512
    <div>
513
      <button onClick={createAdvancedTable}>
514
        Create Advanced Table
515
      </button>
516
      <button onClick={() => commands.mergeCells()}>
517
        Merge Cells
518
      </button>
519
      <button onClick={() => commands.splitCell()}>
520
        Split Cell
521
      </button>
522
    </div>
523
  );
524
}
525
```