tacel-excel-table

A powerful, Excel-like table component with sorting, filtering, editing, selection, export, and more.

Installation

npm install tacel-excel-table

Usage

In Electron/Node.js

// Import the component
const { ExcelTable } = require('tacel-excel-table');

// In your HTML, include the CSS
// <link rel="stylesheet" href="node_modules/tacel-excel-table/excel-table.css">

// Create a table
const table = new ExcelTable('#table-container', {
  columns: [
    { key: 'name', label: 'Name' },
    { key: 'email', label: 'Email' },
    { key: 'status', label: 'Status', type: 'dropdown', options: ['Active', 'Inactive'] }
  ],
  data: [
    { name: 'John Doe', email: '[email protected]', status: 'Active' },
    { name: 'Jane Smith', email: '[email protected]', status: 'Inactive' }
  ],
  onDataChange: (data) => {
    console.log('Data changed:', data);
  }
});

In Browser (Script Tag)

<link rel="stylesheet" href="node_modules/tacel-excel-table/excel-table.css">
<script src="node_modules/tacel-excel-table/excel-table.js"></script>

<script>
  const table = new ExcelTable('#table-container', { ... });
</script>

Features

• ✅ Editable Cells - Click to edit, with per-column/row/cell control
• ✅ Sorting - Click column headers to sort
• ✅ Filtering - Dropdown filters per column
• ✅ Selection - Multi-cell, row, column selection (Shift/Ctrl+click)
• ✅ Copy/Paste - Ctrl+C, Ctrl+V, Ctrl+X
• ✅ Undo/Redo - Ctrl+Z, Ctrl+Y
• ✅ Find - Ctrl+F to search
• ✅ Export - Excel, CSV, JSON, HTML formats
• ✅ Freeze Panes - Sticky headers and columns
• ✅ Column Resize - Drag to resize, double-click to auto-fit
• ✅ Column Reorder - Drag headers to reorder
• ✅ Dropdown Cells - Built-in dropdown support
• ✅ Conditional Formatting - Style cells based on data
• ✅ Auto-Refresh - Periodic data refresh with callback
• ✅ Theming - CSS variables for easy customization

Options

new ExcelTable(container, {
  // Required
  columns: [],              // Column definitions
  data: [],                 // Initial data array

  // Callbacks
  onDataChange: null,       // Called when data changes
  onSelectionChange: null,  // Called when selection changes
  onColumnResize: null,     // Called when column is resized
  onColumnReorder: null,    // Called when columns are reordered
  onRefresh: null,          // Async callback to fetch new data

  // Features
  editable: true,           // Global edit toggle
  sortable: true,           // Enable sorting
  filterable: true,         // Enable filters
  showRowNumbers: true,     // Show row numbers
  allowColumnResize: true,  // Allow column resizing
  allowColumnReorder: true, // Allow column reordering
  
  // Freeze panes
  freezeHeader: true,       // Sticky header row
  freezeColumns: 0,         // Number of left columns to freeze
  freezeColumnsRight: 0,    // Number of right columns to freeze

  // Footer
  showShortcutsButton: true,// Show keyboard shortcuts button
  showExportButton: true,   // Show export button
  exportFilename: 'export', // Default export filename

  // Auto-refresh
  autoRefresh: false,       // Enable auto-refresh
  autoRefreshInterval: 30000, // Refresh interval in ms
});

Theming

Override CSS variables to customize the appearance:

.excel-table-container {
  --excel-primary-color: #0066cc;
  --excel-font-family: 'Inter', sans-serif;
  --excel-font-size: 14px;
  --excel-header-bg: linear-gradient(180deg, #1a73e8 0%, #1557b0 100%);
  --excel-header-text: #ffffff;
  --excel-selection-bg: rgba(26, 115, 232, 0.2);
  --excel-bg-color: #ffffff;
  --excel-text-color: #333333;
  /* ... see excel-table.css for all variables */
}

Auto-Update on App Start

To ensure you always have the latest version, run this on app startup:

const { exec } = require('child_process');

// Run npm update for this package
exec('npm update tacel-excel-table', { cwd: __dirname }, (err) => {
  if (err) console.log('Update check failed:', err.message);
  else console.log('ExcelTable package up to date');
});

API Methods

// Refresh data
table.refresh(newData);           // With new data
table.refresh();                  // Using onRefresh callback

// Auto-refresh control
table.startAutoRefresh();
table.stopAutoRefresh();
table.setAutoRefreshInterval(60000);

// Export
table.exportTable('csv');         // 'xlsx', 'csv', 'json', 'html'

// Selection
table.getSelectedCells();         // Get selected cell data
table.clearSelection();

// Data
table.getData();                  // Get current data
table.setData(newData);           // Replace all data

// Cleanup
table.destroy();                  // Remove table and cleanup

Version History

• 1.0.0 - Initial release with all core features

License

MIT © Tacel Ltd