0
# Clipboard Operations
1

2
Advanced clipboard functionality for copying and pasting table data with support for multiple formats, custom parsers, and paste actions.
3

4
## Capabilities
5

6
### Clipboard Configuration
7

8
Configure clipboard behavior for copy and paste operations.
9

10
```javascript { .api }
11
/**
12
 * Copy table data to clipboard
13
 * @param selector - Row selector (optional, defaults to selected/visible rows)
14
 * @param styled - Include formatting in clipboard data
15
 * @param config - Custom column configuration for export
16
 * @returns Promise resolving when copy is complete
17
 */
18
copyToClipboard(selector?: string, styled?: boolean, config?: any): Promise<void>;
19
```
20

21
**Clipboard Configuration Options:**
22

23
```javascript { .api }
24
interface ClipboardOptions {
25
  clipboard?: boolean | "copy" | "paste";
26
  clipboardCopyStyled?: boolean;
27
  clipboardCopyConfig?: any;
28
  clipboardCopyRowRange?: "visible" | "active" | "selected" | "all";
29
  clipboardPasteParser?: string | Function;
30
  clipboardPasteAction?: string | Function;
31
}
32
```
33

34
### Column Clipboard Options
35

36
Configure clipboard behavior for individual columns.
37

38
```javascript { .api }
39
interface ColumnDefinition {
40
  clipboard?: boolean;
41
  titleClipboard?: boolean | string;
42
  // ... other column options
43
}
44
```
45

46
**Usage Examples:**
47

48
```javascript
49
import { Tabulator } from "tabulator-tables";
50

51
// Enable clipboard functionality
52
const table = new Tabulator("#table", {
53
  data: [
54
    { name: "Alice", age: 25, department: "Engineering", salary: 75000 },
55
    { name: "Bob", age: 30, department: "Sales", salary: 65000 },
56
    { name: "Charlie", age: 28, department: "Marketing", salary: 70000 }
57
  ],
58
  columns: [
59
    { 
60
      title: "Name", 
61
      field: "name",
62
      clipboard: true, // Include in clipboard operations
63
      titleClipboard: "Employee Name" // Custom title for clipboard
64
    },
65
    { 
66
      title: "Age", 
67
      field: "age",
68
      clipboard: true
69
    },
70
    { 
71
      title: "Department", 
72
      field: "department",
73
      clipboard: true
74
    },
75
    {
76
      title: "Salary",
77
      field: "salary", 
78
      formatter: "money",
79
      clipboard: false // Exclude from clipboard operations
80
    }
81
  ],
82
  
83
  // Clipboard configuration
84
  clipboard: true, // Enable both copy and paste
85
  clipboardCopyStyled: true, // Include HTML formatting
86
  clipboardCopyRowRange: "selected", // Copy only selected rows
87
  clipboardPasteParser: "table", // Parse pasted data as table
88
  clipboardPasteAction: "insert" // Insert pasted data as new rows
89
});
90

91
// Programmatic clipboard operations
92
document.getElementById("copy-btn").addEventListener("click", () => {
93
  table.copyToClipboard("selected", true);
94
});
95

96
// Copy specific data configuration
97
document.getElementById("copy-custom").addEventListener("click", () => {
98
  const customConfig = {
99
    columnHeaders: true,
100
    columns: ["name", "department"] // Only copy name and department
101
  };
102
  
103
  table.copyToClipboard("all", true, customConfig);
104
});
105
```
106

107
## Copy Operations
108

109
### Copy Modes
110

111
Configure different copy operation modes and data sources.
112

113
```javascript
114
// Copy and paste enabled
115
const table1 = new Tabulator("#table1", {
116
  clipboard: true, // Both copy and paste
117
  clipboardCopyRowRange: "selected" // Copy selected rows
118
});
119

120
// Copy only mode
121
const table2 = new Tabulator("#table2", {
122
  clipboard: "copy", // Copy only, no paste
123
  clipboardCopyRowRange: "visible" // Copy visible rows
124
});
125

126
// Copy all data
127
const table3 = new Tabulator("#table3", {
128
  clipboard: true,
129
  clipboardCopyRowRange: "all" // Copy all rows (including filtered)
130
});
131
```
132

133
### Copy Data Formats
134

135
Control output formats for clipboard data.
136

137
```javascript
138
const table = new Tabulator("#table", {
139
  clipboard: true,
140
  clipboardCopyStyled: true, // Include HTML formatting
141
  
142
  // Custom copy configuration
143
  clipboardCopyConfig: {
144
    columnHeaders: true, // Include column headers
145
    columnGroups: false, // Exclude column groups
146
    rowGroups: false,    // Exclude row groups
147
    columnCalcs: false,  // Exclude column calculations
148
    dataTree: false,     // Exclude data tree structure
149
    formatters: false    // Exclude cell formatters
150
  },
151
  
152
  // Custom copy formatter (DEPRECATED - use copyToClipboard parameters)
153
  clipboardCopyFormatter: function(type, output) {
154
    if (type === "plain") {
155
      // Customize plain text output
156
      return "Custom Header\n" + output;
157
    } else if (type === "html") {
158
      // Customize HTML output  
159
      return "<div class='custom-table'>" + output + "</div>";
160
    }
161
    return output;
162
  }
163
});
164

165
// Copy with custom configuration
166
table.copyToClipboard("selected", false, {
167
  columnHeaders: false, // No headers
168
  columns: ["name", "age"] // Specific columns only
169
});
170
```
171

172
## Paste Operations
173

174
### Paste Parsers
175

176
Configure how pasted data is interpreted and parsed.
177

178
```javascript { .api }
179
interface PasteParserOptions {
180
  clipboardPasteParser?: "table" | "csv" | "array" | Function;
181
}
182
```
183

184
**Built-in Paste Parsers:**
185

186
```javascript
187
// Table parser - parse HTML table data
188
const table1 = new Tabulator("#table1", {
189
  clipboard: true,
190
  clipboardPasteParser: "table" // Default parser
191
});
192

193
// CSV parser - parse comma-separated values
194
const table2 = new Tabulator("#table2", {
195
  clipboard: true,
196
  clipboardPasteParser: "csv"
197
});
198

199
// Array parser - parse tab-delimited data
200
const table3 = new Tabulator("#table3", {
201
  clipboard: true,
202
  clipboardPasteParser: "array"
203
});
204

205
// Custom parser function
206
const table4 = new Tabulator("#table4", {
207
  clipboard: true,
208
  clipboardPasteParser: function(clipboardData) {
209
    const lines = clipboardData.split('\n');
210
    const parsedData = [];
211
    
212
    lines.forEach(line => {
213
      if (line.trim()) {
214
        const parts = line.split('|'); // Custom delimiter
215
        parsedData.push({
216
          name: parts[0]?.trim(),
217
          age: parseInt(parts[1]?.trim()),
218
          department: parts[2]?.trim()
219
        });
220
      }
221
    });
222
    
223
    return parsedData;
224
  }
225
});
226
```
227

228
### Paste Actions
229

230
Configure how parsed clipboard data is inserted into the table.
231

232
```javascript { .api }
233
interface PasteActionOptions {
234
  clipboardPasteAction?: "insert" | "update" | "replace" | Function;
235
}
236
```
237

238
**Built-in Paste Actions:**
239

240
```javascript
241
// Insert - add pasted data as new rows
242
const table1 = new Tabulator("#table1", {
243
  clipboard: true,
244
  clipboardPasteAction: "insert" // Default action
245
});
246

247
// Update - update existing rows with pasted data
248
const table2 = new Tabulator("#table2", {
249
  clipboard: true,
250
  clipboardPasteAction: "update"
251
});
252

253
// Replace - replace all table data with pasted data
254
const table3 = new Tabulator("#table3", {
255
  clipboard: true,
256
  clipboardPasteAction: "replace"
257
});
258

259
// Custom paste action
260
const table4 = new Tabulator("#table4", {
261
  clipboard: true,
262
  clipboardPasteAction: function(data) {
263
    // Custom logic for handling pasted data
264
    console.log("Pasting data:", data);
265
    
266
    // Validate data before insertion
267
    const validData = data.filter(row => {
268
      return row.name && row.age && row.department;
269
    });
270
    
271
    if (validData.length !== data.length) {
272
      alert(`${data.length - validData.length} invalid rows were skipped`);
273
    }
274
    
275
    // Insert valid data
276
    this.addData(validData);
277
  }
278
});
279
```
280

281
## Advanced Clipboard Features
282

283
### Keyboard Shortcuts
284

285
Standard keyboard shortcuts work automatically when clipboard is enabled:
286

287
- **Ctrl+C / Cmd+C**: Copy selected rows to clipboard
288
- **Ctrl+V / Cmd+V**: Paste clipboard data into table
289

290
### Range Selection Integration
291

292
Clipboard operations work seamlessly with range selection:
293

294
```javascript
295
const table = new Tabulator("#table", {
296
  clipboard: true,
297
  selectableRange: true, // Enable range selection
298
  clipboardCopyRowRange: "selected"
299
});
300

301
// Copy operations will include selected ranges
302
// Paste operations will target selected cells when possible
303
```
304

305
### Events
306

307
Handle clipboard operation events for custom processing.
308

309
```javascript
310
table.on("clipboardCopied", function(clipboard, plainText, htmlText) {
311
  console.log("Data copied to clipboard");
312
  console.log("Plain text:", plainText);
313
  console.log("HTML:", htmlText);
314
});
315

316
table.on("clipboardPasted", function(pasteData, parsedData) {
317
  console.log("Data pasted from clipboard");
318
  console.log("Raw paste data:", pasteData);
319
  console.log("Parsed data:", parsedData);
320
});
321

322
table.on("clipboardPasteError", function(clipboard) {
323
  console.log("Error pasting clipboard data");
324
  alert("Failed to parse clipboard data");
325
});
326
```
327

328
### Column-Specific Clipboard Settings
329

330
Configure clipboard behavior for individual columns:
331

332
```javascript
333
const table = new Tabulator("#table", {
334
  clipboard: true,
335
  columns: [
336
    {
337
      title: "ID",
338
      field: "id", 
339
      clipboard: false // Exclude from clipboard operations
340
    },
341
    {
342
      title: "Name",
343
      field: "name",
344
      clipboard: true,
345
      titleClipboard: "Full Name" // Custom clipboard title
346
    },
347
    {
348
      title: "Email", 
349
      field: "email",
350
      clipboard: true,
351
      titleClipboard: false // No title in clipboard
352
    },
353
    {
354
      title: "Salary",
355
      field: "salary",
356
      formatter: "money",
357
      clipboard: true,
358
      formatterClipboard: "number" // Different formatter for clipboard
359
    }
360
  ]
361
});
362
```
363

364
### Integration with Export Module
365

366
Clipboard functionality leverages the Export module for data formatting:
367

368
```javascript
369
const table = new Tabulator("#table", {
370
  clipboard: true,
371
  clipboardCopyConfig: {
372
    // Uses same configuration as export functions
373
    columnHeaders: true,
374
    columnCalcs: true,
375
    formatters: true,
376
    columns: ["name", "department", "salary"]
377
  }
378
});
379

380
// Clipboard copy uses export functionality internally
381
table.copyToClipboard("all", true, {
382
  delimiter: "\t", // Tab-delimited for spreadsheets
383
  columnHeaders: true
384
});
385
```
386

387
## Security Considerations
388

389
Browser security policies may restrict clipboard access:
390

391
```javascript
392
// Check clipboard API availability
393
if (navigator.clipboard && navigator.clipboard.writeText) {
394
  // Modern clipboard API available
395
  console.log("Clipboard API supported");
396
} else {
397
  // Fallback to document.execCommand (may require user interaction)
398
  console.log("Using legacy clipboard methods");
399
}
400

401
// Handle clipboard permissions
402
navigator.permissions.query({name: "clipboard-write"}).then(result => {
403
  if (result.state === "granted" || result.state === "prompt") {
404
    console.log("Clipboard write permission available");
405
  }
406
});
407
```
408

409
## Types
410

411
```javascript { .api }
412
interface ClipboardOptions {
413
  clipboard?: boolean | "copy" | "paste";
414
  clipboardCopyStyled?: boolean;
415
  clipboardCopyConfig?: ExportConfig;
416
  clipboardCopyRowRange?: "visible" | "active" | "selected" | "all";
417
  clipboardPasteParser?: "table" | "csv" | "array" | PasteParserFunction;
418
  clipboardPasteAction?: "insert" | "update" | "replace" | PasteActionFunction;
419
}
420

421
interface PasteParserFunction {
422
  (clipboardData: string): any[];
423
}
424

425
interface PasteActionFunction {
426
  (data: any[]): void;
427
}
428

429
interface ClipboardConfig {
430
  columnHeaders?: boolean;
431
  columnGroups?: boolean;
432
  rowGroups?: boolean;
433
  columnCalcs?: boolean;
434
  dataTree?: boolean;
435
  formatters?: boolean;
436
  columns?: string[];
437
}
438
```