or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cell-types-editing.mdcore-operations.mddata-grid-features.mdevent-system.mdhelper-utilities.mdindex.mdinternationalization.mdplugin-system.mdui-interaction.md
tile.json

plugin-system.mddocs/

Plugin System

Modular plugin architecture with 35+ built-in plugins for extending Handsontable grid functionality. Plugins provide reusable components for features like sorting, filtering, data manipulation, UI enhancements, and more.

Capabilities

Plugin Registry

System for registering, retrieving, and managing plugins.

/**
 * Register a new plugin
 * @param name - Unique plugin name
 * @param pluginClass - Plugin class extending BasePlugin
 */
function registerPlugin(name: string, pluginClass: typeof BasePlugin): void;

/**
 * Get a registered plugin class
 * @param name - Plugin name
 * @returns Plugin class
 */
function getPlugin(name: string): typeof BasePlugin;

/**
 * Get all registered plugin names
 * @returns Array of plugin names
 */
function getPluginsNames(): string[];

Base Plugin Class

Foundation class for all Handsontable plugins.

/**
 * Base plugin class that all plugins extend
 */
class BasePlugin {
  constructor(hotInstance: Core);
  
  /** Plugin identifier constant */
  static get PLUGIN_KEY(): string;
  
  /** Check if plugin is currently enabled */
  isEnabled(): boolean;
  
  /** Enable the plugin */
  enablePlugin(): void;
  
  /** Disable the plugin */
  disablePlugin(): void;
  
  /** Update plugin after settings change */
  updatePlugin(): void;
  
  /** Clean up plugin resources */
  destroy(): void;
  
  /** Add hook callbacks for plugin functionality */
  addHook(name: string, callback: Function): void;
  
  /** Remove hook callbacks */
  removeHook(name: string): void;
}

Built-in Plugins

Column and Row Manipulation Plugins

AutoColumnSize

Automatically adjusts column widths based on content.

interface AutoColumnSizeSettings {
  syncLimit?: number; // Number of columns to measure synchronously
  useHeaders?: boolean; // Include headers in width calculation
}

// Usage in grid settings
const hot = new Handsontable(container, {
  autoColumnSize: true,
  // or with options
  autoColumnSize: {
    syncLimit: 300,
    useHeaders: true
  }
});

ManualColumnResize

Enables manual column resizing via drag handles.

// Basic enable
const hot = new Handsontable(container, {
  manualColumnResize: true
});

// Plugin methods available via plugin instance
const plugin = hot.getPlugin('ManualColumnResize');
plugin.setManualSize(column, width);
plugin.clearManualSize(column);

ManualColumnMove

Allows dragging columns to reorder them.

const hot = new Handsontable(container, {
  manualColumnMove: true
});

// Plugin API
const plugin = hot.getPlugin('ManualColumnMove');
plugin.moveColumn(from, to);
plugin.moveColumns(columns, target);

Sorting and Filtering Plugins

ColumnSorting

Single-column sorting functionality.

interface ColumnSortingSettings {
  enabled?: boolean;
  indicator?: boolean; // Show sort indicators
  headerAction?: boolean; // Enable header click sorting
  compareFunctionFactory?: (sortOrder: string, columnMeta: object) => Function;
}

const hot = new Handsontable(container, {
  columnSorting: {
    indicator: true,
    headerAction: true
  }
});

// Plugin API
const plugin = hot.getPlugin('ColumnSorting');
plugin.sort({ column: 0, sortOrder: 'asc' });
plugin.clearSort();

Filters

Advanced filtering with dropdown interfaces.

interface FiltersSettings {
  enabled?: boolean;
  indicators?: boolean; // Show filter indicators
  dropdownMenu?: boolean | object; // Configure dropdown integration
}

const hot = new Handsontable(container, {
  filters: true,
  dropdownMenu: true
});

// Plugin API
const plugin = hot.getPlugin('Filters');
plugin.addCondition(column, name, args);
plugin.filter();
plugin.clearConditions();

UI Enhancement Plugins

ContextMenu

Right-click context menu functionality.

interface ContextMenuSettings {
  items?: object; // Custom menu items
  callback?: (key: string, selection: object, clickEvent: MouseEvent) => void;
}

const hot = new Handsontable(container, {
  contextMenu: {
    items: {
      'remove_row': { name: 'Remove row' },
      'insert_row_above': { name: 'Insert row above' }
    }
  }
});

Comments

Cell commenting system with threaded discussions.

const hot = new Handsontable(container, {
  comments: true
});

// Plugin API
const plugin = hot.getPlugin('Comments');
plugin.setCommentAtCell(row, col, comment);
plugin.removeCommentAtCell(row, col);
plugin.getCommentAtCell(row, col);

MergeCells

Cell merging functionality for spanning multiple cells.

const hot = new Handsontable(container, {
  mergeCells: [
    { row: 1, col: 1, rowspan: 2, colspan: 2 }
  ]
});

// Plugin API  
const plugin = hot.getPlugin('MergeCells');
plugin.merge(row, col, endRow, endCol);
plugin.unmerge(row, col, endRow, endCol);

Data Manipulation Plugins

UndoRedo

Undo/redo functionality for data changes.

const hot = new Handsontable(container, {
  undo: true
});

// Plugin API
const plugin = hot.getPlugin('UndoRedo');
plugin.undo();
plugin.redo();
plugin.clear();
plugin.isUndoAvailable();
plugin.isRedoAvailable();

CopyPaste

Clipboard operations with external applications.

interface CopyPasteSettings {
  enabled?: boolean;
  pasteMode?: 'overwrite' | 'shift_down' | 'shift_right';
  rowsLimit?: number;
  columnsLimit?: number;
}

const hot = new Handsontable(container, {
  copyPaste: {
    pasteMode: 'shift_down',
    rowsLimit: 1000
  }
});

Search

Find and highlight functionality.

const hot = new Handsontable(container, {
  search: true
});

// Plugin API
const plugin = hot.getPlugin('Search');
const results = plugin.query('searchTerm');
plugin.getCallback();

Plugin Development

Creating Custom Plugins

/**
 * Custom plugin example
 */
class CustomPlugin extends BasePlugin {
  constructor(hotInstance) {
    super(hotInstance);
    
    // Plugin initialization
  }
  
  static get PLUGIN_KEY() {
    return 'customPlugin';
  }
  
  isEnabled() {
    return this.hot.getSettings().customPlugin;
  }
  
  enablePlugin() {
    if (this.enabled) {
      return;
    }
    
    // Add hooks and initialize functionality
    this.addHook('afterRender', () => this.onAfterRender());
    
    super.enablePlugin();
  }
  
  disablePlugin() {
    // Clean up functionality
    super.disablePlugin();
  }
  
  onAfterRender() {
    // Custom functionality
  }
}

// Register the plugin
registerPlugin('customPlugin', CustomPlugin);

Usage Examples:

// Enable custom plugin
const hot = new Handsontable(container, {
  customPlugin: true
});

// Access plugin instance
const plugin = hot.getPlugin('customPlugin');

Complete Plugin List

The following plugins are available in Handsontable:

Column/Row Manipulation:

  • AutoColumnSize, AutoRowSize
  • ManualColumnResize, ManualRowResize
  • ManualColumnMove, ManualRowMove
  • ManualColumnFreeze

Sorting & Filtering:

  • ColumnSorting, MultiColumnSorting
  • Filters

UI Enhancements:

  • ContextMenu, DropdownMenu
  • Comments, CustomBorders
  • MergeCells, NestedHeaders, NestedRows
  • CollapsibleColumns

Data Features:

  • UndoRedo, CopyPaste, Autofill
  • Search, PersistentState
  • ExportFile, HiddenColumns, HiddenRows

Advanced Features:

  • Formulas, BindRowsWithHeaders
  • ColumnSummary, TrimRows
  • DragToScroll, TouchScroll

All plugins follow the same registration and lifecycle patterns, providing consistent APIs for configuration and programmatic control.