Entity List

Installation

import { EntityList } from "@o/pipeline/experimental/blocks/entity-list";

Usage

Interactivity

By default, EntityList renders a static list.

To make a row interactive, wrap the title in a BreakoutButton or BreakoutLink. EntityList will automatically apply the appropriate styles.

To give a row a right-click menu, pass its ContextMenu.Items as the item’s contextMenu. The menu also opens on a touch long-press, and the row keeps its hover tint while the menu is open.

Use inset="compact" to reduce horizontal row padding when a framed list sits alongside more compact content. Row height and interactions stay the same.

Examples

Deal list

Company list

People list

Feedback list

Truncated metadata

  • ADAutodeskHead of Revenue Operations and Strategic Partnerships, EMEA & APAC
  • SONYSonyHead of Revenue Operations and Strategic Partnerships, EMEA & APAC
  • SUNSunHead of Revenue Operations and Strategic Partnerships, EMEA & APAC
  • XEROXXeroxHead of Revenue Operations and Strategic Partnerships, EMEA & APAC

Chat list

Context menu

Right-click a row, or long-press it on touch.

Stacked text

Use layout="stacked" for longer titles and descriptions. It keeps the same icon column, padding, and interactions as the default inline layout, while letting text wrap and placing descriptions below titles.

  • Finish the security review before committing to the rollout date.
  • Updated the expected close dateOctober 15 → October 30

Loading

A list still loading is the list itself in a SkeletonGroup, with a Skeleton for each row’s title and label that isn’t known yet, so the rows keep their place when the records arrive. See Skeleton.