# ColumnViewRenderer

> _Since v0.1.1_

Custom view renderer function for cell content.

Returns one of:
- `Node` - DOM element to display in the cell
- `string` - HTML string (parsed and inserted)
- `void | null` - Use default text rendering

```ts
type ColumnViewRenderer = (ctx: CellRenderContext<TRow, TValue>) => Node | string | void | null
```

#### Example

```typescript
// DOM element (recommended for interactivity)
const avatarRenderer: ColumnViewRenderer<Employee> = (ctx) => {
  const img = document.createElement('img');
  img.src = ctx.row.avatarUrl;
  img.alt = ctx.row.name;
  img.className = 'avatar';
  return img;
};

// HTML string (simpler, good for static content)
const emailRenderer: ColumnViewRenderer = (ctx) => {
  return `<a href="mailto:${ctx.value}">${ctx.value}</a>`;
};

// Conditional rendering
const conditionalRenderer: ColumnViewRenderer = (ctx) => {
  if (!ctx.value) return null; // Use default
  return `<em>${ctx.value}</em>`;
};
```

## See Also

- [`CellRenderContext`](/grid/api/core/interfaces/cellrendercontext.md) for available context properties