Flows
UI steps
Display.grid

Grid

Displays data in a grid layout.

ctx.ui.display.grid(config);

Config

data*
T[]

An array of data to display in the grid.

render*
(data: T) => GridItem

A function that takes a row from the data array and returns a GridItem.

render: (item: T) => {
  title?: string;
  description?: string;
  image?: {
    // a URL to the image
    url?: string
    // the image alt tag
    alt?: string
    // the image aspect ratio, e.g. `1` or `16 / 9`, defaults to 16 / 9.
    aspectRatio?: number
    // whether the image should be resized to fill its container or
    // be cropped to fit, defaults to 'cover'.
    fit?: 'cover' | 'contain'
  }
}

Usage

await ctx.ui.page({
  title: "Product catalogue",
  content: [
    ctx.ui.display.grid({
      data: [
        {
          name: "Industrial Pump Motor",
          description:
            "High-efficiency 3-phase motor suitable for heavy-duty pumping applications. IP65 rated for outdoor installation.",
          image: "https://picsum.photos/id/287/300/600",
          sku: "PUMP-MTR-001",
        },
        {
          name: "Control Panel Assembly",
          description:
            "Pre-wired control panel with PLC mounting, circuit breakers, and terminal blocks. DIN rail compatible.",
          image: "https://picsum.photos/id/26/300/600",
          sku: "CTRL-PNL-042",
        },
        {
          name: "Stainless Steel Valve",
          description:
            "Food-grade 316L stainless steel ball valve. Suitable for high-temperature and corrosive environments.",
          image: "https://picsum.photos/id/134/300/600",
          sku: "VLV-SS-316",
        },
        {
          name: "Pressure Sensor Kit",
          description:
            "Digital pressure transducer with 4-20mA output. Includes mounting hardware and calibration certificate.",
          image: "https://picsum.photos/id/41/300/600",
          sku: "SENS-PRS-100",
        },
      ],
      render: (row) => ({
        title: row.name,
        description: row.description,
        image: {
          url: row.image,
        },
      }),
    }),
  ],
});
Display.fileDisplay.header