> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nextedy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Render Property

> The `render` property in a Nextedy POWERSHEET column configuration provides custom HTML rendering for cell content.

export const LastReviewed = ({date}) => {
  if (!date) return null;
  const formatted = new Date(`${date}T00:00:00Z`).toLocaleDateString("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    timeZone: "UTC"
  });
  return <p className="mt-10 text-sm text-gray-400 dark:text-zinc-500 not-prose">
      Last reviewed on {formatted}
    </p>;
};

## Property Definition

| Property               | Type   | Default | Description                                                                                                              |
| ---------------------- | ------ | ------- | ------------------------------------------------------------------------------------------------------------------------ |
| `columns.<key>.render` | string | None    | JavaScript arrow function string returning HTML, or a predefined renderer name. Evaluated at render time in the browser. |

## Render Types

| Type                | Syntax                                  | Description                                               |
| ------------------- | --------------------------------------- | --------------------------------------------------------- |
| Inline function     | `render: > () => ...`                   | JavaScript arrow function returning HTML template literal |
| YAML anchor         | `render: *displayItemAsIconIDTitleLink` | Reference to a reusable YAML anchor                       |
| Predefined renderer | `render: myCustomRenderer`              | Reference to a renderer name defined in configuration     |

## Render Resolution Flow

<Frame>
  <img src="https://mintcdn.com/none-17b4493f/-WiVljKlDztH36bB/powersheet/diagrams/reference/sheet-config/render-property/diagram-1.svg?fit=max&auto=format&n=-WiVljKlDztH36bB&q=85&s=e8d10f1b6df27a306477c7e9f3ecd12d" alt="diagram" style={{ width: "520px", maxWidth: "100%" }} width="520" height="170" data-path="powersheet/diagrams/reference/sheet-config/render-property/diagram-1.svg" />
</Frame>

## Context Object

The JavaScript function has access to a `context` object for building dynamic HTML:

| Variable                                  | Description                                                                   |
| ----------------------------------------- | ----------------------------------------------------------------------------- |
| `context.value`                           | The current cell value                                                        |
| `context.item`                            | The current row item with entity properties (`projectId`, `id`, `entityType`) |
| `context.item.entityType.custom.iconPath` | Icon path from entity type metadata                                           |
| `context.item.projectId`                  | Polarion project ID of the current item                                       |
| `context.item.id`                         | Work item ID of the current item                                              |
| `context.polarionModel.polarionBaseUrl`   | Base URL of the Polarion server                                               |

## Inline Function Render

```yaml theme={null}
columns:
  title:
    title: Title
    render: >
      () => `<strong>${context.value}</strong>`
```

## Render with Icon and Link

Using a YAML anchor for reuse across columns:

```yaml theme={null}
snippets:
  displayItemAsIconIDTitleLink: &displayItemAsIconIDTitleLink >
    () =>
      `<img src='${context.item.entityType.custom.iconPath}'><a
        target="_blank"
        href="/powersheet/polarion/#/project/${context.item.projectId}/workitem?id=${context.item.id}">${context.value}</a>`

columns:
  systemRequirements.systemRequirement:
    title: System Requirement
    render: *displayItemAsIconIDTitleLink
```

## Predefined Renderer Reference

Renderers can be defined in the configuration and referenced by name:

```yaml theme={null}
renderers:
  myCustomRenderer: "() => `<strong>${context.value}</strong>`"

columns:
  status:
    render: myCustomRenderer
```

<Info title="Verify in application">
  The exact `renderers` section configuration and available predefined renderer names may vary. Verify the supported renderer names in your Powersheet version.
</Info>

## Render vs Display

| Aspect              | `display`                                            | `render`                              |
| ------------------- | ---------------------------------------------------- | ------------------------------------- |
| Primary purpose     | Select which property of a referenced entity to show | Full custom HTML rendering            |
| Property name input | `title`, `id`, `titleOrName`                         | Not supported (function or name only) |
| JS function input   | Supported                                            | Supported                             |
| Predefined names    | Not supported                                        | Supported via `renderers` section     |
| Typical use         | Navigation columns needing property selection        | Any column needing custom HTML        |

<Tip title="When to Use render">
  Use `render` when you need full control over cell HTML. Use `display` when you simply need to select which property of a navigation target to show. When both are needed on the same column, `display` handles property selection while `render` handles visual formatting.
</Tip>

## Complete YAML Example

```yaml theme={null}
snippets:
  displayItemAsIconLink: &displayItemAsIconLink >
    () =>
      `<img src='${context.item.entityType.custom.iconPath}'><a
        target="_blank"
        href="/powersheet/polarion/#/project/${context.item.projectId}/workitem?id=${context.item.id}">${context.value}</a>`

columns:
  outlineNumber:
    title: "#"
    width: 80
    formatter: readonly
  title:
    title: User Need
    width: 200
    hasFocus: true
    render: *displayItemAsIconLink
  systemRequirements.systemRequirement.title:
    title: System Requirement
    width: 180
    render: *displayItemAsIconLink
    columnGroup: sysReq
  systemRequirements.systemRequirement.severity:
    title: Severity
    width: 100
    columnGroup: sysReq

columnGroups:
  sysReq:
    groupName: System Requirements
    groupStyle: darkblue
    headerStyle: blue
    collapseTo: systemRequirements.systemRequirement.title

formatters:
  readonly:
    - expression: 'true'
      style: readOnlyStyle

styles:
  readOnlyStyle:
    backgroundColor: 'grey100'

sources:
  - id: main
    model: rtm
    query:
      from: UserNeed
      where: "type = 'UserNeed'"
    expand:
      - name: systemRequirements
        title: System Requirements
```

## Related Pages

* [Display Property](/powersheet/reference/sheet-config/display-property) -- property selection for navigation columns
* [Columns](/powersheet/reference/sheet-config/columns) -- full column property reference
* [Binding Syntax](/powersheet/reference/sheet-config/binding-syntax) -- column binding path patterns
* [Server Rendering](/powersheet/reference/server-rendering/index) -- server-side rendering reference

***

<LastReviewed date="2026-07-02" />