or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

column-configuration.mdcustom-editors.mdindex.mdtable-component.md
tile.json

index.mddocs/

@handsontable/react

@handsontable/react is a React class-based wrapper component for the Handsontable data grid library. It provides a spreadsheet-like interface for creating interactive data tables with comprehensive features including cell editing, validation, sorting, filtering, formulas, conditional formatting, and virtualization. Perfect for building data-rich internal applications like ERP systems, inventory management, and data modeling tools.

Package Information

  • Package Name: @handsontable/react
  • Package Type: npm
  • Language: TypeScript
  • Installation: 
    npm install handsontable @handsontable/react

Core Imports

import { HotTable, HotColumn, BaseEditorComponent } from '@handsontable/react';

For CommonJS:

const { HotTable, HotColumn, BaseEditorComponent } = require('@handsontable/react');

Basic Usage

import React from 'react';
import { HotTable, HotColumn } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';
import 'handsontable/styles/handsontable.min.css';
import 'handsontable/styles/ht-theme-main.min.css';

// Register Handsontable's modules
registerAllModules();

function App() {
  const data = [
    ['John', 'Doe', 30, 'Developer'],
    ['Jane', 'Smith', 25, 'Designer'],
    ['Bob', 'Johnson', 35, 'Manager']
  ];

  return (
    <HotTable
      data={data}
      colHeaders={['First Name', 'Last Name', 'Age', 'Position']}
      rowHeaders={true}
      contextMenu={true}
      width="800"
      height="300"
      licenseKey="non-commercial-and-evaluation"
    >
      <HotColumn data="0" />
      <HotColumn data="1" />
      <HotColumn data="2" type="numeric" />
      <HotColumn data="3" />
    </HotTable>
  );
}

Architecture

@handsontable/react is built around several key components:

  • HotTable Component: Main wrapper component that creates and manages the Handsontable instance
  • HotColumn Component: Column configuration component for defining column-specific settings
  • BaseEditorComponent: Base class for creating custom React-based cell editors
  • Portal System: Manages React component rendering within the Handsontable DOM structure
  • Settings Mapping: Converts React props to Handsontable configuration options
  • Cache Management: Optimizes performance for component-based renderers and editors

Capabilities

Core Table Component

Main data grid component that wraps Handsontable functionality with React lifecycle integration and prop-based configuration.

const HotTable: ForwardRefExoticComponent<HotTableProps & RefAttributes<HotTableClass>>;

interface HotTableProps extends Handsontable.GridSettings {
  id?: string;
  className?: string;
  style?: React.CSSProperties;
  settings?: Handsontable.GridSettings;
  children?: React.ReactNode;
}

Static Properties:

HotTable.version: string;

Table Component

Column Configuration

Component-based column configuration system that allows defining column-specific settings, custom renderers, and editors through React component hierarchy.

class HotColumn extends React.Component<HotColumnProps, {}>;

interface HotColumnProps extends Handsontable.ColumnSettings {
  settings?: Handsontable.ColumnSettings;
  children?: React.ReactNode;
}

Column Configuration

Custom Editors

Base class and system for creating React-based custom cell editors that integrate seamlessly with Handsontable's editing lifecycle.

class BaseEditorComponent<P = {}, S = {}, SS = any> 
  extends React.Component<P & BaseEditorProps, S, SS> 
  implements Handsontable.editors.BaseEditor;

interface BaseEditorProps extends HotEditorProps {
  editorColumnScope?: EditorScopeIdentifier;
  emitEditorInstance?: (editor: BaseEditorComponent, column: EditorScopeIdentifier) => void;
}

interface HotEditorProps {
  "hot-editor": any;
  id?: string;
  className?: string;
  style?: React.CSSProperties;
}

Custom Editors

Types

Core Types

type EditorScopeIdentifier = 'global' | number;
type HotEditorCache = Map<Function, Map<EditorScopeIdentifier, React.Component>>;
type HotEditorElement = React.ReactElement<{}, ConnectedComponent<React.FunctionComponent, any> | any>;

HotTableClass Reference

class HotTableClass extends React.Component<HotTableProps, {}> {
  /** Reference to the Handsontable instance */
  get hotInstance(): Handsontable | null;
  
  /** Component DOM element ID */
  id: string;
  
  /** Reference to main DOM element */
  hotElementRef: HTMLElement;
  
  /** Component CSS class name */
  className: string;
  
  /** Component inline styles */
  style: React.CSSProperties;
  
  /** Package version */
  static get version(): string;
  
  /** Get portal container cache */
  getPortalContainerCache(): Map<string, HTMLElement>;
  
  /** Get rendered cell cache */
  getRenderedCellCache(): Map<string, HTMLTableCellElement>;
  
  /** Get editor cache */
  getEditorCache(): HotEditorCache;
  
  /** Clear renderer and editor caches */
  clearCache(): void;
  
  /** Get document object */
  getOwnerDocument(): Document | null;
  
  /** Get renderer wrapper function */
  getRendererWrapper(rendererElement: React.ReactElement): typeof Handsontable.renderers.BaseRenderer;
  
  /** Get editor class */
  getEditorClass(editorElement: HotEditorElement, editorColumnScope?: EditorScopeIdentifier): typeof Handsontable.editors.BaseEditor;
}