Interface VirtualGridProps

Props accepted by VirtualGrid

interface VirtualGridProps {
    children: DisplayGridItem;
    className?: string;
    columnCount: number;
    columnOffsetMapping: ItemOffsetMapping;
    height: number;
    innerClassName?: string;
    innerRender?: VirtualContainerRender;
    itemData?: unknown;
    itemKey?: ((rowIndex: number, columnIndex: number, data: unknown) => Key);
    maxCssSize?: number;
    minNumPages?: number;
    onScroll?: ((rowOffset: number, columnOffset: number, newRowScrollState: ScrollState, newColumnScrollState: ScrollState) => void);
    outerRender?: VirtualContainerRender;
    rowCount: number;
    rowOffsetMapping: ItemOffsetMapping;
    useIsScrolling?: boolean;
    width: number;
}

Hierarchy (view full)

Properties

children className? columnCount columnOffsetMapping height innerClassName? innerRender? itemData? itemKey? maxCssSize? minNumPages? onScroll? outerRender? rowCount rowOffsetMapping useIsScrolling? width

Properties

children

children: DisplayGridItem

Component used as a template to render items in the grid. Must implement DisplayGridItem interface.

OptionalclassName

className?: string

The className applied to the outer container element. Use when styling the entire component.

columnCount

columnCount: number

Number of columns in the grid

columnOffsetMapping

columnOffsetMapping: ItemOffsetMapping

Implementation of ItemOffsetMapping interface that defines size and offset to each column in the grid

Use useFixedSizeItemOffsetMapping or useVariableSizeItemOffsetMapping to create implementations for common cases.

height

height: number

Component height

OptionalinnerClassName

innerClassName?: string

The className applied to the inner container element. Use for special cases when styling only the inner container and items.

OptionalinnerRender

innerRender?: VirtualContainerRender

Render prop implementing VirtualContainerRender. Used to customize DisplayGrid within VirtualGrid inner container.

OptionalitemData

itemData?: unknown

Passed as DisplayBaseItemProps.data to each child item

OptionalitemKey

itemKey?: ((rowIndex: number, columnIndex: number, data: unknown) => Key)

Function that defines the key to use for each item given row and column index and value of VirtualBaseProps.itemData.

Default Value

(rowIndex, columnIndex, _data) => `${rowIndex}:${columnIndex}`

OptionalmaxCssSize

maxCssSize?: number

Maximum size for CSS element beyond which layout breaks. You should never normally need to change this. The default value is compatible with all major browsers.

Default Value

6000000

OptionalminNumPages

minNumPages?: number

The minimum number of virtual pages to use when inner container would otherwise be more than VirtualScrollableProps.maxCssSize big. You should never normally need to change this.

Default Value

100

OptionalonScroll

onScroll?: ((rowOffset: number, columnOffset: number, newRowScrollState: ScrollState, newColumnScrollState: ScrollState) => void)

Callback after a scroll event has been processed and state updated but before rendering

Type declaration

    • (rowOffset, columnOffset, newRowScrollState, newColumnScrollState): void

    • Parameters

      • rowOffset: number

        Resulting overall row offset. Can be passed to ItemOffsetMapping to determine first row.

      • columnOffset: number

        Resulting overall column offset. Can be passed to ItemOffsetMapping to determine first column.

      • newRowScrollState: ScrollState

        New ScrollState for rows that will be used for rendering.

      • newColumnScrollState: ScrollState

        New ScrollState for columns that will be used for rendering.

      Returns void

OptionalouterRender

outerRender?: VirtualContainerRender

Render prop implementing VirtualContainerRender. Used to customize VirtualGrid outer container.

rowCount

rowCount: number

Number of rows in the grid

rowOffsetMapping

rowOffsetMapping: ItemOffsetMapping

Implementation of ItemOffsetMapping interface that defines size and offset to each row in the grid

Use useFixedSizeItemOffsetMapping or useVariableSizeItemOffsetMapping to create implementations for common cases.

OptionaluseIsScrolling

useIsScrolling?: boolean

Determines whether the component should track whether it's being actively scrolled and pass through when rendering its content.

Default Value

false

width

width: number

Component width

Settings

Member Visibility

On This Page

Properties