VirtualGrid

Type: React component

A VirtualList, specifically made for rendering rows of GridItem components. Only renders the rows that are visible within the "viewport" of the grid. This behavior drastically increases the performance of a grid with a lot of items (with high render costs). Optionally a "virtualBufferFactor" prop can be set to increase the amount of items being rendered off-screen.

Additionally, VirtualGrid supports scrolling items into view. By changing the "selectedItems" prop, VirtualGrid will scroll the last item from this array into view.

VirtualGrid renders a container that is stretched to the maximum available height using flexbox. Make sure the parent of VirtualGrid is a Flex component or is using the flex styling mixin.

Props

  1. estimatedRowHeight

    (Required)

    Type: Number

    An estimation of the average height of a row of GridItem components returned from "renderItem". VirtualGrid will use this to determine the height of the vertical scrollbar. When a row is measured, VirtualGrid will use the measured height instead of the estimated height.

  2. itemKeyToUseAsId

    (Optional)

    Default value

  3. items

    (Required)

    Type: Array<FDS~ItemWithId>

  4. itemSize

    (Optional)

    Type: String

    The size in which the GridItem components should render. The possible values are:

    • 'xs'

    • 's'

    • 'm'

    • 'l'

    Default value

  5. onItemClick

    (Optional)

    Default value

  6. onItemDoubleClick

    Default value

  7. paddingSize

    (Optional)

    Default value

  8. renderItem

    (Required)

    Type: Function

    A callback that is called for each item in the items array which renders the item.

    Arguments

    Returns

  9. selectedItems

    (Required)

    Type: Array<FDS~SelectedItem>

    Default value

  10. spaceSize

    (Optional)

    Default value

  11. virtualBufferFactor

    (Optional)

    Default value

  12. onResize

    (Required)

    Default value