Concorde functional component — List. sonic-list renders one row per entry of its props array, either set directly or loaded with fetch. In TypeScript, prefer the .items row renderer (with .separator · .noItems · .skeleton); <template> ch Doc ID: core/components/functional/list/list. Keywords: Concorde, supersoniks, core/components/functional/list/list, list, List, functional component, sonic-list, web component, props, fetch, .items, .separator, .noItems, .skeleton, , /list-item/. URL: https://concorde.supersoniks.org/core/components/functional/list.

List

sonic-list renders one row per entry of its props array, either set directly or loaded with fetch. In TypeScript, prefer the .items row renderer (with .separator · .noItems · .skeleton); <template> children are for plain HTML hosts without Lit. Each row gets its own data provider at <dataProvider>/list-item/<index>.

Basic example

Add fetch to load props from serviceURL + endPoint (or dataProvider when endPoint is empty). key picks the array inside the response. Without fetch, the list only renders the props it receives.

<sonic-list fetch serviceURL="/docs-mock-api" dataProvider="flights?direction=arrivals" key="flights" class="grid gap-1">
      <template>
        <div class="text-sm" data-bind ::inner-html="<b>$time</b> $code from $city ($airport)"></div>

This example uses HTML templates; from Lit, use the row renderer instead. Fetch attributes (lazyload · refetchEveryMs · headers · authentication) are shared with Fetch.

Row renderer

From a Lit component, set .items to a function (item, metadata) => TemplateResult. Functions only pass as properties, so always use the . binding: the same applies to .separator · .noItems · .skeleton. metadata holds key · even · odd · firstChild · lastChild · onlyChild.

Row variants

In HTML, templateKey (default template) names the row field that selects a <template data-value="…">. Rows without a match cycle through the <template> children that have no data-value. From Lit, branch inside the items callback instead.

<sonic-list fetch serviceURL="/docs-mock-api" dataProvider="flights?direction=departures" key="flights" templateKey="status" class="grid gap-1">
      <template>
        <div class="text-sm" data-bind ::inner-html="$code to $city"></div>

Separator and empty list

.separator renders between rows (not after the last one). .noItems renders when the array is empty. In HTML, use <template data-value="separator"> and <template data-value="no-item">.

Limit and offset

limit caps the number of rendered rows and offset skips the first ones, without changing the data. With no limit, every row is rendered.

<sonic-list fetch serviceURL="/docs-mock-api" dataProvider="flights?direction=departures" key="flights" limit="3" class="grid gap-1">
      <template>
        <div class="text-sm" data-bind ::inner-html="<b>$time</b> $code to $city"></div>

Objects and extractValues

When the data is an object, the list wraps it in a one-row array. Add extractValues to render one row per property instead, as { key, value }.

Loading state

With no loader, nothing is shown while fetching. Set loader (fixed) or loader="inline" to show a Loader, or provide .skeleton / <template skeleton> to render placeholder rows; a skeleton replaces the loader. Call invalidate() on the list publisher to fetch again.

<sonic-list fetch loader="inline" serviceURL="/docs-mock-api" dataProvider="flights?direction=arrivals&status=landed" key="flights" class="grid gap-1">
      <template>
        <div class="text-sm" data-bind ::inner-html="$code from $city: landed"></div>

API reference

Properties (TypeScript / Lit, preferred):

Templates (plain HTML hosts):