List

Displays a list of items with optional titles, descriptions, and images. This is useful for summarizing objects, search results, or previews in a structured format.

ctx.ui.display.list({ data, render });

Config

An array of data items to display. Each item will be passed to the render function.

A function that receives each data item and returns a display configuration for the list item.

List item properties

Each object returned from render can include the following fields:

Optional title to display for the item.

Optional description text for the item.

Optional image to display alongside the item. fit controls how the image is resized within its container.

Usage

Lists are useful for visualizing collections of structured data, such as search results, product listings, or summaries.

ctx.ui.page({
  title: "Order items",
  content: [
    ctx.ui.display.list({
      data: [
        {
          sku: "PUMP-MTR-001",
          name: "Industrial Pump Motor",
          quantity: 2,
          img: "/pump-motor.png",
        },
        {
          sku: "VLV-SS-316",
          name: "Stainless Steel Valve",
          quantity: 5,
          img: "/valve.png",
        },
      ],
      render: (item) => ({
        title: `${item.sku} - ${item.name}`,
        description: `Quantity: ${item.quantity}`,
        image: { url: item.img, alt: item.name, fit: "contain" },
      }),
    }),
  ],
});