Forma 36 - EntityList

Import

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

Examples

Basic


function BasicEntityListExample() {
  return (
    <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>
  );
}function BasicEntityListExample() {
  return (
    <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>
  );
}
Open in Playground


function EntityListWithActionsMenuExample() {
  return (
    <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>
  );
}function EntityListWithActionsMenuExample() {
  return (
    <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>
  );
}
Open in Playground

With drag handle


function EntityListWithDragHandleExample() {
  return (
    <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>
  );
}function EntityListWithDragHandleExample() {
  return (
    <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>
  );
}
Open in Playground

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" 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

EntityList

Import

Examples

Basic

With actions menu

With drag handle

Props (API reference)

EntityList

Name

Type

Default

EntityList.Item

Name

Type

Default

Help improve this page