Interface DisplayGridProps

Props accepted by DisplayGrid

interface DisplayGridProps {
    children: DisplayGridItem;
    className?: string;
    columnCount: number;
    columnOffset: number;
    columnOffsetMapping: ItemOffsetMapping;
    height: number;
    innerClassName?: string;
    innerRender?: VirtualContainerRender;
    isScrolling?: boolean;
    itemData?: unknown;
    itemKey?: ((rowIndex: number, columnIndex: number, data: unknown) => Key);
    outerRender?: VirtualContainerRender;
    rowCount: number;
    rowOffset: number;
    rowOffsetMapping: ItemOffsetMapping;
    width: number;
}

Hierarchy (view full)

Properties

children className? columnCount columnOffset columnOffsetMapping height innerClassName? innerRender? isScrolling? itemData? itemKey? outerRender? rowCount rowOffset rowOffsetMapping width

Properties

children

children: DisplayGridItem

Component used as a template to render items in the list. 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

columnOffset

columnOffset: number

Horizontal offset to start of displayed content

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

Renders the inner grid div containing all the list items

Render prop implementing VirtualContainerRender. Used to customize display component inner container.

OptionalisScrolling

isScrolling?: boolean

Passed as DisplayBaseItemProps.isScrolling to each child item

Provided as a convenience when combining display components with VirtualScroll Not interpreted by the display component itself

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 DisplayBaseProps.itemData.

Default Value

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

OptionalouterRender

outerRender?: VirtualContainerRender

Renders the outer viewport div which provides a window onto the inner grid div

Render prop implementing VirtualContainerRender. Used to customize display component outer container.

rowCount

rowCount: number

Number of rows in the grid

rowOffset

rowOffset: number

Vertical offset to start of displayed content

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.

width

width: number

Component width

Settings

Member Visibility

On This Page

Properties