Back to Schema Browser

Data

Data-aware container. Same layout as Container — one DOM element, no extra wrapper — but repeats its children per item from a connector (Stripe products, customer orders, nested item arrays). Children act as a template with {{item.*}} variables.

Required Props: dataSourceSupports Children: any

Structure

Outer element is the repeat boundary — its className controls layout of the item cards. Inside, reference {{item.title}} / {{item.price.formatted}} / etc. in children. Nested Data (scope) reads from the enclosing item context. Connector bindings attach data-ph-connector-* attrs so app hooks can page/empty-state the list.

Properties

PropertyTypeDescriptionExamples
typestring
| container | section | header | footer | nav | aside | main | form | component
Semantic/layout role (drives HTML tag). Same enum as Container.
Default: "container"
-
dataSource*requiredobject
Binds this node to an external data source. The renderer resolves items from the registered connector (SSR) or the client data fetcher (visitor-driven URL changes), then repeats children once per item.
-
livePreviewboolean
Editor-only: show read-only clones of remaining items beside the editable first item. Default true.
Default: true
-
classNamestring
Tailwind utility classes. Same semantics as Container.className. The classes apply to the outer repeater element, not the per-item children.
grid grid-cols-1 md:grid-cols-3 gap-space-md w-fullflex flex-col gap-space-sm
handlersobject
Custom JS event handlers — same shape as Container.handlers.
-
rootobject
-
-

Examples

Stripe Product Grid

3-column responsive grid that repeats per Stripe product.

{
  "className": "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-space-md w-full",
  "dataSource": {
    "provider": "stripe",
    "collection": "products",
    "filter": {
      "demo": "true"
    },
    "limit": 12,
    "refetchOnUrlChange": true,
    "bindingKey": "featured"
  }
}

Customer Orders Table

Stacked order rows for the logged-in site customer.

{
  "className": "flex flex-col gap-space-xs w-full",
  "dataSource": {
    "provider": "customer",
    "collection": "orders"
  }
}

Nested Product Image Gallery

Inside a product card — repeats each image off the parent item.

{
  "className": "grid grid-cols-4 gap-space-xs",
  "dataSource": {
    "scope": "item.images"
  }
}

Size Chips From Comma String

Split item.metadata.sizes (e.g. 'S,M,L,XL') into repeated chips.

{
  "className": "flex flex-row flex-wrap gap-space-xs",
  "dataSource": {
    "scope": "item.metadata.sizes",
    "splitBy": ","
  }
}