# CellRenderContext

> _Since v0.1.1_

Context passed to custom view renderers (pure display – no commit helpers).

Used by `viewRenderer` and `renderer` column properties to create
custom cell content. Return a DOM node or HTML string.

#### Example

```typescript
// Status badge renderer
const statusRenderer: ColumnViewRenderer = (ctx: CellRenderContext) => {
  const badge = document.createElement('span');
  badge.className = `badge badge-${ctx.value}`;
  badge.textContent = ctx.value;
  return badge;
};

// Progress bar using row data
const progressRenderer: ColumnViewRenderer = (ctx) => {
  const bar = document.createElement('div');
  bar.className = 'progress-bar';
  bar.style.width = `${ctx.value}%`;
  bar.title = `${ctx.row.taskName}: ${ctx.value}%`;
  return bar;
};

// Return HTML string (simpler, less performant)
const htmlRenderer: ColumnViewRenderer = (ctx) => {
  return `<strong>${ctx.value}</strong>`;
};
```

## Properties

| Property | Type | Description |
| -------- | ---- | ----------- |
| `row` | <code>TRow</code> | Row object for the cell being rendered. |
| `value` | <code>TValue</code> | Value at field. |
| `field` | <code>keyof TRow &amp; string</code> | Field key. |
| `column` | <code><a href="/grid/api/core/interfaces/columnconfig/">ColumnConfig</a>&lt;TRow&gt;</code> | Column configuration reference. |
| `grid?` | <code><a href="/grid/api/core/interfaces/publicgrid/">PublicGrid</a>&lt;TRow&gt; &amp; HTMLElement</code> | The grid element that owns this cell. Use to access public grid API (e.g., `getPluginByName()`) from custom renderers. |
| `cellEl?` | <code>HTMLElement</code> | The cell DOM element being rendered into. Framework adapters can use this to cache per-cell state (e.g., React roots). |

### Property Details

#### grid

```typescript
const renderer: ColumnViewRenderer<MyRow> = (ctx) => {
  const tree = ctx.grid?.getPluginByName('tree');
  // ...
};
```

---

## See Also

- [`ColumnViewRenderer`](/grid/api/core/types/columnviewrenderer.md) for the renderer function signature