> ## 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. # Use JavaScript Display Functions > Customize how cell values appear in Nextedy POWERSHEET columns by writing JavaScript arrow functions in the `render`, `display`, and `renderers` configuration properties. 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

Last reviewed on {formatted}

; }; JavaScript display functions are an advanced customization technique. Before using them, ensure you are comfortable with [adding columns](/powersheet/guides/sheet-configuration/add-column) and [configuring formatters](/powersheet/guides/sheet-configuration/configure-formatter). ## Understand render vs display vs renderers Powersheet offers three properties for controlling cell output. Each serves a distinct purpose: | Property | Location | Purpose | Modifies data? | | ----------- | ------------------ | ---------------------------------------------------------------------------------------- | -------------- | | `display` | Column definition | Select which property of a linked entity to show, or use a JS function for custom output | No | | `render` | Column definition | Reference a named renderer or inline JS expression for custom HTML | No | | `renderers` | Root-level section | Define reusable named renderer functions | No | Neither `render` nor `display` modify the underlying data. If you need a calculated value that is saved back to the data source, use the `formula` property instead. See [Configure Dynamic Expressions](/powersheet/guides/sheet-configuration/configure-dynamic-expressions) for details on `formula`. diagram ## Use display for property selection The simplest use of `display` is selecting which property of a linked entity to show. For scalar navigation properties (n-to-1 relationships), set it to a property name string: ```yaml theme={null} columns: hazard: title: Hazard display: title ``` This shows the `title` property of the linked `Hazard` entity instead of the default identifier. ## Use display with a JavaScript function For dynamic cell content, set `display` to a JavaScript arrow function string. The function receives a `context` object and should return an HTML string: ```yaml theme={null} columns: systemRequirements.systemRequirement: title: System Requirement display: "() => `${context.value.objectId}: ${context.value.title}`" ``` Use the YAML `>` (folded scalar) indicator for multi-line function strings: ```yaml theme={null} columns: riskControls.riskControl: title: Risk Control display: > () => `${context.value.objectId} ${context.value.title ? '- ' + context.value.title : ''}` ``` The JavaScript is evaluated in the browser for each cell at render time. ## Use render for custom HTML The `render` property provides custom HTML rendering for a column. It accepts either an inline JavaScript expression or a reference to a named renderer: **Inline expression:** ```yaml theme={null} columns: title: title: Title render: "() => `${context.value}`" ``` **Named renderer reference:** ```yaml theme={null} columns: status: title: Status render: statusRenderer ``` Use `display` when you need to select which property of a navigation property to show, or to format it with JavaScript. Use `render` when you need custom HTML rendering for any column type. When both are set on the same column, `render` takes precedence for visual output. ## Define reusable renderers The `renderers` section at the root level of the sheet configuration defines named renderer functions. Each renderer is a JavaScript arrow function string with access to the `context` object: ```yaml theme={null} renderers: boldName: "() => `${context.value}`" linkedItems: "() => context.value.map((item) => `${item.name}`).join(', ')" ``` Reference a named renderer from any column's `render` property: ```yaml theme={null} columns: title: title: Title render: boldName riskControls.riskControl: title: Risk Controls render: linkedItems multiItem: true ``` When the same display logic applies to multiple columns, define it once in `renderers` and reference it by name. This avoids duplicating JavaScript across column definitions and makes maintenance easier. ## Customize picker display The `list.display` property customizes how items appear in dropdown pickers, not in the cell itself: ```yaml theme={null} columns: riskControls.riskControl: title: Risk Control multiItem: true list: search: - title - id display: > () => `${context.value.objectId} ${context.value.title ? '-- ' + context.value.title : ''}` ``` ## Context object reference Dynamic expressions receive a `context` object. The available properties depend on the evaluation location: | Property | Available in | Description | | ------------------------ | -------------------------------------------------------- | -------------------------------------- | | `context.value` | `render`, `display`, `renderers` | The current cell value | | `context.item` | `render`, `display`, `renderers`, `formula`, `formatter` | The entity object for the current row | | `context.item.id` | All per-cell contexts | The work item ID | | `context.item.projectId` | All per-cell contexts | The project ID | | `context.document` | `formatter` | Current document information | | `context.source` | `formula`, `display` | Parent entity in relationship contexts | | `context.entity` | `formula` | Current entity as a plain object | If a column uses a custom `render` or JavaScript `display` function, the automatic external link (the `hasUrl` feature) will not be displayed for that column. Plan your link rendering within the JavaScript function if you need clickable URLs. ## Complete YAML example ```yaml theme={null} renderers: idAndTitle: "() => `${context.value.objectId}: ${context.value.title || ''}`" boldValue: "() => `${context.value}`" columns: outlineNumber: title: "#" width: 80 isReadOnly: true title: title: Title width: "*" hasFocus: true render: boldValue hazard: title: Hazard display: title list: search: - title - id systemRequirements.systemRequirement: title: System Requirement render: idAndTitle list: search: - title - id display: > () => `${context.value.objectId} ${context.value.title ? '-- ' + context.value.title : ''}` riskControls.riskControl: title: Risk Controls multiItem: true render: "() => context.value.map((item) => `${item.objectId}`).join(', ')" list: search: - title - id ``` ## Verify After saving the sheet configuration, reload the powersheet document. You should now see cells rendering custom HTML content -- bold text, formatted identifiers, or concatenated values -- according to the JavaScript functions you defined. Columns using `render` or `display` functions will show the transformed output instead of raw property values. ## See also * [Add a Column](/powersheet/guides/sheet-configuration/add-column) -- column basics and property binding * [Configure a Formatter](/powersheet/guides/sheet-configuration/configure-formatter) -- conditional styling with expressions * [Configure Dynamic Expressions](/powersheet/guides/sheet-configuration/configure-dynamic-expressions) -- `formula`, `() =>` syntax, and the context object * [Sheet Configuration Reference](/powersheet/reference/sheet-config/index) -- full property reference * [Sheet Configuration Guides](/powersheet/guides/sheet-configuration/index)