Grid

Type: React component

How to get Grid?

JavaScript

import { Grid } from 'fds/components';

A type of list that renders uniformly sized items horizontally, starts wrapping when exceeding the horizontally available space. This component should render GridItem components.

When a large amount of GridItem components are being rendered and render times and/or scrolling performance is poor, consider implementing a VirtualGrid instead.

Props

  1. items

    (Required)

    Type: Object

    An item with an identifier property, used to distinguish items from each other.

    In some cases, the key of the "id" property is configurable using a "itemKeyToUseAsId" prop.

    Properties

  2. itemSize

    (Optional)

    Type: String

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

    • 'xs'

    • 's'

    • 'm'

    • 'l'

    Default value

  3. maxColumns

    (Optional)

    Type: Number

    The maximum amount of columns with GridItem components before the list starts wrapping horizontally.

    Default value

  4. onItemClick

    (Optional)

    Type: Function

    A callback that is called whenever a rendered item is clicked and is not in a disabled state.

    Arguments

    Default value

  5. onItemDoubleClick

    (Optional)

    Type: Function

    A callback that is called whenever a rendered item is double clicked and is not in a disabled state.

    Arguments

    Default value

  6. paddingSize

    (Optional)

    Type: Number | String | Object

    The amount of padding rendered by the component.

    This should be a either, A single size value, one of the following values:

    • 0 (zero, no padding at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large) to set the paddingSize for the top, right, bottom and left side to a single shared value.

    Or you can pass an object whose properties determine a specific padding size for either:

    • 'horizontal': %single size value% to set the 'left' and 'right' padding to the given size value (one of the values listed above)

    • 'vertical': %single size value% to set the 'top' and 'bottom' padding

    Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

    Default value

  7. renderItem

    (Required)

    Type: Function

    A callback that is called for each item in the items array, which should return an instance of GridItem.

    Arguments

  8. selectedItem

    (Optional)

    Type: Object

    The item that is visually presented in a selected state. Expects an item in the same shape as expected by the "items" property.

    Default value

  9. spaceSize

    (Optional)

    Type: Number | String

    The amount of space (or margin) between the children of the component. Depending on the flexDirection value, either horizontal or vertical space is created.

    This should be one of the following values:

    • 0 (zero, no margin at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large)

    Default value