Grid

How to get Grid

import { Grid } from 'fds/components';

Type: Component

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

# Name Type Description
1. items Array<ItemWithId>
  ItemWithId

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

Name Type Description
id String | Number

The unique identifier of the item, used to distinguish items from each other, eg. when determining the selected item. The value of this identifier should always be unique within a set of items.

2. [itemSize] String

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

  • 'xs'

  • 's'

  • 'm'

  • 'l'

  Default value
"m"
3. [maxColumns] Number

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


  Default value
null
4. [onItemClick] Function

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


  Arguments
# Name Type Description
1. item Object

The clicked item.

5. [onItemDoubleClick] Function

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


  Arguments
# Name Type Description
1. item Object

The double clicked item.

6. [paddingSize] 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
"m"
7. renderItem Function

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


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
isSelected Boolean

Whether or not the component should be rendered in a selected state.

item 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.

  Members

Members

Name Type Description
id String | Number

The unique identifier of the item, used to distinguish items from each other, eg. when determining the selected item. The value of this identifier should always be unique within a set of items.

itemSize String

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

  • 'xs'

  • 's'

  • 'm'

  • 'l'

key *

A identifier used by React to distinguish items rendered from an iterator function. Should be set as the "key" property on a component instance. This should preferably be a unique key (like an "id" coming from a backend/CMS). When items are being reordered, React uses this key property to determine which items should be rerendered.

onClick Function

A callback that is called whenever the component is clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
onDoubleClick Function

A callback that is called whenever the component is double clicked and is not in a disabled state.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
8. [selectedItem] 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
null
9. [spaceSize] 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
0

Related links

Was this page helpful?