EntityList

The EntityList is used to represent lists of entities (entries and assets). 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.

Import

import { EntityList } from '@contentful/f36-components';
// or
import { EntityList } from '@contentful/f36-entity-list';

Examples

Basic

With actions menu

With drag handle

Props (API reference)

Open in Storybook

EntityList

Name

Type

Default

children
ReactNode

className
string

CSS class to be appended to the root element

testId
string

A [data-test-id] attribute used for testing purposes

EntityList.Item

Name

Type

Default

title
required
string

The title of the entity

actions
ReactNodeArray

Menu elements rendered as actions in Menu

cardDragHandleComponent
string
number
false
true
{}
ReactNodeArray
ReactElement<any, string | JSXElementConstructor<any>>
ReactPortal

Prop to pass a custom CardDragHandle component to for use in drag and drop contexts

cardDragHandleProps
Partial<DragHandleProps<"div">>

Props to pass down to the default CardDragHandle component (does not work with cardDragHandleComponent prop)

className
string

CSS class to be appended to the root element

contentType
string

The content type of the entity

description
string

The description of the entity

entityType
"Entry"
"Asset"
"entry"
"asset"
"Release"
"Page"

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

entry
href
string

The href for the component. Will render the card as an `a` element for native browser link handling

isActionsDisabled
false
true

A boolean used to disable the CardActions

false
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

onClick
MouseEventHandler<Element>

The action to be performed on click of the EntryCard

status
"archived"
"changed"
"draft"
"published"

The publish status of the entry

testId
string

A [data-test-id] attribute used for testing purposes

cf-ui-entity-list-item
thumbnailAltText
string

The alt text for the thumbnail

thumbnailUrl
string

The 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

withThumbnail
false
true

A boolean used to render the Thumbnail or not

true