Interface ScrollableGridProps

interface ScrollableGridProps {
    allowOverlaysOverflow?: boolean;
    cellInsets?: Rectangle;
    cellLayout?: CellLayout;
    cellRenderer?: ((props) => ReactNode);
    clipCells?: boolean;
    columnCount: number;
    createHorizontalScrollbar?: ((props) => ReactNode);
    createScrollCorner?: ((size) => ReactNode);
    createVerticalScrollbar?: ((props) => ReactNode);
    cursor?: string;
    defaultColumnWidth?: number;
    defaultRowHeight?: number;
    disableTouch?: boolean;
    enableMouseWheel?: boolean;
    freezeLeft?: number | FrozenEdge;
    freezeLeftProps?: Partial<LineProps>;
    freezeTop?: number | FrozenEdge;
    freezeTopProps?: Partial<LineProps>;
    getColumnWidth?: ItemSizer;
    getRowHeight?: ItemSizer;
    getVisibleCells?: ((view) => (CellCoords | {
        coords: CellCoords;
        range?: CellRangeCoords;
        value?: any;
    })[]);
    gridLineColor?: string;
    gridLineColumnsProps?: SVGProps<SVGPathElement>;
    gridLineRowsProps?: SVGProps<SVGPathElement>;
    height?: number;
    hiddenCellAt?: ((coords) => boolean);
    hiddenColumnsAt?: ((colIndex, forward) => number);
    hiddenRowsAt?: ((rowIndex, forward) => number);
    mergedRanges?: CellRangeLookup | CellRangeCoords[];
    onFirstRender?: ((grid) => void);
    onImmediateScroll?: ((scrollPoint) => void);
    onScrollViewport?: ((scrollPoint) => void);
    onViewportChange?: ((viewport) => void);
    onViewportScroll?: ((scrollPoint) => void);
    onWheelScroll?: ((event) => boolean | void);
    overlays?: ((view) => ReactNode)[];
    overlaysProps?: HTMLAttributes<HTMLDivElement>;
    rowCount: number;
    scrollPoint?: Partial<TopLeft>;
    showGridLines?: boolean | DirectionOptions;
    showHorizontalScrollbar?: boolean;
    showVerticalScrollbar?: boolean;
    stageProps?: HTMLAttributes<HTMLDivElement>;
    stageWrapper?: ((children) => ReactNode);
    touchElement?: HTMLElement;
    viewport: ScrollableViewport;
    width?: number;
    zoom?: number;
}

Hierarchy (view full)

Properties

allowOverlaysOverflow? cellInsets? cellLayout? cellRenderer? clipCells? columnCount createHorizontalScrollbar? createScrollCorner? createVerticalScrollbar? cursor? defaultColumnWidth? defaultRowHeight? disableTouch? enableMouseWheel? freezeLeft? freezeLeftProps? freezeTop? freezeTopProps? getColumnWidth? getRowHeight? getVisibleCells? gridLineColor? gridLineColumnsProps? gridLineRowsProps? height? hiddenCellAt? hiddenColumnsAt? hiddenRowsAt? mergedRanges? onFirstRender? onImmediateScroll? onScrollViewport? onViewportChange? onViewportScroll? onWheelScroll? overlays? overlaysProps? rowCount scrollPoint? showGridLines? showHorizontalScrollbar? showVerticalScrollbar? stageProps? stageWrapper? touchElement? viewport width? zoom?

Properties

Optional allowOverlaysOverflow

allowOverlaysOverflow?: boolean

Overlays are generally clipped to fit in the viewport but this allows for the properties to be overridden.

Optional cellInsets

cellInsets?: Rectangle

Allow for cells to be inset. This is a way to account for borders. By default this is 1, 1, 1,x

Optional cellLayout

cellLayout?: CellLayout

Optional cellRenderer

cellRenderer?: ((props) => ReactNode)

Return the actual element to render

Type declaration

Remarks

There can be many cells so care should be taken to ensure these are as performant as possible. By default the pointerEvents are set to none. To enable interaction this should be overwritten.

Optional clipCells

clipCells?: boolean

Clip overflow of cells unless explicitly provided

columnCount

columnCount: number

Number of columns in the grid

Optional createHorizontalScrollbar

createHorizontalScrollbar?: ((props) => ReactNode)

Type declaration

Optional createScrollCorner

createScrollCorner?: ((size) => ReactNode)

Type declaration

    • (size): ReactNode

    • Parameters

      Returns ReactNode

Optional createVerticalScrollbar

createVerticalScrollbar?: ((props) => ReactNode)

Type declaration

Optional cursor

cursor?: string

Cursor used for grid

Optional defaultColumnWidth

defaultColumnWidth?: number

Passed through to

See

useCellLayoutHook. If cellLayout property is provided this is ignored

Optional defaultRowHeight

defaultRowHeight?: number

Passed through to

See

useCellLayoutHook. If cellLayout property is provided this is ignored

Optional disableTouch

disableTouch?: boolean

If touch is disabled.

Default Value

false unless no touch events are detected

Optional enableMouseWheel

enableMouseWheel?: boolean

Enable dragging active cell and selections

Optional freezeLeft

freezeLeft?: number | FrozenEdge

Number of frozen left

Optional freezeLeftProps

freezeLeftProps?: Partial<LineProps>

Allow for customization of freezeTopDivider

Optional freezeTop

freezeTop?: number | FrozenEdge

Number of frozen top

Optional freezeTopProps

freezeTopProps?: Partial<LineProps>

Allow for customization of freezeTopDivider

Optional getColumnWidth

getColumnWidth?: ItemSizer

Passed through to

See

useCellLayoutHook. If cellLayout property is provided this is ignored

Optional getRowHeight

getRowHeight?: ItemSizer

Passed through to

See

useCellLayoutHook. If cellLayout property is provided this is ignored

Optional getVisibleCells

getVisibleCells?: ((view) => (CellCoords | {
    coords: CellCoords;
    range?: CellRangeCoords;
    value?: any;
})[])

Allows for optimization of rendering. This will allow for quick skipping of cells that have nothing to render. If this is not specified then all cells within the visible range will be iterated and if hiddenCellAt does not return false a then cell renderer will be called.

Type declaration

Returns

either a CellCoord that should be rendered or an object with a coord and value. Note - the value is passed to the cell renderer

Optional gridLineColor

gridLineColor?: string

Customize grid line color

Remarks

This is overwritten by gridlinePropsVertical and gridlinePropsHorizontal

Optional gridLineColumnsProps

gridLineColumnsProps?: SVGProps<SVGPathElement>

Gridline props for columns

Optional gridLineRowsProps

gridLineRowsProps?: SVGProps<SVGPathElement>

Gridline props for rows

Optional height

height?: number

Height of the grid container

Optional hiddenCellAt

hiddenCellAt?: ((coords) => boolean)

This will skip rendering. Note - This is superseded by hiddenRowsAt and hiddenColumnsAt. This is typically used for cells that have nothing to render

Type declaration

    • (coords): boolean

    • Parameters

      Returns boolean

Optional hiddenColumnsAt

hiddenColumnsAt?: ((colIndex, forward) => number)

Will skip rendering for this columns and the adjacent columns in the given direction.

Type declaration

    • (colIndex, forward): number

    • Parameters

      • colIndex: number
      • forward: boolean

      Returns number

Optional hiddenRowsAt

hiddenRowsAt?: ((rowIndex, forward) => number)

Will skip rendering for this row and the adjacent rows in the given direction.

Type declaration

    • (rowIndex, forward): number

    • Parameters

      • rowIndex: number
      • forward: boolean

      Returns number

Optional mergedRanges

mergedRanges?: CellRangeLookup | CellRangeCoords[]

Is either an array of merged cells or a CellRangeLookup

Optional onFirstRender

onFirstRender?: ((grid) => void)

Call only once when the renders for the first time.

Type declaration

Optional onImmediateScroll

onImmediateScroll?: ((scrollPoint) => void)

Called immediately on scroll. Used for programmatic changes. Called even on load

Type declaration

    • (scrollPoint): void

    • Parameters

      Returns void

Optional onScrollViewport

onScrollViewport?: ((scrollPoint) => void)

Optional callback

Type declaration

    • (scrollPoint): void

    • Parameters

      Returns void

Returns

Optional onViewportChange

onViewportChange?: ((viewport) => void)

Fired when the view port changes. This is in pixel coordinates and is slightly different than viewable cells because off screen location range could change

Type declaration

Optional onViewportScroll

onViewportScroll?: ((scrollPoint) => void)

Called on scroll, subject to debouncing. Used for programmatic changes. Called even on load

Type declaration

    • (scrollPoint): void

    • Parameters

      Returns void

Optional onWheelScroll

onWheelScroll?: ((event) => boolean | void)

When wheel mouse is called. If return false then wheelMouse will not be processed

Type declaration

    • (event): boolean | void

    • Parameters

      • event: WheelEvent

      Returns boolean | void

Optional overlays

overlays?: ((view) => ReactNode)[]

Render elements for the view. This will be called whenever the viewport changes

Type declaration

Optional overlaysProps

overlaysProps?: HTMLAttributes<HTMLDivElement>

Props called to overlays

rowCount

rowCount: number

Number of rows in the grid

Optional scrollPoint

scrollPoint?: Partial<TopLeft>

The location of the top left scroll corner

Optional showGridLines

showGridLines?: boolean | DirectionOptions

Show grid lines. Useful for spreadsheets NOTE - should we just allow gridline renderers to be null?

Optional showHorizontalScrollbar

showHorizontalScrollbar?: boolean

Optional showVerticalScrollbar

showVerticalScrollbar?: boolean

Optional stageProps

stageProps?: HTMLAttributes<HTMLDivElement>

Props that can be injected to stage

Optional stageWrapper

stageWrapper?: ((children) => ReactNode)

Allows users to Wrap stage children in Top level Context

Type declaration

    • (children): ReactNode

    • Parameters

      • children: ReactNode

      Returns ReactNode

Optional touchElement

touchElement?: HTMLElement

By default the ScrollPane will listen for events on all of the children of the ScrollPane but this allows for a custom element to be specified. This is useful when the ScrollPane has some elements that should not be touch enabled (for example headers)

viewport

viewport: ScrollableViewport

Optional width

width?: number

Width of the grid container

Optional zoom

zoom?: number

Zoom. 1 means no zoom

Default Value

1 or none.

Settings

Member Visibility

Theme

On This Page

allowOverlaysOverflowcellInsetscellLayoutcellRendererclipCellscolumnCountcreateHorizontalScrollbarcreateScrollCornercreateVerticalScrollbarcursordefaultColumnWidthdefaultRowHeightdisableTouchenableMouseWheelfreezeLeftfreezeLeftPropsfreezeTopfreezeTopPropsgetColumnWidthgetRowHeightgetVisibleCellsgridLineColorgridLineColumnsPropsgridLineRowsPropsheighthiddenCellAthiddenColumnsAthiddenRowsAtmergedRangesonFirstRenderonImmediateScrollonScrollViewportonViewportChangeonViewportScrollonWheelScrolloverlaysoverlaysPropsrowCountscrollPointshowGridLinesshowHorizontalScrollbarshowVerticalScrollbarstagePropsstageWrappertouchElementviewportwidthzoom