tessl/npm-tabulator-tables

Interactive table generation JavaScript library with sorting, filtering, editing, formatting, and extensive customization capabilities

—

Pending

Overview

Eval results

Files

Import and Export

Name: tessl/npm-tabulator-tables
Author: tessl

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

Capabilities

Data Export

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

/**
 * Download table data in specified format
 * @param type - Export format ("csv", "json", "xlsx", "pdf", "html")
 * @param filename - Name for downloaded file
 * @param options - Format-specific export options
 */
download(type: string, filename: string, options?: ExportOptions): void;

/**
 * Export data to new browser tab
 * @param type - Export format
 * @param options - Format-specific export options
 */
downloadToTab(type: string, options?: ExportOptions): void;

/**
 * Get data in specified format without triggering download
 * @param type - Export format
 * @param options - Format-specific export options
 * @returns Formatted data string or blob
 */
export(type: string, options?: ExportOptions): string | Blob;

Usage Examples:

// Basic exports
table.download("csv", "data.csv");
table.download("json", "data.json");
table.download("xlsx", "data.xlsx");

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

// Export to new tab
table.downloadToTab("html", {
  style: true,
  title: "Employee Report"
});

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

Data Import

Import data from various sources and formats into the table.

/**
 * Import data from file or HTML table
 * @param type - Import format ("csv", "json", "array", "html")
 * @param selector - File input selector or HTML table selector
 * @param options - Import processing options
 * @returns Promise resolving to imported data array
 */
import(type: string, selector: string, options?: ImportOptions): Promise<any[]>;

/**
 * Import from HTML table element
 * @param selector - CSS selector for HTML table
 * @param options - HTML import options
 * @returns Promise resolving to imported data
 */
importHtml(selector: string, options?: HtmlImportOptions): Promise<any[]>;

Usage Examples:

// Import from file input
table.import("csv", "#file-input", {
  header: true,
  delimiter: ",",
  skipEmptyLines: true
}).then(data => {
  console.log(`Imported ${data.length} rows`);
});

// Import from HTML table
table.importHtml("#source-table", {
  headers: true,
  columnHeaders: ["name", "age", "department"]
}).then(data => {
  table.setData(data);
});

// Import JSON from file
table.import("json", "#json-file-input").then(data => {
  table.replaceData(data);
});

Export Formats and Options

CSV Export

interface CsvExportOptions {
  /** Column delimiter */
  delimiter?: string;
  /** Include BOM for Excel compatibility */
  bom?: boolean;
  /** Columns to include */
  columns?: string[];
  /** Include column headers */
  columnHeaders?: boolean;
  /** Only export visible columns */
  columnVisibility?: boolean;
  /** Only export active/filtered rows */
  rowSelection?: boolean;
  /** Only export selected rows */
  rowSelectionOnly?: boolean;
}

JSON Export

interface JsonExportOptions {
  /** Columns to include */
  columns?: string[];
  /** Pretty print with indentation */
  indent?: number | string;
  /** Only export visible columns */
  columnVisibility?: boolean;
  /** Only export active/filtered rows */
  rowSelection?: boolean;
}

Excel (XLSX) Export

interface XlsxExportOptions {
  /** Worksheet name */
  sheetName?: string;
  /** Columns to include */
  columns?: string[];
  /** Auto-fit column widths */
  autoFitColumns?: boolean;
  /** Include column headers */
  columnHeaders?: boolean;
  /** Only export visible columns */
  columnVisibility?: boolean;
  /** Only export active/filtered rows */
  rowSelection?: boolean;
  /** Cell styling options */
  styles?: {
    headerStyle?: any;
    dataStyle?: any;
  };
}

PDF Export

interface PdfExportOptions {
  /** Page orientation */
  orientation?: "portrait" | "landscape";
  /** Document title */
  title?: string;
  /** Auto-fit table to page */
  autoTable?: boolean;
  /** Custom styling */
  jsPDF?: {
    format?: string;
    compress?: boolean;
  };
  /** Columns to include */
  columns?: string[];
  /** Only export visible columns */
  columnVisibility?: boolean;
  /** Only export active/filtered rows */
  rowSelection?: boolean;
}

HTML Export

interface HtmlExportOptions {
  /** Include CSS styling */
  style?: boolean;
  /** Document title */
  title?: string;
  /** Columns to include */
  columns?: string[];
  /** Only export visible columns */
  columnVisibility?: boolean;
  /** Only export active/filtered rows */
  rowSelection?: boolean;
  /** Custom HTML template */
  template?: string;
}

Usage Examples:

// Advanced CSV export
table.download("csv", "detailed-report.csv", {
  delimiter: ",",
  bom: true,
  columnHeaders: true,
  rowSelection: true, // Only filtered/visible rows
  columns: ["name", "department", "salary", "startDate"]
});

// Excel export with styling
table.download("xlsx", "employee-report.xlsx", {
  sheetName: "Employees",
  autoFitColumns: true,
  columnHeaders: true,
  styles: {
    headerStyle: {
      font: { bold: true },
      fill: { fgColor: { rgb: "CCCCCC" } }
    }
  }
});

// PDF export with custom formatting
table.download("pdf", "report.pdf", {
  orientation: "landscape",
  title: "Employee Report - Q4 2023",
  autoTable: true,
  jsPDF: {
    format: "a4",
    compress: true
  }
});

Import Formats and Options

CSV Import

interface CsvImportOptions {
  /** Column delimiter */
  delimiter?: string;
  /** First row contains headers */
  header?: boolean;
  /** Skip empty lines */
  skipEmptyLines?: boolean;
  /** Transform function for each row */
  transform?: (row: any) => any;
  /** Columns to import */
  columns?: string[];
  /** Data type detection */
  detectTypes?: boolean;
}

JSON Import

interface JsonImportOptions {
  /** Path to data array in JSON */
  arrayPath?: string;
  /** Transform function for each item */
  transform?: (item: any) => any;
  /** Column mapping */
  columnMapping?: { [key: string]: string };
}

HTML Import

interface HtmlImportOptions {
  /** Table has header row */
  headers?: boolean;
  /** Column field names */
  columnHeaders?: string[];
  /** Transform function for each row */
  transform?: (row: any) => any;
}

Usage Examples:

// CSV import with data transformation
document.getElementById("csv-file").addEventListener("change", function(e) {
  table.import("csv", "#csv-file", {
    header: true,
    delimiter: ",",
    detectTypes: true,
    transform: function(row) {
      // Convert date strings to Date objects
      if (row.startDate) {
        row.startDate = new Date(row.startDate);
      }
      // Convert salary to number
      if (row.salary) {
        row.salary = parseFloat(row.salary.replace(/[,$]/g, ""));
      }
      return row;
    }
  }).then(data => {
    table.setData(data);
    console.log(`Imported ${data.length} records`);
  });
});

// JSON import with nested data
table.import("json", "#json-file", {
  arrayPath: "data.employees",
  columnMapping: {
    "full_name": "name",
    "dept": "department",
    "hire_date": "startDate"
  },
  transform: function(item) {
    // Flatten nested address
    if (item.address) {
      item.city = item.address.city;
      item.state = item.address.state;
      delete item.address;
    }
    return item;
  }
}).then(data => {
  table.replaceData(data);
});

Clipboard Operations

Copy and Paste

Built-in clipboard functionality for data transfer.

/**
 * Copy selected data to clipboard
 * @param selector - What to copy ("selected", "visible", "all")
 * @param format - Clipboard format ("table", "csv", "tsv")
 */
copyToClipboard(selector?: string, format?: string): void;

/**
 * Paste data from clipboard
 * @param action - Paste action ("insert", "update", "replace")
 * @returns Promise resolving when paste completes
 */
pasteFromClipboard(action?: string): Promise<void>;

Usage Examples:

// Copy selected rows to clipboard
table.copyToClipboard("selected", "tsv");

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

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

// Enable keyboard shortcuts
table.on("keyDown", function(e) {
  if (e.ctrlKey || e.metaKey) {
    if (e.key === "c") {
      table.copyToClipboard("selected", "tsv");
      e.preventDefault();
    } else if (e.key === "v") {
      table.pasteFromClipboard("insert");
      e.preventDefault();
    }
  }
});

Configuration and Integration

Export Module Configuration

// Table configuration for exports
const exportTable = new Tabulator("#export-table", {
  data: tableData,
  columns: columnDefinitions,
  
  // Download configuration
  downloadReady: function(fileContents, blob) {
    // Modify file contents before download
    return blob;
  },
  downloadComplete: function() {
    console.log("Download completed");
  },
  
  // Import configuration
  importReady: function(data) {
    // Process imported data before loading
    return data.map(row => ({
      ...row,
      imported: true,
      importedAt: new Date()
    }));
  }
});

Custom Export Functions

// Custom export format
function customXmlExport(data, options) {
  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n<data>\n';
  
  data.forEach(row => {
    xml += '  <record>\n';
    Object.keys(row).forEach(key => {
      xml += `    <${key}>${row[key]}</${key}>\n`;
    });
    xml += '  </record>\n';
  });
  
  xml += '</data>';
  return xml;
}

// Register custom exporter
table.registerModule("customExport", {
  xml: customXmlExport
});

// Use custom export
table.download("xml", "data.xml");

Error Handling and Validation

// Handle import errors
table.on("importError", function(error) {
  console.error("Import failed:", error);
  showErrorMessage("Failed to import data: " + error.message);
});

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

// Handle export errors
table.on("downloadError", function(error) {
  console.error("Export failed:", error);
  showErrorMessage("Failed to export data: " + error.message);
});

Install with Tessl CLI