Display data inside a row#

This example demonstrates how to use the List component to present structured data using custom row layouts. Each row displays a person's name and phone number in a clean and readable format, using stack-based layout components inspired by SwiftUI.

Overview#

You will learn how to:

• Define a custom row component (PersonRowView)
• Use List to display a collection of items
• Apply text styling and system icons
• Structure layouts using VStack and HStack

Example Code#

1. Import Dependencies and Define Data#

1import { HStack, Label, List, Navigation, NavigationStack, Script, Text, VStack } from "scripting"
2
3type Person = {
4  name: string
5  phoneNumber: string
6}

2. Create a Row Component#

The PersonRowView component renders the content of a single list row. It uses a vertical stack to separate the name and phone number, with appropriate font styles and colors.

1function PersonRowView({
2  person
3}: {
4  person: Person
5}) {
6  return <VStack
7    alignment={"leading"}
8    spacing={3}
9  >
10    <Text
11      foregroundStyle={"label"}
12      font={"headline"}
13    >{person.name}</Text>
14    <HStack
15      spacing={3}
16      foregroundStyle={"secondaryLabel"}
17      font={"subheadline"}
18    >
19      <Label
20        title={person.phoneNumber}
21        systemImage={"phone"}
22      />
23    </HStack>
24  </VStack>
25}

3. Display the List in a Navigation Stack#

Use NavigationStack and List to display all rows. The navigation title is set to describe the purpose of the view.

1function Example() {
2  const staff: Person[] = [
3    {
4      name: "Juan Chavez",
5      phoneNumber: "(408) 555-4301",
6    },
7    {
8      name: "Mei Chen",
9      phoneNumber: "(919) 555-2481"
10    }
11  ]
12
13  return <NavigationStack>
14    <List
15      navigationTitle={"Display data inside a row"}
16      navigationBarTitleDisplayMode={"inline"}
17    >
18      {staff.map(person =>
19        <PersonRowView
20          person={person}
21        />
22      )}
23    </List>
24  </NavigationStack>
25}

4. Present the View#

Use Navigation.present to show the view, then exit the script after dismissal:

1async function run() {
2  await Navigation.present({
3    element: <Example />
4  })
5
6  Script.exit()
7}
8
9run()

Summary#

This pattern shows how to display data inside a row by:

• Structuring UI with layout components (VStack, HStack)
• Defining reusable, typed row components
• Presenting data collections cleanly using List
• Integrating icons and labels for better visual clarity

It is ideal for rendering lists of structured objects such as contacts, messages, or any custom data rows.