tessl/npm-handsontable

JavaScript data grid component with spreadsheet-like functionality for React, Angular and Vue applications

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Data Grid Features

Name: tessl/npm-handsontable
Author: tessl

Advanced data grid functionality including sorting, filtering, column/row manipulation, data operations, and plugin-based features for enhanced user experience.

Capabilities

Column Sorting

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
  }
});

Data Filtering

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';

Column and Row Manipulation

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[];
}

Cell Merging

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;
}

Data Export and Import

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;
}

Copy, Cut, and Paste

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;
}

Undo and Redo

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 and Highlighting

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;

Comments System

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');