EntityList

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

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

<EntityList>
  <EntityList.Item
    title="Entry 1"
    description="Description"
    contentType="My content type"
    status="published"
  />
  <EntityList.Item
    title="Entry 2"
    description="Description"
    contentType="My content type"
    status="draft"
  />
  <EntityList.Item
    title="Entry 3"
    description="Description"
    contentType="My content type"
    status="archived"
  />
</EntityList>
<EntityList>
  <EntityList.Item
    title="Entry 1"
    description="Description"
    contentType="My content type"
    status="published"
  />
  <EntityList.Item
    title="Entry 2"
    description="Description"
    contentType="My content type"
    status="draft"
  />
  <EntityList.Item
    title="Entry 3"
    description="Description"
    contentType="My content type"
    status="archived"
  />
</EntityList>
Hide source

With actions menu

<EntityList>
  <EntityList.Item
    title="Entry title"
    description="Description"
    contentType="My content type"
    status="draft"
    entityType="entry"
    actions={[
      <MenuSectionTitle key="title">Actions</MenuSectionTitle>,
      <MenuItem key="edit">Edit</MenuItem>,
      <MenuItem key="download">Download</MenuItem>,
      <MenuItem key="remove">Remove</MenuItem>,
    ]}
  />
  <EntityList.Item
    title="Other entry title"
    description="Description"
    contentType="My content type"
    status="published"
    entityType="entry"
    actions={[
      <MenuSectionTitle key="title">Actions</MenuSectionTitle>,
      <MenuItem key="edit">Edit</MenuItem>,
      <MenuItem key="download">Download</MenuItem>,
      <MenuItem key="remove">Remove</MenuItem>,
    ]}
  />
</EntityList>
<EntityList>
  <EntityList.Item
    title="Entry title"
    description="Description"
    contentType="My content type"
    status="draft"
    entityType="entry"
    actions={[
      <MenuSectionTitle key="title">Actions</MenuSectionTitle>,
      <MenuItem key="edit">Edit</MenuItem>,
      <MenuItem key="download">Download</MenuItem>,
      <MenuItem key="remove">Remove</MenuItem>,
    ]}
  />
  <EntityList.Item
    title="Other entry title"
    description="Description"
    contentType="My content type"
    status="published"
    entityType="entry"
    actions={[
      <MenuSectionTitle key="title">Actions</MenuSectionTitle>,
      <MenuItem key="edit">Edit</MenuItem>,
      <MenuItem key="download">Download</MenuItem>,
      <MenuItem key="remove">Remove</MenuItem>,
    ]}
  />
</EntityList>
Hide source

With drag handle

<EntityList>
  <EntityList.Item
    title="Entry 1"
    description="Description"
    contentType="My content type"
    status="published"
    withDragHandle
  />
  <EntityList.Item
    title="Entry 2"
    description="Description"
    contentType="My content type"
    status="draft"
    withDragHandle
  />
</EntityList>
<EntityList>
  <EntityList.Item
    title="Entry 1"
    description="Description"
    contentType="My content type"
    status="published"
    withDragHandle
  />
  <EntityList.Item
    title="Entry 2"
    description="Description"
    contentType="My content type"
    status="draft"
    withDragHandle
  />
</EntityList>
Hide source

Props

EntityList

• Name

  children

  ReactNode
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  testId

  Description

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

  string

EntityList.Item

• Name

  title(required)

  Description

  The title of the entity

  string
• Name

  actions

  Description

  Menu elements rendered as actions in Menu

  ReactNodeArray
• Name

  cardDragHandleComponent

  Description

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

  string

  number

  false

  true

  {}

  ReactNodeArray

  ReactElement<any, string | JSXElementConstructor<any>>

  ReactPortal
• Name

  cardDragHandleProps

  Description

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

  Partial<DragHandleProps>
• Name

  className

  Description

  CSS class to be appended to the root element

  string
• Name

  contentType

  Description

  The content type of the entity

  string
• Name

  description

  Description

  The description of the entity

  string
• Name

  entityType

  Description

  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"

  "Asset"

  "entry"

  "asset"

  "Release"

  Default

  entry
• Name

  href

  Description

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

  string
• Name

  isActionsDisabled

  Description

  A boolean used to disable the CardActions

  false

  true

  Default

  false
• Name

  isDragActive

  Description

  Applies styling for when the component is actively being dragged by the user

  false

  true
• Name

  isLoading

  Description

  Loading state for the component - when true will display loading feedback to the user

  false

  true
• Name

  onClick

  Description

  The action to be performed on click of the EntryCard

  MouseEventHandler<Element>
• Name

  status

  Description

  The publish status of the entry

  "archived"

  "changed"

  "draft"

  "published"
• Name

  testId

  Description

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

  string

  Default

  cf-ui-entity-list-item
• Name

  thumbnailAltText

  Description

  The alt text for the thumbnail

  string
• Name

  thumbnailUrl

  Description

  The URL of the entity's preview thumbnail. Use 46px x 46px images for best results

  string
• Name

  withDragHandle

  Description

  Renders a drag handle for the component for use in drag and drop contexts

  false

  true
• Name

  withThumbnail

  Description

  A boolean used to render the Thumbnail or not

  false

  true

  Default

  true