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.
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>
);
}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;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 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;
}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.
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-rendererhot-editor