# CellRenderer

> _Since v0.3.0_

Vue render function or component for cell rendering.

Can be either:
- A render function receiving `CellRenderContext` and returning a `VNode`
- A Vue component (SFC or defineComponent)

```ts
type CellRenderer = (ctx: CellRenderContext<TRow, TValue>) => VNode | Component
```

#### Example

```ts
import type { CellRenderer, ColumnConfig } from '@toolbox-web/grid-vue';
import StatusBadge from './StatusBadge.vue';

// As render function
const statusRenderer: CellRenderer<Employee, string> = (ctx) =>
  h('span', { class: ctx.value }, ctx.value);

// As Vue component
const columns: ColumnConfig<Employee>[] = [
  { field: 'status', renderer: StatusBadge },
];
```