Table Component

/**
 * Main Handsontable React component
 * @param props - Component props extending Handsontable settings
 * @param ref - Forward ref to HotTableClass instance
 */
const HotTable: ForwardRefExoticComponent<HotTableProps & RefAttributes<HotTableClass>>;

interface HotTableProps extends Handsontable.GridSettings {
  /** Component DOM element ID */
  id?: string;
  /** CSS class name for the component */
  className?: string;
  /** Inline styles for the component */
  style?: React.CSSProperties;
  /** Handsontable settings object override */
  settings?: Handsontable.GridSettings;
  /** Child components (HotColumn, custom renderers/editors) */
  children?: React.ReactNode;
}

/** Package version number */
HotTable.version: string;

import React, { useRef } from 'react';
import { HotTable } from '@handsontable/react';
import { registerAllModules } from 'handsontable/registry';

registerAllModules();

// Basic usage with data array
function BasicTable() {
  const data = [
    ['A1', 'B1', 'C1'],
    ['A2', 'B2', 'C2'],
    ['A3', 'B3', 'C3']
  ];

  return (
    <HotTable
      data={data}
      colHeaders={true}
      rowHeaders={true}
      width="600"
      height="300"
      licenseKey="non-commercial-and-evaluation"
    />
  );
}

// Usage with ref for imperative API access
function TableWithRef() {
  const hotTableRef = useRef<HotTableClass>(null);

  const handleGetData = () => {
    if (hotTableRef.current?.hotInstance) {
      const data = hotTableRef.current.hotInstance.getData();
      console.log('Table data:', data);
    }
  };

  return (
    <div>
      <HotTable
        ref={hotTableRef}
        data={[['Sample', 'Data']]}
        colHeaders={['Column 1', 'Column 2']}
        licenseKey="non-commercial-and-evaluation"
      />
      <button onClick={handleGetData}>Get Data</button>
    </div>
  );
}

// Usage with custom styling and configuration
function StyledTable() {
  const settings = {
    contextMenu: true,
    manualRowResize: true,
    manualColumnResize: true,
    filters: true,
    columnSorting: true
  };

  return (
    <HotTable
      data={[]}
      startRows={10}
      startCols={5}
      colHeaders={true}
      rowHeaders={true}
      className="custom-hot-table"
      style={{ border: '1px solid #ccc' }}
      settings={settings}
      licenseKey="non-commercial-and-evaluation"
    />
  );
}

class HotTableClass extends React.Component<HotTableProps, {}> {
  /** Reference to the Handsontable instance */
  get hotInstance(): Handsontable | null;
  
  /** Setter for the Handsontable instance */
  set hotInstance(hotInstance: Handsontable);
  
  /** Component DOM element ID */
  id: string;
  
  /** Reference to main Handsontable DOM element */
  hotElementRef: HTMLElement;
  
  /** Class name added to the component DOM element */
  className: string;
  
  /** Style object passed to the component */
  style: React.CSSProperties;
  
  /** Array of column settings from HotColumn components */
  columnSettings: Handsontable.ColumnSettings[];
  
  /** Package version getter */
  static get version(): string;
}

/**
 * Get the portal container cache used for component rendering
 * @returns Map of portal containers keyed by unique identifiers
 */
getPortalContainerCache(): Map<string, HTMLElement>;

/**
 * Get the rendered cell cache for performance optimization  
 * @returns Map of cached cell elements keyed by row-col coordinates
 */
getRenderedCellCache(): Map<string, HTMLTableCellElement>;

/**
 * Get the editor cache for component-based editors
 * @returns Nested map of editor components organized by class and scope
 */
getEditorCache(): HotEditorCache;

/**
 * Clear both renderer and editor caches
 * Typically called during component updates
 */
clearCache(): void;

/**
 * Get the Document object corresponding to the main component element
 * @returns Document object or null in SSR environments
 */
getOwnerDocument(): Document | null;

/**
 * Create a renderer wrapper function for React renderer components
 * @param rendererElement - React renderer component element
 * @returns Handsontable-compatible renderer function
 */
getRendererWrapper(rendererElement: React.ReactElement): typeof Handsontable.renderers.BaseRenderer;

/**
 * Create an editor class for React editor components
 * @param editorElement - React editor component element
 * @param editorColumnScope - Column scope identifier (defaults to 'global')
 * @returns Handsontable-compatible editor class
 */
getEditorClass(
  editorElement: HotEditorElement, 
  editorColumnScope?: EditorScopeIdentifier
): typeof Handsontable.editors.BaseEditor;

/**
 * Set column settings from HotColumn components
 * @param columnSettings - Column configuration object
 * @param columnIndex - Zero-based column index
 */
setHotColumnSettings(columnSettings: Handsontable.ColumnSettings, columnIndex: number): void;

// Common Handsontable props
<HotTable
  data={data}                    // Data source
  dataSchema={schema}            // Data schema for new rows
  colHeaders={true}              // Column headers
  rowHeaders={true}              // Row headers
  width={800}                    // Table width
  height={400}                   // Table height
  stretchH="all"                 // Column stretching
  contextMenu={true}             // Right-click menu
  manualRowResize={true}         // Row resizing
  manualColumnResize={true}      // Column resizing
  columnSorting={true}           // Column sorting
  filters={true}                 // Column filtering
  readOnly={false}               // Edit mode
  licenseKey="non-commercial-and-evaluation"
/>