Results board

A table whose rows come from the data: five results today, eight tomorrow, each row with a name, a number and a bar — and numbers that count up.

The same pattern draws any table: standings, a leaderboard, a schedule.

1. One row, as its own artboard

1. In the Data panel, add a view model for one result — call it Result — with name (String), votes (Number) and share (Number, 0 to 1).
2. Draw a new artboard the size of one row. In its inspector, set its View model to Result.
3. Design the row: a text bound to name, a text bound to votes, and a bar whose width is bound to share through a Map a range converter — 0–1 in, 0 to the bar's full width in pixels out.
4. Set the bar's Origin X to 0 in its path section, so it grows from its left end rather than from its middle. See Transform and origin.

2. The list, on the main artboard

1. On the main artboard's view model, add a List property — results — and choose Result as its item view model.
2. Add a layout set to Flex, direction Column, where the table should be.
3. Select it and press Artboard list in its inspector. The list goes inside the layout.
4. Bind the list's Items to results. Row artboard reads Automatic (Result row): the row artboard it found.
5. Under Row size, press Use the size of Result row. Every row is drawn at the list's row size, which starts at 200 × 60; the panel says when that cuts the rows off, and the button makes it the row artboard's size — here 1100 × 84.

Add a few items to results in the Data panel, and the rows appear, stacked by the layout. Each shows its own item's values.

3. Numbers that look right

Run the numbers through converters:

• votes → Number to text with 1,000 on: 12,500.
• share → Calculate × 100 → Number to text with one decimal: 42.7, with a % after it in the text.
• For a count up when new results arrive, put Ease changes (smooth counter) first, with a Duration of about a second.

4. Let it grow

Try the worst case: the longest name, ten rows. If the table must fit a fixed height, give the row artboard a smaller size or the layout a smaller gap — the rows follow.

See also

• Artboard list · Layout
• Ticker from a list
• Converters