Advanced data grid functionality including sorting, filtering, column/row manipulation, data operations, and plugin-based features for enhanced user experience.
Single and multi-column sorting with custom comparison functions.
// Column sorting configuration
interface ColumnSortingSettings {
enabled?: boolean;
indicator?: boolean;
headerAction?: boolean;
sortEmptyCells?: boolean;
compareFunctionFactory?: (sortOrder: string, columnMeta: object) => Function;
}
// Plugin methods via hot.getPlugin('columnSorting')
class ColumnSorting {
/**
* Sort data by column
* @param config - Sort configuration
*/
sort(config: SortConfig): void;
/**
* Check if data is sorted
* @returns True if sorted
*/
isSorted(): boolean;
/**
* Get current sort configuration
* @returns Current sort config
*/
getSortConfig(): SortConfig[];
/**
* Clear all sorting
*/
clearSort(): void;
}
interface SortConfig {
column: number;
sortOrder: 'asc' | 'desc';
}Usage Examples:
// Enable column sorting
const hot = new Handsontable(container, {
data: myData,
columnSorting: {
enabled: true,
indicator: true,
headerAction: true
}
});
// Programmatic sorting
const columnSorting = hot.getPlugin('columnSorting');
columnSorting.sort({ column: 0, sortOrder: 'asc' });
// Multi-column sorting
hot.updateSettings({
multiColumnSorting: {
enabled: true,
indicator: true
}
});Advanced filtering system with multiple condition types and custom filters.
// Filters configuration
interface FiltersSettings {
enabled?: boolean;
indicators?: boolean;
dropdownMenu?: boolean | object;
}
// Plugin methods via hot.getPlugin('filters')
class Filters {
/**
* Add filter condition to column
* @param column - Column index
* @param name - Condition name
* @param args - Condition arguments
*/
addCondition(column: number, name: string, args?: any[]): void;
/**
* Remove all conditions from column
* @param column - Column index
*/
removeConditions(column: number): void;
/**
* Clear all filters
*/
clearConditions(): void;
/**
* Apply current filters
*/
filter(): void;
/**
* Get filter conditions for column
* @param column - Column index
* @returns Array of conditions
*/
getConditions(column: number): FilterCondition[];
}
interface FilterCondition {
name: string;
args: any[];
}
// Available filter conditions
type FilterConditionName =
| 'begins_with' | 'between' | 'by_value' | 'contains' | 'empty'
| 'ends_with' | 'eq' | 'gt' | 'gte' | 'lt' | 'lte' | 'ne'
| 'none' | 'not_between' | 'not_contains' | 'not_empty';Interactive column and row operations including moving, resizing, and hiding.
// Manual column resize
interface ManualColumnResizeSettings {
enabled?: boolean;
currentColClassName?: string;
}
// Manual row resize
interface ManualRowResizeSettings {
enabled?: boolean;
currentRowClassName?: string;
}
// Manual column move
interface ManualColumnMoveSettings {
enabled?: boolean;
backgroundColorClassName?: string;
}
// Manual row move
interface ManualRowMoveSettings {
enabled?: boolean;
backgroundColorClassName?: string;
}
// Hidden columns plugin
class HiddenColumns {
/**
* Hide columns by index
* @param columns - Array of column indices to hide
*/
hideColumns(columns: number[]): void;
/**
* Show previously hidden columns
* @param columns - Array of column indices to show
*/
showColumns(columns: number[]): void;
/**
* Check if column is hidden
* @param column - Column index
* @returns True if hidden
*/
isHidden(column: number): boolean;
/**
* Get all hidden columns
* @returns Array of hidden column indices
*/
getHiddenColumns(): number[];
}
// Hidden rows plugin
class HiddenRows {
/**
* Hide rows by index
* @param rows - Array of row indices to hide
*/
hideRows(rows: number[]): void;
/**
* Show previously hidden rows
* @param rows - Array of row indices to show
*/
showRows(rows: number[]): void;
/**
* Check if row is hidden
* @param row - Row index
* @returns True if hidden
*/
isHidden(row: number): boolean;
/**
* Get all hidden rows
* @returns Array of hidden row indices
*/
getHiddenRows(): number[];
}Advanced cell merging functionality for creating complex layouts.
// Merge cells configuration
interface MergeCellsSettings {
enabled?: boolean;
cells?: MergeCell[];
}
interface MergeCell {
row: number;
col: number;
rowspan: number;
colspan: number;
}
// Plugin methods via hot.getPlugin('mergeCells')
class MergeCells {
/**
* Merge cells in specified range
* @param startRow - Starting row
* @param startCol - Starting column
* @param endRow - Ending row
* @param endCol - Ending column
*/
merge(startRow: number, startCol: number, endRow: number, endCol: number): void;
/**
* Unmerge cells at specified position
* @param row - Row index
* @param col - Column index
*/
unmerge(row: number, col: number): void;
/**
* Get merged cells information
* @returns Array of merged cell objects
*/
getMergedCells(): MergeCell[];
/**
* Check if cell is merged
* @param row - Row index
* @param col - Column index
* @returns Merge information or false
*/
isMerged(row: number, col: number): MergeCell | false;
}Export grid data to various formats and import from external sources.
// Export file plugin
class ExportFile {
/**
* Export data to CSV format
* @param filename - Output filename
* @param options - Export options
*/
downloadFile(format: 'csv', options?: ExportOptions): void;
/**
* Export data as string
* @param format - Export format
* @param options - Export options
* @returns Formatted data string
*/
exportAsString(format: 'csv', options?: ExportOptions): string;
}
interface ExportOptions {
range?: [number, number, number, number];
exportHiddenColumns?: boolean;
exportHiddenRows?: boolean;
columnHeaders?: boolean;
rowHeaders?: boolean;
fileExtension?: string;
mimeType?: string;
columnDelimiter?: string;
rowDelimiter?: string;
}Clipboard operations with formatting preservation and external data handling.
// Copy paste configuration
interface CopyPasteSettings {
enabled?: boolean;
pasteMode?: 'overwrite' | 'shift_down' | 'shift_right';
rowsLimit?: number;
columnsLimit?: number;
}
// Plugin methods via hot.getPlugin('copyPaste')
class CopyPaste {
/**
* Copy selected cells to clipboard
*/
copy(): void;
/**
* Cut selected cells to clipboard
*/
cut(): void;
/**
* Paste data from clipboard
* @param pastableText - Text to paste (optional)
*/
paste(pastableText?: string): void;
/**
* Get ranges that were last copied
* @returns Array of copied ranges
*/
getCopiedRanges(): CellRange[];
/**
* Check if there are copied ranges
* @returns True if has copied ranges
*/
hasCopiedRanges(): boolean;
}History management for reversible operations.
// Undo redo configuration
interface UndoRedoSettings {
enabled?: boolean;
}
// Plugin methods via hot.getPlugin('undoRedo')
class UndoRedo {
/**
* Undo last operation
*/
undo(): void;
/**
* Redo last undone operation
*/
redo(): void;
/**
* Check if undo is available
* @returns True if can undo
*/
isUndoAvailable(): boolean;
/**
* Check if redo is available
* @returns True if can redo
*/
isRedoAvailable(): boolean;
/**
* Clear undo/redo history
*/
clear(): void;
}Search functionality with result highlighting and navigation.
// Search configuration
interface SearchSettings {
enabled?: boolean;
searchResultClass?: string;
queryMethod?: (queryStr: string, value: CellValue) => boolean;
callback?: (instance: Core, row: number, col: number, value: CellValue, result: boolean) => void;
}
// Plugin methods via hot.getPlugin('search')
class Search {
/**
* Search for query in grid data
* @param queryStr - Search query
* @param callback - Callback for each cell
* @param queryMethod - Custom search method
* @returns Array of search results
*/
query(queryStr: string, callback?: SearchCallback, queryMethod?: SearchQueryMethod): SearchResult[];
/**
* Get last search results
* @returns Array of search results
*/
getSearchResults(): SearchResult[];
}
interface SearchResult {
row: number;
col: number;
data: CellValue;
}
type SearchCallback = (instance: Core, row: number, col: number, value: CellValue, result: boolean) => void;
type SearchQueryMethod = (queryStr: string, value: CellValue) => boolean;Cell comments functionality with rich content support.
// Comments configuration
interface CommentsSettings {
enabled?: boolean;
displayDelay?: number;
}
interface CommentObject {
value?: string;
readOnly?: boolean;
}
// Plugin methods via hot.getPlugin('comments')
class Comments {
/**
* Set comment for cell
* @param row - Row index
* @param col - Column index
* @param comment - Comment object or string
*/
setCommentAtCell(row: number, col: number, comment: string | CommentObject): void;
/**
* Get comment from cell
* @param row - Row index
* @param col - Column index
* @returns Comment object
*/
getCommentAtCell(row: number, col: number): CommentObject | undefined;
/**
* Remove comment from cell
* @param row - Row index
* @param col - Column index
*/
removeCommentAtCell(row: number, col: number): void;
/**
* Show comment editor
* @param range - Cell range to edit
*/
showAtCell(range: CellRange): void;
/**
* Hide comment editor
*/
hide(): void;
}Usage Examples:
// Enable multiple features
const hot = new Handsontable(container, {
data: myData,
colHeaders: true,
rowHeaders: true,
// Sorting and filtering
columnSorting: true,
filters: true,
dropdownMenu: true,
// Manual operations
manualColumnResize: true,
manualRowResize: true,
manualColumnMove: true,
manualRowMove: true,
// Data operations
copyPaste: true,
undoRedo: true,
// Advanced features
mergeCells: [
{ row: 0, col: 0, rowspan: 2, colspan: 2 }
],
comments: true,
search: true
});
// Access plugin functionality
const filters = hot.getPlugin('filters');
filters.addCondition(0, 'contains', ['searchterm']);
filters.filter();
const mergeCells = hot.getPlugin('mergeCells');
mergeCells.merge(0, 0, 1, 1);
const comments = hot.getPlugin('comments');
comments.setCommentAtCell(0, 0, 'This is a comment');