This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

EntityList

EntityList

The EntityList is used to represent lists of entities (entries and assets).

Table of contents

How to use EntityList

This component should be used in combination with the EntityList.Item component. Its main purpose is to be used to entries or assets when in a list context, for example, a multiple entry reference field. It differs from existing EntryCard/AssetCard components as its intended use is for lists of entities, not individual ones.

Code examples

With actions menu

With drag handle

Props

EntityList

NameRequiredDefaultTypeDescription
childrenReactNode
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdstringA [data-test-id] attribute used for testing purposes

EntityList.Item

NameRequiredDefaultTypeDescription
titlerequiredstringThe title of the entity
actionsReactNodeArrayMenu elements rendered as actions in Menu
cardDragHandleComponentReactNodeProp to pass a custom CardDragHandle component to for use in drag and drop contexts
cardDragHandlePropsPartial<DragHandleProps>Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)
contentTypestringThe content type of the entity
descriptionstringThe description of the entity
entityTypeentry"Entry" | "Asset" | "entry" | "asset" | "Release"An entity can either be an Entry, an Asset or a Release. This prop will apply styling based on if the entity is an asset, a release or an entry Note: 'entry' and 'asset' are @deprecated but supported in v1.x for backwards compatibility
hrefstringThe href for the component. Will render the card as an `a` element for native browser link handling
isActionsDisabledfalse
false
true
A boolean used to disable the CardActions
isDragActive
false
true
Applies styling for when the component is actively being dragged by the user
isLoading
false
true
Loading state for the component - when true will display loading feedback to the user
onClickMouseEventHandler<Element>The action to be performed on click of the EntryCard
statusEntityListItemStatusThe publish status of the entry
thumbnailAltTextstringThe alt text for the thumbnail
thumbnailUrlstringThe URL of the entity's preview thumbnail. Use 46px x 46px images for best results
withDragHandle
false
true
Renders a drag handle for the component for use in drag and drop contexts
withThumbnailtrue
false
true
A boolean used to render the Thumbnail or not
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-entity-list-itemstringA [data-test-id] attribute used for testing purposes