Forge docs

Appearance

io.display.grid ​

Represents a display.grid component.

Usage ​

ts
await io.display.grid("Team Directory", {
  data: [
    {
      label: "Infra 💻",
      description: "Infrastructure team responsible for platform infra",
      imageUrl:
        "https://i.pinimg.com/736x/0f/32/36/0f323612ce814629c56059bb73d7a908.jpg",
    },
    {
      label: "Marketing",
      description: "Marketing Org",
      imageUrl:
        "https://thumbs.dreamstime.com/b/painter-emoticon-14864133.jpg",
    },
    {
      label: "UX",
      description: "UI/UX Org",
      imageUrl:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3cnWV4EI16nCUguZFgFJWyLkI6ewagvK8Ow&s",
    },
  ],
  renderItem: row => ({
    label: row.label,
    description: row.description,
    image: {
      url: row.imageUrl,
      aspectRatio: 1,
    },
  }),
})
python
 def render_item(row):
    return {
        "label": row["label"],
        "description": row["description"],
        "image": {
            "url": row["imageUrl"],
            "aspect_ratio": 1,
        },
    }

value = await io.display.grid(
    "Team Directory",
    data=[
        {
            "label": "Infra 💻",
            "description": "Infrastructure team responsible for platform infra",
            "imageUrl": "https://i.pinimg.com/736x/0f/32/36/0f323612ce814629c56059bb73d7a908.jpg",
        },
        {
            "label": "Marketing",
            "description": "Marketing Org",
            "imageUrl": "https://thumbs.dreamstime.com/b/painter-emoticon-14864133.jpg",
        },
        {
            "label": "UX",
            "description": "UI/UX Org",
            "imageUrl": "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT3cnWV4EI16nCUguZFgFJWyLkI6ewagvK8Ow&s",
        },
    ],
    render_item=render_item,
)

example of Forge app with display.grid component