# Headers

> Header height, icons, menus, and click events.

---

.. llms_copy::references/headers

.. toc::

### Overview

Headers display column titles and can include icons, menus, and group headers for organizing related columns.

### Basic Usage

Headers are rendered automatically from column definitions. The default `headerHeight` is 36 pixels.

.. exec::examples.reference.headers.basic
    :code: false


```python
# File: examples/reference/headers/basic.py

import dash_glide_grid as dgg

columns = [
    {"title": "Name", "id": "name", "width": 150},
    {"title": "Email", "id": "email", "width": 220},
    {"title": "Role", "id": "role", "width": 120},
    {"title": "Status", "id": "status", "width": 100},
]

data = [
    {"name": "Alice Johnson", "email": "alice@example.com", "role": "Engineer", "status": "Active"},
    {"name": "Bob Smith", "email": "bob@example.com", "role": "Designer", "status": "Active"},
    {"name": "Carol White", "email": "carol@example.com", "role": "Manager", "status": "Away"},
    {"name": "David Brown", "email": "david@example.com", "role": "Engineer", "status": "Inactive"},
]

component = dgg.GlideGrid(
    id={"type": "glide-grid", "index": "headers-basic"},
    columns=columns,
    data=data,
    height=200,
    headerHeight=36,
)
```

    :defaultExpanded: true
    :withExpandedButton: true

### Header Height

Control the height of headers and group headers. Use `groupHeaderHeight` when columns are grouped.

.. exec::examples.reference.headers.height
    :code: false


```python
# File: examples/reference/headers/height.py

from dash import Input, Output, callback
import dash_glide_grid as dgg
import dash_mantine_components as dmc

columns = [
    {"title": "Name", "id": "name", "width": 150, "group": "Personal"},
    {"title": "Email", "id": "email", "width": 200, "group": "Personal"},
    {"title": "Department", "id": "dept", "width": 120, "group": "Work"},
    {"title": "Salary", "id": "salary", "width": 100, "group": "Work"},
]

data = [
    {"name": "Alice Johnson", "email": "alice@example.com", "dept": "Engineering", "salary": 95000},
    {"name": "Bob Smith", "email": "bob@example.com", "dept": "Marketing", "salary": 72000},
    {"name": "Carol White", "email": "carol@example.com", "dept": "Engineering", "salary": 88000},
    {"name": "David Brown", "email": "david@example.com", "dept": "Sales", "salary": 65000},
]

component = dmc.Stack(
    [
        dmc.Group(
            [
                dmc.NumberInput(
                    id="header-height-ctrl",
                    label="Header Height (px)",
                    value=36,
                    min=28,
                    max=80,
                    w=150,
                ),
                dmc.NumberInput(
                    id="group-header-height-ctrl",
                    label="Group Header Height (px)",
                    value=36,
                    min=28,
                    max=80,
                    w=180,
                ),
            ]
        ),
        dgg.GlideGrid(
            id={"type": "glide-grid", "index": "headers-height"},
            columns=columns,
            data=data,
            height=220,
            headerHeight=36,
            groupHeaderHeight=36,
        ),
    ]
)


@callback(
    Output({"type": "glide-grid", "index": "headers-height"}, "headerHeight"),
    Input("header-height-ctrl", "value"),
)
def update_header_height(value):
    return value or 36


@callback(
    Output({"type": "glide-grid", "index": "headers-height"}, "groupHeaderHeight"),
    Input("group-header-height-ctrl", "value"),
)
def update_group_header_height(value):
    return value or 36
```

    :defaultExpanded: false
    :withExpandedButton: true

### Header Icons

Add icons to column headers using the `icon` property. Built-in icons include `headerString`, `headerNumber`, `headerEmail`, `headerImage`, `headerUri`, and more.

.. exec::examples.reference.headers.icons
    :code: false


```python
# File: examples/reference/headers/icons.py

import dash_glide_grid as dgg

columns = [
    {"title": "Name", "id": "name", "width": 150, "icon": "headerString"},
    {"title": "Age", "id": "age", "width": 80, "icon": "headerNumber"},
    {"title": "Email", "id": "email", "width": 200, "icon": "headerEmail"},
    {"title": "Avatar", "id": "avatar", "width": 100, "icon": "headerImage"},
    {"title": "Website", "id": "website", "width": 150, "icon": "headerUri"},
]

data = [
    {"name": "Alice Johnson", "age": 32, "email": "alice@example.com", "avatar": "https://i.pravatar.cc/150?u=alice", "website": "https://alice.dev"},
    {"name": "Bob Smith", "age": 28, "email": "bob@example.com", "avatar": "https://i.pravatar.cc/150?u=bob", "website": "https://bob.io"},
    {"name": "Carol White", "age": 35, "email": "carol@example.com", "avatar": "https://i.pravatar.cc/150?u=carol", "website": "https://carol.com"},
    {"name": "David Brown", "age": 41, "email": "david@example.com", "avatar": "https://i.pravatar.cc/150?u=david", "website": "https://david.net"},
]

component = dgg.GlideGrid(
    id={"type": "glide-grid", "index": "headers-icons"},
    columns=columns,
    data=data,
    height=200,
)
```

    :defaultExpanded: false
    :withExpandedButton: true

### Header Menus

Enable dropdown menus on column headers by setting `hasMenu: True` on individual columns. Handle menu clicks with the `headerMenuClicked` callback.

.. exec::examples.reference.headers.menu
    :code: false


```python
# File: examples/reference/headers/menu.py

from dash import Input, Output, callback
import dash_glide_grid as dgg
import dash_mantine_components as dmc

columns = [
    {"title": "Name", "id": "name", "width": 150, "hasMenu": True},
    {"title": "Department", "id": "dept", "width": 120, "hasMenu": True},
    {"title": "Salary", "id": "salary", "width": 100, "hasMenu": True},
    {"title": "Status", "id": "status", "width": 100, "hasMenu": True},
]

data = [
    {"name": "Alice Johnson", "dept": "Engineering", "salary": 95000, "status": "Active"},
    {"name": "Bob Smith", "dept": "Marketing", "salary": 72000, "status": "Active"},
    {"name": "Carol White", "dept": "Engineering", "salary": 88000, "status": "Away"},
    {"name": "David Brown", "dept": "Sales", "salary": 65000, "status": "Inactive"},
]

component = dmc.Stack(
    [
        dgg.GlideGrid(
            id={"type": "glide-grid", "index": "headers-menu"},
            columns=columns,
            data=data,
            height=200,
        ),
        dmc.Text(id="headers-menu-output", size="sm", c="dimmed"),
    ]
)


@callback(
    Output("headers-menu-output", "children"),
    Input({"type": "glide-grid", "index": "headers-menu"}, "headerMenuClicked"),
)
def show_menu_click(clicked):
    if clicked:
        col_index = clicked.get("col")
        if col_index is not None and 0 <= col_index < len(columns):
            col_name = columns[col_index]["title"]
            return f"Menu clicked on column: {col_name} (index {col_index})"
        return f"Menu clicked on column index: {col_index}"
    return "Click the menu icon (▼) in any column header"
```

    :defaultExpanded: false
    :withExpandedButton: true

### Header Click Events

Track header clicks with the `headerClicked` callback to implement custom sorting, filtering, or other column-level interactions.

.. exec::examples.reference.headers.events
    :code: false


```python
# File: examples/reference/headers/events.py

from dash import Input, Output, callback
import dash_glide_grid as dgg
import dash_mantine_components as dmc

columns = [
    {"title": "Name", "id": "name", "width": 150},
    {"title": "Department", "id": "dept", "width": 120},
    {"title": "Salary", "id": "salary", "width": 100},
    {"title": "Status", "id": "status", "width": 100},
]

data = [
    {"name": "Alice Johnson", "dept": "Engineering", "salary": 95000, "status": "Active"},
    {"name": "Bob Smith", "dept": "Marketing", "salary": 72000, "status": "Active"},
    {"name": "Carol White", "dept": "Engineering", "salary": 88000, "status": "Away"},
    {"name": "David Brown", "dept": "Sales", "salary": 65000, "status": "Inactive"},
]

component = dmc.Stack(
    [
        dmc.Text("Click on any column header to see the event", size="sm", c="dimmed"),
        dgg.GlideGrid(
            id={"type": "glide-grid", "index": "headers-events"},
            columns=columns,
            data=data,
            height=200,
        ),
        dmc.Text(id="headers-events-output", size="sm", fw=500),
    ]
)


@callback(
    Output("headers-events-output", "children"),
    Input({"type": "glide-grid", "index": "headers-events"}, "headerClicked"),
)
def show_header_click(clicked):
    if clicked:
        col_index = clicked.get("col")
        if col_index is not None and 0 <= col_index < len(columns):
            col_name = columns[col_index]["title"]
            return f"Header clicked: {col_name} (index {col_index})"
        return f"Header clicked: column index {col_index}"
    return ""
```

    :defaultExpanded: false
    :withExpandedButton: true


### Props Reference

#### Header Height Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `headerHeight` | number | 36 | Height of the header row in pixels |
| `groupHeaderHeight` | number | headerHeight | Height of group header row in pixels |

#### Column Header Properties

Properties for individual column objects in the `columns` array.

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `icon` | string | - | Icon to display in header (e.g., 'headerString', 'headerNumber') |
| `overlayIcon` | string | - | Secondary overlay icon for header |
| `hasMenu` | boolean | - | Show menu dropdown button in header |
| `group` | string | - | Group name for column grouping |

#### Header Callback Props

| Property | Type | Description |
|----------|------|-------------|
| `headerClicked` | dict | Triggered when a header is clicked: `{col, timestamp}` |
| `headerContextMenu` | dict | Triggered on header right-click: `{col}` |
| `headerMenuClicked` | dict | Triggered when header menu button is clicked: `{col}` |
| `groupHeaderClicked` | dict | Triggered when a group header is clicked: `{group, col}` |

#### Header Theme Properties

Theme properties that affect header appearance (set in `theme` prop).

| Property | Type | Description |
|----------|------|-------------|
| `bgHeader` | string | Header background color |
| `bgHeaderHovered` | string | Header background when hovered |
| `bgHeaderHasFocus` | string | Header background when column has focus |
| `textHeader` | string | Header text color |
| `textHeaderSelected` | string | Header text color when selected |
| `textGroupHeader` | string | Group header text color |
| `bgIconHeader` | string | Background color for header icons |
| `fgIconHeader` | string | Foreground color for header icons |
| `headerFontStyle` | string | Font style for headers (e.g., 'bold 15px') |

---

*Source: /reference/headers*
*Generated with dash-improve-my-llms*