react-konva-grid/dist/Grid.d.ts

Canvas grid to render large set of tabular data with virtualization.

import React, { Key } from "react";
import { Stage } from "react-konva/lib/ReactKonvaCore";
import { ShapeConfig } from "konva/types/Shape";
export interface GridProps {
    /**
     * Width of the grid
     */
    width?: number;
    /**
     * Height of the grid
     */
    height?: number;
    /**
     * No of columns in the grid
     */
    columnCount: number;
    /**
     * No of rows in the grid
     */
    rowCount: number;
    /**
     * Should return height of a row at an index
     */
    rowHeight?: ItemSizer;
    /**
     * Should return width of a column at an index
     */
    columnWidth?: ItemSizer;
    /**
     * Size of the scrollbar. Default is 13
     */
    scrollbarSize?: number;
    /**
     * Helps in lazy grid width calculation
     */
    estimatedColumnWidth?: number;
    /**
     * Helps in lazy grid height calculation
     */
    estimatedRowHeight?: number;
    /**
     * Called when user scrolls the grid
     */
    onScroll?: ({ scrollLeft, scrollTop }: ScrollCoords) => void;
    /**
     * Show scrollbars on the left and right of the grid
     */
    showScrollbar?: boolean;
    /**
     * Background of selection
     */
    selectionBackgroundColor?: string;
    /**
     * Border color of selected area
     */
    selectionBorderColor?: string;
    /**
     * Array of selected cell areas
     */
    selections?: AreaProps[];
    /**
     * Array of merged cells
     */
    mergedCells?: AreaProps[];
    /**
     * Number of frozen rows
     */
    frozenRows?: number;
    /**
     * Number of frozen columns
     */
    frozenColumns?: number;
    /**
     * Snap to row when scrolling
     */
    snapToRow?: boolean;
    /**
     * Snap to column when scrolling
     */
    snapToColumn?: boolean;
    /**
     * Cell renderer. Must be a Konva Component eg: Group, Rect etc
     */
    itemRenderer: (props: RendererProps) => React.ReactNode;
    /**
     * Allow users to customize selected cells design
     */
    selectionRenderer?: (props: SelectionProps) => React.ReactNode;
    /**
     * Fired when scroll viewport changes
     */
    onViewChange?: (view: ViewPortProps) => void;
    /**
     * Called right before a row is being rendered.
     * Will be called for frozen cells and merged cells
     */
    onBeforeRenderRow?: (rowIndex: number) => void;
}
declare type RefAttribute = {
    ref?: React.MutableRefObject<GridRef>;
};
export interface SelectionProps extends ShapeConfig {
}
export declare type ScrollCoords = {
    scrollTop: number;
    scrollLeft: number;
};
export declare type ForceUpdateType = {
    shouldForceUpdate: boolean;
};
export declare type RenderComponent = React.FC<RendererProps>;
export interface CellPosition {
    x: number;
    y: number;
    width: number;
    height: number;
}
export interface RendererProps extends CellInterface, CellPosition {
    key: Key;
}
export declare type ItemSizer = (index: number) => number;
export interface AreaProps {
    top: number;
    bottom: number;
    left: number;
    right: number;
}
export interface CellInterface {
    rowIndex: number;
    columnIndex: number;
}
export interface ViewPortProps {
    rowStartIndex: number;
    rowStopIndex: number;
    columnStartIndex: number;
    columnStopIndex: number;
}
export interface InstanceInterface {
    columnMetadataMap: CellMetaDataMap;
    rowMetadataMap: CellMetaDataMap;
    lastMeasuredColumnIndex: number;
    lastMeasuredRowIndex: number;
    estimatedRowHeight: number;
    estimatedColumnWidth: number;
}
export declare type CellMetaDataMap = Record<number, CellMetaData>;
export declare type CellMetaData = {
    offset: number;
    size: number;
};
export declare type GridRef = {
    scrollTo: (scrollPosition: ScrollCoords) => void;
    stage: typeof Stage | null;
    resetAfterIndices: (coords: CellInterface & ForceUpdateType) => void;
    getScrollPosition: () => ScrollCoords;
    isMergedCell: (coords: CellInterface) => boolean;
    getCellBounds: (coords: CellInterface) => AreaProps;
    getCellCoordsFromOffset: (x: number, y: number) => CellInterface;
    getCellOffsetFromCoords: (coords: CellInterface) => CellPosition;
};
export declare type MergedCellMap = Map<string, AreaProps>;
/**
 * Grid component using React Konva
 * @param props
 */
declare const Grid: React.FC<GridProps & RefAttribute>;
export default Grid;