0
# Import and Export
1

2
Flexible data import/export functionality supporting multiple formats and sources for data integration and reporting capabilities.
3

4
## Capabilities
5

6
### Data Export
7

8
Export table data in various formats for reporting, analysis, and data sharing.
9

10
```javascript { .api }
11
/**
12
 * Download table data in specified format
13
 * @param type - Export format ("csv", "json", "xlsx", "pdf", "html")
14
 * @param filename - Name for downloaded file
15
 * @param options - Format-specific export options
16
 */
17
download(type: string, filename: string, options?: ExportOptions): void;
18

19
/**
20
 * Export data to new browser tab
21
 * @param type - Export format
22
 * @param options - Format-specific export options
23
 */
24
downloadToTab(type: string, options?: ExportOptions): void;
25

26
/**
27
 * Get data in specified format without triggering download
28
 * @param type - Export format
29
 * @param options - Format-specific export options
30
 * @returns Formatted data string or blob
31
 */
32
export(type: string, options?: ExportOptions): string | Blob;
33
```
34

35
**Usage Examples:**
36

37
```javascript
38
// Basic exports
39
table.download("csv", "data.csv");
40
table.download("json", "data.json");
41
table.download("xlsx", "data.xlsx");
42

43
// Export with options
44
table.download("csv", "filtered-data.csv", {
45
  delimiter: ";",
46
  bom: true,
47
  columns: ["name", "age", "department"]
48
});
49

50
// Export to new tab
51
table.downloadToTab("html", {
52
  style: true,
53
  title: "Employee Report"
54
});
55

56
// Get export data without download
57
const csvData = table.export("csv", { delimiter: "|" });
58
console.log(csvData);
59
```
60

61
### Data Import
62

63
Import data from various sources and formats into the table.
64

65
```javascript { .api }
66
/**
67
 * Import data from file or HTML table
68
 * @param type - Import format ("csv", "json", "array", "html")
69
 * @param selector - File input selector or HTML table selector
70
 * @param options - Import processing options
71
 * @returns Promise resolving to imported data array
72
 */
73
import(type: string, selector: string, options?: ImportOptions): Promise<any[]>;
74

75
/**
76
 * Import from HTML table element
77
 * @param selector - CSS selector for HTML table
78
 * @param options - HTML import options
79
 * @returns Promise resolving to imported data
80
 */
81
importHtml(selector: string, options?: HtmlImportOptions): Promise<any[]>;
82
```
83

84
**Usage Examples:**
85

86
```javascript
87
// Import from file input
88
table.import("csv", "#file-input", {
89
  header: true,
90
  delimiter: ",",
91
  skipEmptyLines: true
92
}).then(data => {
93
  console.log(`Imported ${data.length} rows`);
94
});
95

96
// Import from HTML table
97
table.importHtml("#source-table", {
98
  headers: true,
99
  columnHeaders: ["name", "age", "department"]
100
}).then(data => {
101
  table.setData(data);
102
});
103

104
// Import JSON from file
105
table.import("json", "#json-file-input").then(data => {
106
  table.replaceData(data);
107
});
108
```
109

110
## Export Formats and Options
111

112
### CSV Export
113

114
```javascript { .api }
115
interface CsvExportOptions {
116
  /** Column delimiter */
117
  delimiter?: string;
118
  /** Include BOM for Excel compatibility */
119
  bom?: boolean;
120
  /** Columns to include */
121
  columns?: string[];
122
  /** Include column headers */
123
  columnHeaders?: boolean;
124
  /** Only export visible columns */
125
  columnVisibility?: boolean;
126
  /** Only export active/filtered rows */
127
  rowSelection?: boolean;
128
  /** Only export selected rows */
129
  rowSelectionOnly?: boolean;
130
}
131
```
132

133
### JSON Export
134

135
```javascript { .api }
136
interface JsonExportOptions {
137
  /** Columns to include */
138
  columns?: string[];
139
  /** Pretty print with indentation */
140
  indent?: number | string;
141
  /** Only export visible columns */
142
  columnVisibility?: boolean;
143
  /** Only export active/filtered rows */
144
  rowSelection?: boolean;
145
}
146
```
147

148
### Excel (XLSX) Export
149

150
```javascript { .api }
151
interface XlsxExportOptions {
152
  /** Worksheet name */
153
  sheetName?: string;
154
  /** Columns to include */
155
  columns?: string[];
156
  /** Auto-fit column widths */
157
  autoFitColumns?: boolean;
158
  /** Include column headers */
159
  columnHeaders?: boolean;
160
  /** Only export visible columns */
161
  columnVisibility?: boolean;
162
  /** Only export active/filtered rows */
163
  rowSelection?: boolean;
164
  /** Cell styling options */
165
  styles?: {
166
    headerStyle?: any;
167
    dataStyle?: any;
168
  };
169
}
170
```
171

172
### PDF Export
173

174
```javascript { .api }
175
interface PdfExportOptions {
176
  /** Page orientation */
177
  orientation?: "portrait" | "landscape";
178
  /** Document title */
179
  title?: string;
180
  /** Auto-fit table to page */
181
  autoTable?: boolean;
182
  /** Custom styling */
183
  jsPDF?: {
184
    format?: string;
185
    compress?: boolean;
186
  };
187
  /** Columns to include */
188
  columns?: string[];
189
  /** Only export visible columns */
190
  columnVisibility?: boolean;
191
  /** Only export active/filtered rows */
192
  rowSelection?: boolean;
193
}
194
```
195

196
### HTML Export
197

198
```javascript { .api }
199
interface HtmlExportOptions {
200
  /** Include CSS styling */
201
  style?: boolean;
202
  /** Document title */
203
  title?: string;
204
  /** Columns to include */
205
  columns?: string[];
206
  /** Only export visible columns */
207
  columnVisibility?: boolean;
208
  /** Only export active/filtered rows */
209
  rowSelection?: boolean;
210
  /** Custom HTML template */
211
  template?: string;
212
}
213
```
214

215
**Usage Examples:**
216

217
```javascript
218
// Advanced CSV export
219
table.download("csv", "detailed-report.csv", {
220
  delimiter: ",",
221
  bom: true,
222
  columnHeaders: true,
223
  rowSelection: true, // Only filtered/visible rows
224
  columns: ["name", "department", "salary", "startDate"]
225
});
226

227
// Excel export with styling
228
table.download("xlsx", "employee-report.xlsx", {
229
  sheetName: "Employees",
230
  autoFitColumns: true,
231
  columnHeaders: true,
232
  styles: {
233
    headerStyle: {
234
      font: { bold: true },
235
      fill: { fgColor: { rgb: "CCCCCC" } }
236
    }
237
  }
238
});
239

240
// PDF export with custom formatting
241
table.download("pdf", "report.pdf", {
242
  orientation: "landscape",
243
  title: "Employee Report - Q4 2023",
244
  autoTable: true,
245
  jsPDF: {
246
    format: "a4",
247
    compress: true
248
  }
249
});
250
```
251

252
## Import Formats and Options
253

254
### CSV Import
255

256
```javascript { .api }
257
interface CsvImportOptions {
258
  /** Column delimiter */
259
  delimiter?: string;
260
  /** First row contains headers */
261
  header?: boolean;
262
  /** Skip empty lines */
263
  skipEmptyLines?: boolean;
264
  /** Transform function for each row */
265
  transform?: (row: any) => any;
266
  /** Columns to import */
267
  columns?: string[];
268
  /** Data type detection */
269
  detectTypes?: boolean;
270
}
271
```
272

273
### JSON Import
274

275
```javascript { .api }
276
interface JsonImportOptions {
277
  /** Path to data array in JSON */
278
  arrayPath?: string;
279
  /** Transform function for each item */
280
  transform?: (item: any) => any;
281
  /** Column mapping */
282
  columnMapping?: { [key: string]: string };
283
}
284
```
285

286
### HTML Import
287

288
```javascript { .api }
289
interface HtmlImportOptions {
290
  /** Table has header row */
291
  headers?: boolean;
292
  /** Column field names */
293
  columnHeaders?: string[];
294
  /** Transform function for each row */
295
  transform?: (row: any) => any;
296
}
297
```
298

299
**Usage Examples:**
300

301
```javascript
302
// CSV import with data transformation
303
document.getElementById("csv-file").addEventListener("change", function(e) {
304
  table.import("csv", "#csv-file", {
305
    header: true,
306
    delimiter: ",",
307
    detectTypes: true,
308
    transform: function(row) {
309
      // Convert date strings to Date objects
310
      if (row.startDate) {
311
        row.startDate = new Date(row.startDate);
312
      }
313
      // Convert salary to number
314
      if (row.salary) {
315
        row.salary = parseFloat(row.salary.replace(/[,$]/g, ""));
316
      }
317
      return row;
318
    }
319
  }).then(data => {
320
    table.setData(data);
321
    console.log(`Imported ${data.length} records`);
322
  });
323
});
324

325
// JSON import with nested data
326
table.import("json", "#json-file", {
327
  arrayPath: "data.employees",
328
  columnMapping: {
329
    "full_name": "name",
330
    "dept": "department",
331
    "hire_date": "startDate"
332
  },
333
  transform: function(item) {
334
    // Flatten nested address
335
    if (item.address) {
336
      item.city = item.address.city;
337
      item.state = item.address.state;
338
      delete item.address;
339
    }
340
    return item;
341
  }
342
}).then(data => {
343
  table.replaceData(data);
344
});
345
```
346

347
## Clipboard Operations
348

349
### Copy and Paste
350

351
Built-in clipboard functionality for data transfer.
352

353
```javascript { .api }
354
/**
355
 * Copy selected data to clipboard
356
 * @param selector - What to copy ("selected", "visible", "all")
357
 * @param format - Clipboard format ("table", "csv", "tsv")
358
 */
359
copyToClipboard(selector?: string, format?: string): void;
360

361
/**
362
 * Paste data from clipboard
363
 * @param action - Paste action ("insert", "update", "replace")
364
 * @returns Promise resolving when paste completes
365
 */
366
pasteFromClipboard(action?: string): Promise<void>;
367
```
368

369
**Usage Examples:**
370

371
```javascript
372
// Copy selected rows to clipboard
373
table.copyToClipboard("selected", "tsv");
374

375
// Copy all visible data
376
table.copyToClipboard("visible", "csv");
377

378
// Paste data from clipboard
379
table.pasteFromClipboard("insert").then(() => {
380
  console.log("Data pasted successfully");
381
});
382

383
// Enable keyboard shortcuts
384
table.on("keyDown", function(e) {
385
  if (e.ctrlKey || e.metaKey) {
386
    if (e.key === "c") {
387
      table.copyToClipboard("selected", "tsv");
388
      e.preventDefault();
389
    } else if (e.key === "v") {
390
      table.pasteFromClipboard("insert");
391
      e.preventDefault();
392
    }
393
  }
394
});
395
```
396

397
## Configuration and Integration
398

399
### Export Module Configuration
400

401
```javascript { .api }
402
// Table configuration for exports
403
const exportTable = new Tabulator("#export-table", {
404
  data: tableData,
405
  columns: columnDefinitions,
406
  
407
  // Download configuration
408
  downloadReady: function(fileContents, blob) {
409
    // Modify file contents before download
410
    return blob;
411
  },
412
  downloadComplete: function() {
413
    console.log("Download completed");
414
  },
415
  
416
  // Import configuration
417
  importReady: function(data) {
418
    // Process imported data before loading
419
    return data.map(row => ({
420
      ...row,
421
      imported: true,
422
      importedAt: new Date()
423
    }));
424
  }
425
});
426
```
427

428
### Custom Export Functions
429

430
```javascript { .api }
431
// Custom export format
432
function customXmlExport(data, options) {
433
  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<data>\n';
434
  
435
  data.forEach(row => {
436
    xml += '  <record>\n';
437
    Object.keys(row).forEach(key => {
438
      xml += `    <${key}>${row[key]}</${key}>\n`;
439
    });
440
    xml += '  </record>\n';
441
  });
442
  
443
  xml += '</data>';
444
  return xml;
445
}
446

447
// Register custom exporter
448
table.registerModule("customExport", {
449
  xml: customXmlExport
450
});
451

452
// Use custom export
453
table.download("xml", "data.xml");
454
```
455

456
## Error Handling and Validation
457

458
```javascript { .api }
459
// Handle import errors
460
table.on("importError", function(error) {
461
  console.error("Import failed:", error);
462
  showErrorMessage("Failed to import data: " + error.message);
463
});
464

465
// Validate imported data
466
table.on("dataChanged", function(data) {
467
  const invalidRows = data.filter(row => !row.name || !row.email);
468
  if (invalidRows.length > 0) {
469
    console.warn(`${invalidRows.length} rows missing required fields`);
470
  }
471
});
472

473
// Handle export errors
474
table.on("downloadError", function(error) {
475
  console.error("Export failed:", error);
476
  showErrorMessage("Failed to export data: " + error.message);
477
});
478
```