CellTemplate interface

CellTemplate is an interface used for communication between ReactGrid and a cell. At this stage if you are still not familiar with cell marker interfaces, it might be helpful to read about them:

Definition

interface CellTemplate<TCell extends Cell = Cell> {
    // Validate and convert to compatible cell type
    getCompatibleCell(uncertainCell: Uncertain<TCell>): Compatible<TCell>;
    // Returns true if the data in the cell is not replacable
    // Default: _ => true
    isFocusable?(cell: Compatible<TCell>): boolean;
    // Update cell based on new props
    // If not implemented, cell will be read-only
    update?(cell: Compatible<TCell>, cellToMerge: UncertainCompatible<TCell>): Compatible<TCell>;
    // The keyCode represents the key pressed on the keyboard, or 1 for a pointer event (double click).
    // Returns the cell data either affected by the event or not.
    // Default: cell => { cell, enableEditMode: false }
    handleKeyDown?(cell: Compatible<TCell>, keyCode: number, ctrl: boolean, shift: boolean, alt: boolean): { cell: Compatible<TCell>; enableEditMode: boolean };
    // Custom styles based on cell data applied to the cells div element
    // Default: _ => cell.style | {}
    getStyle?(cell: Compatible<TCell>, isInEditMode: boolean): CellStyle;
    // Custom class names based on cell data applied to the cells div element
    // Default: _ => cell.className | ''
    getClassName?(cell: Compatible<TCell>, isInEditMode: boolean): string;
    // Render the cell content
    render(cell: Compatible<TCell>, isInEditMode: boolean, onCellChanged: (cell: Compatible<TCell>, commit: boolean) => void): React.ReactNode;
}

Properties

MethodReturnsDescription
getCompatibleCell(uncertainCell: Uncertain <TCell>) CompatibleCell <TCell>Validates and converts into a compatible cell type
isFocusable?(cell: Compatible <TCell>)booleanMarks a cell as focusable or not
update?(cell: Compatible <TCell>, cellToMerge: UncertainCompatible <TCell>) CompatibleCell <TCell>Updates cell based on new properties, if not implemented, a cell will be read-only
handleKeyDown?(cell: Compatible <TCell>, keyCode: number, ctrl: boolean, shift: boolean, alt: boolean){ cell: CompatibleCell <TCell>; enableEditMode: boolean }Returns the cell data either affected by an event or not.
getStyle?(cell: Compatible <TCell>, isInEditMode: boolean) CellStyle Returns custom styles based on cell data applied to the cells div element
getClassName?(cell: Compatible <TCell>, isInEditMode: boolean)stringReturns custom class names based on cell data applied to the cells div element
render(cell: Compatible <TCell>, isInEditMode: boolean, onCellChanged: (cell: Compatible <TCell>, commit: boolean) => void)React.ReactNodeRenders cell content