Skip to content

Data List

The Data List widget shows a list of records one under the other, as rows or small cards, instead of in columns. Use it where a table would feel heavy: a list of recent documents, a feed of notifications, or a row of customer cards that each show a name, a status badge and a button.

See also Data Table for data in columns, Custom Table for hand-built tables, and Section for a single card.

Using it

Drop a Data List onto the page, set Source to Data Source, and point Data source at the records, for example {$data.documents}. Then pick an Item type. For a plain line per record, choose Text and write a template such as {$record.name}. For a card with several widgets per record, choose Element, build the card once, and the list repeats it for every record.

To let visitors pick an item, turn on Selection and set a Selection path such as $vars.selectedDocument. Other widgets can then read the selected item from that path. See Page and Portal State.

Options

Option Values Default Description
Source Key-Values · Data Source Key-Values Whether you type the items by hand or take them from data
Items A list of entries Three items Used in Key-Values mode. Each entry has a key and a label. Add more with Add Item
Data source An expression, for example {$data.items} — Used in Data Source mode: the records to show. Transformation steps can filter, sort and reshape them first
Empty text Any text No items to display Shown when there is nothing to list
Item type Text · Expression · HTML · Element Text How each record is drawn. Element repeats a group of widgets you build once
Text template / Expression / HTML template Template — The content of each item, for the matching Item type
Selection Enable, Mode (Single · Multiple), Selection path, Key fields Off Stores the clicked items in a state path, for example $vars.selectedRows. Only the Key fields of each item are stored (by default id), not the whole record
Scroll selection into view On · Off Off Scrolls the list so the selected item is visible
Select mode On · Off Off Selection without keyboard cursor navigation
Select on tab On · Off Off The Tab key selects the item under the cursor
Variant Theme variants Default Picks the widget's look from the theme. See Variants
Custom Style CSS for List, Items, Cursor The list fills its box and scrolls Extra styling per part
Box Style Sizing and spacing — The box around the list

Tips

A few things to keep in mind:

  • $record is the current item in every template and expression.
  • Choose the Element item type when each row is a small card made of several widgets.
  • Scroll selection into view, Select mode and Select on tab are under Advanced.