Concorde functional component — List. > Try offline: serviceURL="/docs-mock-api" and dataProvider="api/users" with key="data" — see Local API demos. Recommended patterns: Data flow. Doc ID: core/components/functional/list/list. Keywords: Concorde, supersoniks, core/components/functional/list/list, list, List, functional component, sonic-list, web component, serviceURL="/docs-mock-api", dataProvider="api/users", key="data", props, dataProvider, fetch, serviceURL, key, items. URL: https://concorde.supersoniks.org/crawl/core/components/functional/list/list.html.

List

Try offline: serviceURL="/docs-mock-api" and dataProvider="api/users" with key="data" — see Local API demos. Recommended patterns: Data flow.

The sonic-list component renders one row per entry in props (array from fetch or set on the element).

List extends Subscriber and Fetcher:

• Subscriber — props + dataProvider
• Fetcher — optional fetch + serviceURL / key (see Fetch)

Row renderer (items) — recommended

From a Lit parent, pass a function on the items property (ListItems). Each row is wrapped in a sonic-subscriber with dataProvider="…/list-item/n" (hover rows with debug).

private items = ({ first_name, last_name, email, avatar }) => html`
  <sonic-image src=${avatar} …></sonic-image>
  <div>${first_name} <b>${last_name}</b></div>
  <div>${email}</div>
`;

html`<sonic-list
  fetch
  dataProvider="api/users"
  key="data"
  serviceURL="/docs-mock-api"
  .items=${this.items}
></sonic-list>`;

Use .items=${fn} (property binding): Lit passes functions only as properties, not as HTML attributes — @property({ type: Function }) does not change that. Same for .noItems, .separator, .skeleton. The callback receives each row object (replacing data-bind / <sonic-value> in a <template>).

Live demo + TypeScript source (one file, no Markdown copy):

Implementation: src/docs/example/docs-users-list.ts — row markup in the items callback (item.first_name, …), same idea as replacing data-bind / <sonic-value> in a <template>.

Alternating row layouts

Use metadata (even, odd, firstChild, …) or fields on each item (e.g. tpl with templateKey):

Separator and empty list

Fetch + extractValues

HTML <template> children (integration without Lit)

For plain HTML hosts, you can still declare <template> children (and data-value for templateKey, separator, no-item). That path is for HTML integration — not used in Concorde doc live demos.

Each list row still gets dataProvider="[list]/list-item/[index]".

Additionnal tips

• If the request returns an object, it is wrapped in an array (unless extractValues is set).
• Call invalidate() on the list publisher to reload fetch data.
• Each row publisher exposes _parent_ pointing at the list publisher.