# Custom header components
The `header` field on a `ColumnDef` accepts a function that returns either
a `renderSnippet(...)` or `renderComponent(...)`. The function receives a
`HeaderContext` so it can access the column, header, and grid.
In the demo below, the **column headers** are custom: each quarter header and
each measure header (with its icon) is rendered from a snippet via
`header: () => renderSnippet(...)`.
> Live demo: Pivot - Conditional cells - https://svgrid.com/demos/121-pivot-conditional-cells/
## With a snippet
The examples on this page run against these rows:
```svelte
```
```svelte
{#snippet SalaryHeader(p: { sorted: false | 'asc' | 'desc' })}
💰 Salary
{#if p.sorted === 'asc'}↑{:else if p.sorted === 'desc'}↓{/if}
{/snippet}
```
## With a component
```ts
import HeaderWithIcon from './HeaderWithIcon.svelte'
import { renderComponent } from '@svgrid/grid'
const columns = [
{
field: 'status',
header: () => renderComponent(HeaderWithIcon, { icon: 'flag', label: 'Status' }),
},
]
```
## HeaderContext
The argument passed to your header callback exposes:
```ts
type HeaderContext = {
header: Header
column: Column
table: SvGrid
}
// Column gives you sort state, filter capability, and the toggle handler:
ctx.column.getCanSort()
ctx.column.getIsSorted() // false | 'asc' | 'desc'
ctx.column.getToggleSortingHandler() // () => void
```
## When to use it
Anything that needs more than a string belongs here - multi-line headers,
filter icons inside the header, units, tooltips, custom sort indicators,
a "select all" checkbox in a leading column.
## Interactive elements inside a header
Custom headers can contain real interactive controls - buttons, inputs,
dropdowns, menus - and the grid routes clicks correctly:
- A click that lands on an interactive element (`