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.
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[];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;
}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
}
});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);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);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();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();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' }
}
}
});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);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);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();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
}
});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();/**
* 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');The following plugins are available in Handsontable:
Column/Row Manipulation:
Sorting & Filtering:
UI Enhancements:
Data Features:
Advanced Features:
All plugins follow the same registration and lifecycle patterns, providing consistent APIs for configuration and programmatic control.