tessl/npm-tabulator-tables

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

—

Pending

Overview

Eval results

Files

Clipboard Operations

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

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

Capabilities

Clipboard Configuration

Configure clipboard behavior for copy and paste operations.

/**
 * Copy table data to clipboard
 * @param selector - Row selector (optional, defaults to selected/visible rows)
 * @param styled - Include formatting in clipboard data
 * @param config - Custom column configuration for export
 * @returns Promise resolving when copy is complete
 */
copyToClipboard(selector?: string, styled?: boolean, config?: any): Promise<void>;

Clipboard Configuration Options:

interface ClipboardOptions {
  clipboard?: boolean | "copy" | "paste";
  clipboardCopyStyled?: boolean;
  clipboardCopyConfig?: any;
  clipboardCopyRowRange?: "visible" | "active" | "selected" | "all";
  clipboardPasteParser?: string | Function;
  clipboardPasteAction?: string | Function;
}

Column Clipboard Options

Configure clipboard behavior for individual columns.

interface ColumnDefinition {
  clipboard?: boolean;
  titleClipboard?: boolean | string;
  // ... other column options
}

Usage Examples:

import { Tabulator } from "tabulator-tables";

// Enable clipboard functionality
const table = new Tabulator("#table", {
  data: [
    { name: "Alice", age: 25, department: "Engineering", salary: 75000 },
    { name: "Bob", age: 30, department: "Sales", salary: 65000 },
    { name: "Charlie", age: 28, department: "Marketing", salary: 70000 }
  ],
  columns: [
    { 
      title: "Name", 
      field: "name",
      clipboard: true, // Include in clipboard operations
      titleClipboard: "Employee Name" // Custom title for clipboard
    },
    { 
      title: "Age", 
      field: "age",
      clipboard: true
    },
    { 
      title: "Department", 
      field: "department",
      clipboard: true
    },
    {
      title: "Salary",
      field: "salary", 
      formatter: "money",
      clipboard: false // Exclude from clipboard operations
    }
  ],
  
  // Clipboard configuration
  clipboard: true, // Enable both copy and paste
  clipboardCopyStyled: true, // Include HTML formatting
  clipboardCopyRowRange: "selected", // Copy only selected rows
  clipboardPasteParser: "table", // Parse pasted data as table
  clipboardPasteAction: "insert" // Insert pasted data as new rows
});

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

// Copy specific data configuration
document.getElementById("copy-custom").addEventListener("click", () => {
  const customConfig = {
    columnHeaders: true,
    columns: ["name", "department"] // Only copy name and department
  };
  
  table.copyToClipboard("all", true, customConfig);
});

Copy Operations

Copy Modes

Configure different copy operation modes and data sources.

// Copy and paste enabled
const table1 = new Tabulator("#table1", {
  clipboard: true, // Both copy and paste
  clipboardCopyRowRange: "selected" // Copy selected rows
});

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

// Copy all data
const table3 = new Tabulator("#table3", {
  clipboard: true,
  clipboardCopyRowRange: "all" // Copy all rows (including filtered)
});

Copy Data Formats

Control output formats for clipboard data.

const table = new Tabulator("#table", {
  clipboard: true,
  clipboardCopyStyled: true, // Include HTML formatting
  
  // Custom copy configuration
  clipboardCopyConfig: {
    columnHeaders: true, // Include column headers
    columnGroups: false, // Exclude column groups
    rowGroups: false,    // Exclude row groups
    columnCalcs: false,  // Exclude column calculations
    dataTree: false,     // Exclude data tree structure
    formatters: false    // Exclude cell formatters
  },
  
  // Custom copy formatter (DEPRECATED - use copyToClipboard parameters)
  clipboardCopyFormatter: function(type, output) {
    if (type === "plain") {
      // Customize plain text output
      return "Custom Header\n" + output;
    } else if (type === "html") {
      // Customize HTML output  
      return "<div class='custom-table'>" + output + "</div>";
    }
    return output;
  }
});

// Copy with custom configuration
table.copyToClipboard("selected", false, {
  columnHeaders: false, // No headers
  columns: ["name", "age"] // Specific columns only
});

Paste Operations

Paste Parsers

Configure how pasted data is interpreted and parsed.

interface PasteParserOptions {
  clipboardPasteParser?: "table" | "csv" | "array" | Function;
}

Built-in Paste Parsers:

// Table parser - parse HTML table data
const table1 = new Tabulator("#table1", {
  clipboard: true,
  clipboardPasteParser: "table" // Default parser
});

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

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

// Custom parser function
const table4 = new Tabulator("#table4", {
  clipboard: true,
  clipboardPasteParser: function(clipboardData) {
    const lines = clipboardData.split('\n');
    const parsedData = [];
    
    lines.forEach(line => {
      if (line.trim()) {
        const parts = line.split('|'); // Custom delimiter
        parsedData.push({
          name: parts[0]?.trim(),
          age: parseInt(parts[1]?.trim()),
          department: parts[2]?.trim()
        });
      }
    });
    
    return parsedData;
  }
});

Paste Actions

Configure how parsed clipboard data is inserted into the table.

interface PasteActionOptions {
  clipboardPasteAction?: "insert" | "update" | "replace" | Function;
}

Built-in Paste Actions:

// Insert - add pasted data as new rows
const table1 = new Tabulator("#table1", {
  clipboard: true,
  clipboardPasteAction: "insert" // Default action
});

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

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

// Custom paste action
const table4 = new Tabulator("#table4", {
  clipboard: true,
  clipboardPasteAction: function(data) {
    // Custom logic for handling pasted data
    console.log("Pasting data:", data);
    
    // Validate data before insertion
    const validData = data.filter(row => {
      return row.name && row.age && row.department;
    });
    
    if (validData.length !== data.length) {
      alert(`${data.length - validData.length} invalid rows were skipped`);
    }
    
    // Insert valid data
    this.addData(validData);
  }
});

Advanced Clipboard Features

Keyboard Shortcuts

Standard keyboard shortcuts work automatically when clipboard is enabled:

Ctrl+C / Cmd+C: Copy selected rows to clipboard
Ctrl+V / Cmd+V: Paste clipboard data into table

Range Selection Integration

Clipboard operations work seamlessly with range selection:

const table = new Tabulator("#table", {
  clipboard: true,
  selectableRange: true, // Enable range selection
  clipboardCopyRowRange: "selected"
});

// Copy operations will include selected ranges
// Paste operations will target selected cells when possible

Events

Handle clipboard operation events for custom processing.

table.on("clipboardCopied", function(clipboard, plainText, htmlText) {
  console.log("Data copied to clipboard");
  console.log("Plain text:", plainText);
  console.log("HTML:", htmlText);
});

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

table.on("clipboardPasteError", function(clipboard) {
  console.log("Error pasting clipboard data");
  alert("Failed to parse clipboard data");
});

Column-Specific Clipboard Settings

Configure clipboard behavior for individual columns:

const table = new Tabulator("#table", {
  clipboard: true,
  columns: [
    {
      title: "ID",
      field: "id", 
      clipboard: false // Exclude from clipboard operations
    },
    {
      title: "Name",
      field: "name",
      clipboard: true,
      titleClipboard: "Full Name" // Custom clipboard title
    },
    {
      title: "Email", 
      field: "email",
      clipboard: true,
      titleClipboard: false // No title in clipboard
    },
    {
      title: "Salary",
      field: "salary",
      formatter: "money",
      clipboard: true,
      formatterClipboard: "number" // Different formatter for clipboard
    }
  ]
});

Integration with Export Module

Clipboard functionality leverages the Export module for data formatting:

const table = new Tabulator("#table", {
  clipboard: true,
  clipboardCopyConfig: {
    // Uses same configuration as export functions
    columnHeaders: true,
    columnCalcs: true,
    formatters: true,
    columns: ["name", "department", "salary"]
  }
});

// Clipboard copy uses export functionality internally
table.copyToClipboard("all", true, {
  delimiter: "\t", // Tab-delimited for spreadsheets
  columnHeaders: true
});

Security Considerations

Browser security policies may restrict clipboard access:

// Check clipboard API availability
if (navigator.clipboard && navigator.clipboard.writeText) {
  // Modern clipboard API available
  console.log("Clipboard API supported");
} else {
  // Fallback to document.execCommand (may require user interaction)
  console.log("Using legacy clipboard methods");
}

// Handle clipboard permissions
navigator.permissions.query({name: "clipboard-write"}).then(result => {
  if (result.state === "granted" || result.state === "prompt") {
    console.log("Clipboard write permission available");
  }
});

Types

interface ClipboardOptions {
  clipboard?: boolean | "copy" | "paste";
  clipboardCopyStyled?: boolean;
  clipboardCopyConfig?: ExportConfig;
  clipboardCopyRowRange?: "visible" | "active" | "selected" | "all";
  clipboardPasteParser?: "table" | "csv" | "array" | PasteParserFunction;
  clipboardPasteAction?: "insert" | "update" | "replace" | PasteActionFunction;
}

interface PasteParserFunction {
  (clipboardData: string): any[];
}

interface PasteActionFunction {
  (data: any[]): void;
}

interface ClipboardConfig {
  columnHeaders?: boolean;
  columnGroups?: boolean;
  rowGroups?: boolean;
  columnCalcs?: boolean;
  dataTree?: boolean;
  formatters?: boolean;
  columns?: string[];
}

Install with Tessl CLI