tessl/npm-handsontable--react

React class-based wrapper component for Handsontable data grid with spreadsheet-like functionality

—

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

Column Configuration

Name: tessl/npm-handsontable--react
Author: tessl

The HotColumn component provides a declarative way to configure individual columns in the HotTable through React component hierarchy. Each HotColumn component represents a single column configuration and can contain custom renderers and editors.

Capabilities

HotColumn Component

Component for defining column-specific settings and behaviors within a HotTable.

/**
 * Column configuration component for HotTable
 * Defines settings, renderers, and editors for a specific column
 */
class HotColumn extends React.Component<HotColumnProps, {}>;

interface HotColumnProps extends Handsontable.ColumnSettings {
  /** Column settings override */
  settings?: Handsontable.ColumnSettings;
  /** Child components (custom renderers/editors) */
  children?: React.ReactNode;
}

Usage Examples:

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

// Basic column configuration
function TableWithColumns() {
  const data = [
    { id: 1, name: 'John Doe', age: 30, active: true },
    { id: 2, name: 'Jane Smith', age: 25, active: false },
    { id: 3, name: 'Bob Johnson', age: 35, active: true }
  ];

  return (
    <HotTable 
      data={data} 
      licenseKey="non-commercial-and-evaluation"
    >
      <HotColumn data="id" title="ID" type="numeric" readOnly={true} />
      <HotColumn data="name" title="Full Name" type="text" />
      <HotColumn data="age" title="Age" type="numeric" />
      <HotColumn data="active" title="Active" type="checkbox" />
    </HotTable>
  );
}

// Advanced column configuration with validation
function TableWithValidation() {
  return (
    <HotTable 
      data={[]}
      startRows={5}
      colHeaders={true}
      licenseKey="non-commercial-and-evaluation"
    >
      <HotColumn 
        data="email" 
        title="Email"
        type="text"
        validator="email"
        allowInvalid={false}
      />
      <HotColumn 
        data="price" 
        title="Price"
        type="numeric"
        numericFormat={{
          pattern: '$0,0.00'
        }}
        validator={(value, callback) => {
          callback(value > 0);
        }}
      />
      <HotColumn 
        data="category" 
        title="Category"
        type="dropdown"
        source={['Electronics', 'Books', 'Clothing', 'Home']}
      />
    </HotTable>
  );
}

// Column with custom width and alignment
function TableWithStyling() {
  return (
    <HotTable 
      data={[]}
      startRows={3}
      colHeaders={true}
      licenseKey="non-commercial-and-evaluation"
    >
      <HotColumn 
        data="code" 
        title="Product Code"
        width={120}
        className="htCenter"
      />
      <HotColumn 
        data="description" 
        title="Description"
        width={300}
        wordWrap={false}
      />
      <HotColumn 
        data="amount" 
        title="Amount"
        type="numeric"
        width={100}
        className="htRight"
      />
    </HotTable>
  );
}

Column Settings Properties

All Handsontable column settings are supported as props on HotColumn:

// Data binding
data: string | number | ((row: number) => any);

// Display properties  
title?: string;
width?: number;
className?: string;
readOnly?: boolean;
wordWrap?: boolean;

// Cell type and formatting
type?: 'text' | 'numeric' | 'checkbox' | 'date' | 'dropdown' | 'autocomplete' | 'password' | 'handsontable';
numericFormat?: {
  pattern: string;
  culture?: string;
};
dateFormat?: string;
correctFormat?: boolean;
defaultDate?: string;
source?: string[] | ((query: string, callback: (items: string[]) => void) => void);
strict?: boolean;
allowInvalid?: boolean;
trimWhitespace?: boolean;

// Validation
validator?: string | ((value: any, callback: (valid: boolean) => void) => void);

// Rendering
renderer?: string | ((
  instance: Handsontable,
  TD: HTMLTableCellElement,
  row: number,
  col: number,
  prop: string | number,
  value: any,
  cellProperties: Handsontable.CellProperties
) => HTMLTableCellElement);

// Editing
editor?: string | typeof Handsontable.editors.BaseEditor;

Public Methods

Methods available on HotColumn instances for internal component communication:

/**
 * Filter out internal properties and return Handsontable-compatible settings
 * @returns Object containing only Handsontable column settings
 */
getSettingsProps(): HotTableProps;

/**
 * Get the local editor element for this column
 * @returns React editor component element or null
 */
getLocalEditorElement(): React.ReactElement | null;

/**
 * Create column settings based on props and child components
 * Processes renderers and editors from children
 */
createColumnSettings(): void;

/**
 * Emit column settings to parent HotTable component
 * Called during component lifecycle to register column configuration
 */
emitColumnSettings(): void;

Internal Properties

Internal properties used for communication between HotColumn and HotTable (not for direct use):

interface HotColumnProps {
  // Internal communication properties (prefixed with _)
  _componentRendererColumns?: Map<number | string, boolean>;
  _emitColumnSettings?: (columnSettings: Handsontable.ColumnSettings, columnIndex: number) => void;
  _columnIndex?: number;
  _getChildElementByType?: (children: React.ReactNode, type: string) => React.ReactElement;
  _getRendererWrapper?: (rendererNode: React.ReactElement) => typeof Handsontable.renderers.BaseRenderer;
  _getEditorClass?: (editorElement: React.ReactElement, editorColumnScope: EditorScopeIdentifier) => typeof Handsontable.editors.BaseEditor;
  _getEditorCache?: () => HotEditorCache;
  _getOwnerDocument?: () => Document;
}

Column Ordering and Index

Columns are configured in the order they appear as children of HotTable:

<HotTable data={data}>
  <HotColumn data="id" />      {/* Column index 0 */}
  <HotColumn data="name" />    {/* Column index 1 */}
  <HotColumn data="email" />   {/* Column index 2 */}
</HotTable>

The component automatically assigns column indices based on the order of HotColumn components in the React component tree. This index is used internally for managing column-specific renderers and editors.

Custom Renderers and Editors

HotColumn components can contain custom renderer and editor components as children:

import CustomRenderer from './CustomRenderer';
import CustomEditor from './CustomEditor';

<HotTable data={data}>
  <HotColumn data="status">
    <CustomRenderer hot-renderer />
  </HotColumn>
  <HotColumn data="notes">
    <CustomEditor hot-editor />
  </HotColumn>
</HotTable>

Child components with hot-renderer or hot-editor props are automatically detected and integrated into the column configuration.