# Sorting & Filtering

> Built-in sorting, column filters, and search functionality.

---

.. llms_copy::references/sorting-filtering

.. toc::

### Overview

Dash Glide Grid provides built-in sorting, column filtering, and search capabilities. Sort by clicking headers, filter with checkbox menus, and search across all data.

### Column Sorting [dgg]

Enable sorting with `sortable=True`. Click column headers to cycle through ascending, descending, and unsorted. Shift+click to add secondary sort columns.

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


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

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

columns = [
    {"title": "Name", "id": "name", "width": 150},
    {"title": "Department", "id": "department", "width": 120},
    {"title": "Role", "id": "role", "width": 140},
    {"title": "Salary", "id": "salary", "width": 100},
]

data = [
    {
        "name": "Alice Johnson",
        "department": "Engineering",
        "role": "Senior Developer",
        "salary": 95000,
    },
    {
        "name": "Bob Smith",
        "department": "Marketing",
        "role": "Manager",
        "salary": 82000,
    },
    {
        "name": "Carol White",
        "department": "Engineering",
        "role": "Tech Lead",
        "salary": 115000,
    },
    {
        "name": "David Brown",
        "department": "Sales",
        "role": "Sales Rep",
        "salary": 55000,
    },
    {
        "name": "Emma Davis",
        "department": "Engineering",
        "role": "Junior Developer",
        "salary": 65000,
    },
    {"name": "Frank Miller", "department": "HR", "role": "Specialist", "salary": 58000},
    {
        "name": "Grace Lee",
        "department": "Marketing",
        "role": "Content Writer",
        "salary": 52000,
    },
    {"name": "Henry Wilson", "department": "Sales", "role": "Manager", "salary": 78000},
    {
        "name": "Ivy Chen",
        "department": "Engineering",
        "role": "Senior Developer",
        "salary": 98000,
    },
    {
        "name": "Jack Taylor",
        "department": "Finance",
        "role": "Analyst",
        "salary": 72000,
    },
    {
        "name": "Kate Anderson",
        "department": "Engineering",
        "role": "Junior Developer",
        "salary": 62000,
    },
    {
        "name": "Liam Thomas",
        "department": "Marketing",
        "role": "Specialist",
        "salary": 60000,
    },
    {
        "name": "Mia Jackson",
        "department": "Sales",
        "role": "Sales Rep",
        "salary": 58000,
    },
    {"name": "Noah Garcia", "department": "HR", "role": "Recruiter", "salary": 55000},
    {
        "name": "Olivia Martinez",
        "department": "Finance",
        "role": "Analyst",
        "salary": 75000,
    },
    {
        "name": "Peter Robinson",
        "department": "Engineering",
        "role": "Tech Lead",
        "salary": 112000,
    },
    {
        "name": "Quinn Foster",
        "department": "Marketing",
        "role": "Manager",
        "salary": 85000,
    },
    {"name": "Rachel Kim", "department": "Sales", "role": "Sales Rep", "salary": 54000},
    {"name": "Sam Wright", "department": "HR", "role": "Manager", "salary": 88000},
    {
        "name": "Tina Lopez",
        "department": "Finance",
        "role": "Senior Analyst",
        "salary": 82000,
    },
    {
        "name": "Uma Patel",
        "department": "Engineering",
        "role": "Junior Developer",
        "salary": 64000,
    },
    {
        "name": "Victor Chang",
        "department": "Marketing",
        "role": "Content Writer",
        "salary": 51000,
    },
    {"name": "Wendy Brooks", "department": "Sales", "role": "Manager", "salary": 76000},
    {
        "name": "Xavier Reed",
        "department": "Engineering",
        "role": "Senior Developer",
        "salary": 102000,
    },
    {
        "name": "Yuki Tanaka",
        "department": "Finance",
        "role": "Analyst",
        "salary": 70000,
    },
    {"name": "Zoe Adams", "department": "HR", "role": "Specialist", "salary": 56000},
    {
        "name": "Aaron Bell",
        "department": "Engineering",
        "role": "Junior Developer",
        "salary": 61000,
    },
    {
        "name": "Bella Cruz",
        "department": "Marketing",
        "role": "Specialist",
        "salary": 59000,
    },
    {
        "name": "Carlos Diaz",
        "department": "Sales",
        "role": "Sales Rep",
        "salary": 53000,
    },
    {
        "name": "Diana Evans",
        "department": "Engineering",
        "role": "Tech Lead",
        "salary": 118000,
    },
    {"name": "Ethan Ford", "department": "Finance", "role": "Manager", "salary": 95000},
    {"name": "Fiona Grant", "department": "HR", "role": "Recruiter", "salary": 54000},
    {
        "name": "George Hill",
        "department": "Marketing",
        "role": "Manager",
        "salary": 84000,
    },
    {
        "name": "Hannah Irwin",
        "department": "Engineering",
        "role": "Senior Developer",
        "salary": 97000,
    },
    {"name": "Ian James", "department": "Sales", "role": "Manager", "salary": 79000},
    {
        "name": "Julia King",
        "department": "Engineering",
        "role": "Junior Developer",
        "salary": 63000,
    },
    {"name": "Kevin Lane", "department": "Finance", "role": "Analyst", "salary": 71000},
    {
        "name": "Laura Moore",
        "department": "Marketing",
        "role": "Content Writer",
        "salary": 53000,
    },
    {"name": "Mike Nelson", "department": "HR", "role": "Specialist", "salary": 57000},
    {
        "name": "Nina Owen",
        "department": "Engineering",
        "role": "Senior Developer",
        "salary": 99000,
    },
    {
        "name": "Oscar Perry",
        "department": "Sales",
        "role": "Sales Rep",
        "salary": 56000,
    },
    {
        "name": "Paula Quinn",
        "department": "Finance",
        "role": "Senior Analyst",
        "salary": 83000,
    },
    {
        "name": "Ryan Scott",
        "department": "Engineering",
        "role": "Tech Lead",
        "salary": 114000,
    },
    {
        "name": "Sara Turner",
        "department": "Marketing",
        "role": "Specialist",
        "salary": 58000,
    },
    {"name": "Tom Upton", "department": "HR", "role": "Manager", "salary": 86000},
    {"name": "Ursula Vale", "department": "Sales", "role": "Manager", "salary": 77000},
    {
        "name": "Vince Walsh",
        "department": "Engineering",
        "role": "Junior Developer",
        "salary": 60000,
    },
    {
        "name": "Willa Young",
        "department": "Finance",
        "role": "Analyst",
        "salary": 69000,
    },
    {
        "name": "Xena Zimmerman",
        "department": "Marketing",
        "role": "Manager",
        "salary": 81000,
    },
    {
        "name": "Yosef Abrams",
        "department": "Engineering",
        "role": "Senior Developer",
        "salary": 96000,
    },
    {"name": "Zara Blake", "department": "HR", "role": "Recruiter", "salary": 52000},
    {
        "name": "Adam Carter",
        "department": "Sales",
        "role": "Sales Rep",
        "salary": 57000,
    },
    {
        "name": "Beth Douglas",
        "department": "Engineering",
        "role": "Junior Developer",
        "salary": 66000,
    },
    {
        "name": "Chris Ellis",
        "department": "Finance",
        "role": "Manager",
        "salary": 92000,
    },
    {
        "name": "Dana Fisher",
        "department": "Marketing",
        "role": "Content Writer",
        "salary": 54000,
    },
    {
        "name": "Eric Green",
        "department": "Engineering",
        "role": "Tech Lead",
        "salary": 116000,
    },
    {"name": "Faith Harris", "department": "HR", "role": "Specialist", "salary": 55000},
    {"name": "Gary Irving", "department": "Sales", "role": "Manager", "salary": 80000},
    {
        "name": "Helen Jones",
        "department": "Engineering",
        "role": "Senior Developer",
        "salary": 101000,
    },
    {"name": "Ivan Klein", "department": "Finance", "role": "Analyst", "salary": 73000},
]

component = dmc.Stack(
    [
        dgg.GlideGrid(
            id={"type": "glide-grid", "index": "sorting-basic"},
            columns=columns,
            data=data,
            height=300,
            sortable=True,
        ),
        dmc.Text(id="sorting-basic-output", size="sm", c="dimmed"),
    ]
)


@callback(
    Output("sorting-basic-output", "children"),
    Input({"type": "glide-grid", "index": "sorting-basic"}, "sortColumns"),
)
def show_sort_state(sort_cols):
    if not sort_cols:
        return "Click a column header to sort. Shift+click to add secondary sorts."
    parts = []
    for i, col in enumerate(sort_cols, 1):
        col_name = columns[col["columnIndex"]]["title"]
        direction = "asc" if col["direction"] == "asc" else "desc"
        parts.append(f"{col_name} ({direction})")
    if len(parts) == 1:
        return f"Sorted by {parts[0]}"
    return "Sort order: " + " → ".join(parts)
```

    :defaultExpanded: false
    :withExpandedButton: true

### Column Filters [dgg]

Enable filters on specific columns with `filterable=True`. Click the dropdown arrow to open a checkbox menu with unique values.

.. exec::examples.reference.sorting.filters
    :code: false


```python
# File: examples/reference/sorting/filters.py

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

columns = [
    {"title": "Name", "id": "name", "width": 150},
    {"title": "Department", "id": "department", "width": 120, "filterable": True},
    {"title": "Role", "id": "role", "width": 140, "filterable": True},
    {"title": "Status", "id": "status", "width": 100, "filterable": True},
]

data = [
    {"name": "Alice Johnson", "department": "Engineering", "role": "Senior Developer", "status": "Active"},
    {"name": "Bob Smith", "department": "Marketing", "role": "Manager", "status": "Active"},
    {"name": "Carol White", "department": "Engineering", "role": "Tech Lead", "status": "Active"},
    {"name": "David Brown", "department": "Sales", "role": "Sales Rep", "status": "On Leave"},
    {"name": "Emma Davis", "department": "Engineering", "role": "Junior Developer", "status": "Active"},
    {"name": "Frank Miller", "department": "HR", "role": "Specialist", "status": "Inactive"},
    {"name": "Grace Lee", "department": "Marketing", "role": "Content Writer", "status": "Active"},
    {"name": "Henry Wilson", "department": "Sales", "role": "Manager", "status": "Active"},
    {"name": "Ivy Chen", "department": "Engineering", "role": "Senior Developer", "status": "Active"},
    {"name": "Jack Taylor", "department": "Finance", "role": "Analyst", "status": "On Leave"},
    {"name": "Kate Anderson", "department": "Engineering", "role": "Junior Developer", "status": "Active"},
    {"name": "Liam Thomas", "department": "Marketing", "role": "Specialist", "status": "Active"},
    {"name": "Mia Jackson", "department": "Sales", "role": "Sales Rep", "status": "Inactive"},
    {"name": "Noah Garcia", "department": "HR", "role": "Recruiter", "status": "Active"},
    {"name": "Olivia Martinez", "department": "Finance", "role": "Analyst", "status": "Active"},
    {"name": "Peter Robinson", "department": "Engineering", "role": "Tech Lead", "status": "Active"},
    {"name": "Quinn Foster", "department": "Marketing", "role": "Manager", "status": "On Leave"},
    {"name": "Rachel Kim", "department": "Sales", "role": "Sales Rep", "status": "Active"},
    {"name": "Sam Wright", "department": "HR", "role": "Manager", "status": "Active"},
    {"name": "Tina Lopez", "department": "Finance", "role": "Senior Analyst", "status": "Active"},
    {"name": "Uma Patel", "department": "Engineering", "role": "Junior Developer", "status": "Inactive"},
    {"name": "Victor Chang", "department": "Marketing", "role": "Content Writer", "status": "Active"},
    {"name": "Wendy Brooks", "department": "Sales", "role": "Manager", "status": "Active"},
    {"name": "Xavier Reed", "department": "Engineering", "role": "Senior Developer", "status": "Active"},
    {"name": "Yuki Tanaka", "department": "Finance", "role": "Analyst", "status": "On Leave"},
    {"name": "Zoe Adams", "department": "HR", "role": "Specialist", "status": "Active"},
    {"name": "Aaron Bell", "department": "Engineering", "role": "Junior Developer", "status": "Active"},
    {"name": "Bella Cruz", "department": "Marketing", "role": "Specialist", "status": "Inactive"},
    {"name": "Carlos Diaz", "department": "Sales", "role": "Sales Rep", "status": "Active"},
    {"name": "Diana Evans", "department": "Engineering", "role": "Tech Lead", "status": "Active"},
    {"name": "Ethan Ford", "department": "Finance", "role": "Manager", "status": "Active"},
    {"name": "Fiona Grant", "department": "HR", "role": "Recruiter", "status": "On Leave"},
    {"name": "George Hill", "department": "Marketing", "role": "Manager", "status": "Active"},
    {"name": "Hannah Irwin", "department": "Engineering", "role": "Senior Developer", "status": "Active"},
    {"name": "Ian James", "department": "Sales", "role": "Manager", "status": "Inactive"},
    {"name": "Julia King", "department": "Engineering", "role": "Junior Developer", "status": "Active"},
    {"name": "Kevin Lane", "department": "Finance", "role": "Analyst", "status": "Active"},
    {"name": "Laura Moore", "department": "Marketing", "role": "Content Writer", "status": "Active"},
    {"name": "Mike Nelson", "department": "HR", "role": "Specialist", "status": "Active"},
    {"name": "Nina Owen", "department": "Engineering", "role": "Senior Developer", "status": "On Leave"},
    {"name": "Oscar Perry", "department": "Sales", "role": "Sales Rep", "status": "Active"},
    {"name": "Paula Quinn", "department": "Finance", "role": "Senior Analyst", "status": "Active"},
    {"name": "Ryan Scott", "department": "Engineering", "role": "Tech Lead", "status": "Active"},
    {"name": "Sara Turner", "department": "Marketing", "role": "Specialist", "status": "Inactive"},
    {"name": "Tom Upton", "department": "HR", "role": "Manager", "status": "Active"},
    {"name": "Ursula Vale", "department": "Sales", "role": "Manager", "status": "Active"},
    {"name": "Vince Walsh", "department": "Engineering", "role": "Junior Developer", "status": "Active"},
    {"name": "Willa Young", "department": "Finance", "role": "Analyst", "status": "On Leave"},
    {"name": "Xena Zimmerman", "department": "Marketing", "role": "Manager", "status": "Active"},
    {"name": "Yosef Abrams", "department": "Engineering", "role": "Senior Developer", "status": "Active"},
    {"name": "Zara Blake", "department": "HR", "role": "Recruiter", "status": "Active"},
    {"name": "Adam Carter", "department": "Sales", "role": "Sales Rep", "status": "Inactive"},
    {"name": "Beth Douglas", "department": "Engineering", "role": "Junior Developer", "status": "Active"},
    {"name": "Chris Ellis", "department": "Finance", "role": "Manager", "status": "Active"},
    {"name": "Dana Fisher", "department": "Marketing", "role": "Content Writer", "status": "Active"},
    {"name": "Eric Green", "department": "Engineering", "role": "Tech Lead", "status": "On Leave"},
    {"name": "Faith Harris", "department": "HR", "role": "Specialist", "status": "Active"},
    {"name": "Gary Irving", "department": "Sales", "role": "Manager", "status": "Active"},
    {"name": "Helen Jones", "department": "Engineering", "role": "Senior Developer", "status": "Active"},
    {"name": "Ivan Klein", "department": "Finance", "role": "Analyst", "status": "Inactive"},
]

component = dmc.Stack([
    dmc.Text("Click the dropdown arrow on filterable columns to filter", size="sm", c="dimmed", mb="xs"),
    dgg.GlideGrid(
        id={"type": "glide-grid", "index": "sorting-filters"},
        columns=columns,
        data=data,
        height=300,
        columnFilters={},
    ),
    dmc.Text(id="sorting-filters-output", size="sm", c="dimmed"),
])


@callback(
    Output("sorting-filters-output", "children"),
    Input({"type": "glide-grid", "index": "sorting-filters"}, "columnFilters"),
    Input({"type": "glide-grid", "index": "sorting-filters"}, "visibleRowIndices"),
)
def show_filter_state(filters, visible):
    if not filters:
        return f"No filters active - showing all {len(data)} rows"

    parts = []
    for col_idx, values in filters.items():
        col_name = columns[int(col_idx)]["title"]
        parts.append(f"{col_name}: {values}")

    visible_count = len(visible) if visible is not None else len(data)
    return f"Filters: {', '.join(parts)} | Showing {visible_count} of {len(data)} rows"
```

    :defaultExpanded: false
    :withExpandedButton: true

### Built-in Search

Toggle the search interface with `showSearch`. Use a callback to control visibility and track the query with `searchValue`.

.. exec::examples.reference.sorting.search
    :code: false


```python
# File: examples/reference/sorting/search.py

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

columns = [
    {"title": "Name", "id": "name", "width": 150},
    {"title": "Department", "id": "department", "width": 120},
    {"title": "Role", "id": "role", "width": 160},
    {"title": "Email", "id": "email", "width": 200},
]

data = [
    {"name": "Alice Johnson", "department": "Engineering", "role": "Senior Developer", "email": "alice@example.com"},
    {"name": "Bob Smith", "department": "Marketing", "role": "Manager", "email": "bob@example.com"},
    {"name": "Carol White", "department": "Engineering", "role": "Tech Lead", "email": "carol@example.com"},
    {"name": "David Brown", "department": "Sales", "role": "Sales Rep", "email": "david@example.com"},
    {"name": "Emma Davis", "department": "Engineering", "role": "Junior Developer", "email": "emma@example.com"},
    {"name": "Frank Miller", "department": "HR", "role": "Specialist", "email": "frank@example.com"},
    {"name": "Grace Lee", "department": "Marketing", "role": "Content Writer", "email": "grace@example.com"},
    {"name": "Henry Wilson", "department": "Sales", "role": "Manager", "email": "henry@example.com"},
    {"name": "Ivy Chen", "department": "Engineering", "role": "Senior Developer", "email": "ivy@example.com"},
    {"name": "Jack Taylor", "department": "Finance", "role": "Analyst", "email": "jack@example.com"},
    {"name": "Kate Anderson", "department": "Engineering", "role": "Junior Developer", "email": "kate@example.com"},
    {"name": "Liam Thomas", "department": "Marketing", "role": "Specialist", "email": "liam@example.com"},
    {"name": "Mia Jackson", "department": "Sales", "role": "Sales Rep", "email": "mia@example.com"},
    {"name": "Noah Garcia", "department": "HR", "role": "Recruiter", "email": "noah@example.com"},
    {"name": "Olivia Martinez", "department": "Finance", "role": "Analyst", "email": "olivia@example.com"},
    {"name": "Peter Robinson", "department": "Engineering", "role": "Tech Lead", "email": "peter@example.com"},
    {"name": "Quinn Foster", "department": "Marketing", "role": "Manager", "email": "quinn@example.com"},
    {"name": "Rachel Kim", "department": "Sales", "role": "Sales Rep", "email": "rachel@example.com"},
    {"name": "Sam Wright", "department": "HR", "role": "Manager", "email": "sam@example.com"},
    {"name": "Tina Lopez", "department": "Finance", "role": "Senior Analyst", "email": "tina@example.com"},
    {"name": "Uma Patel", "department": "Engineering", "role": "Junior Developer", "email": "uma@example.com"},
    {"name": "Victor Chang", "department": "Marketing", "role": "Content Writer", "email": "victor@example.com"},
    {"name": "Wendy Brooks", "department": "Sales", "role": "Manager", "email": "wendy@example.com"},
    {"name": "Xavier Reed", "department": "Engineering", "role": "Senior Developer", "email": "xavier@example.com"},
    {"name": "Yuki Tanaka", "department": "Finance", "role": "Analyst", "email": "yuki@example.com"},
    {"name": "Zoe Adams", "department": "HR", "role": "Specialist", "email": "zoe@example.com"},
    {"name": "Aaron Bell", "department": "Engineering", "role": "Junior Developer", "email": "aaron@example.com"},
    {"name": "Bella Cruz", "department": "Marketing", "role": "Specialist", "email": "bella@example.com"},
    {"name": "Carlos Diaz", "department": "Sales", "role": "Sales Rep", "email": "carlos@example.com"},
    {"name": "Diana Evans", "department": "Engineering", "role": "Tech Lead", "email": "diana@example.com"},
    {"name": "Ethan Ford", "department": "Finance", "role": "Manager", "email": "ethan@example.com"},
    {"name": "Fiona Grant", "department": "HR", "role": "Recruiter", "email": "fiona@example.com"},
    {"name": "George Hill", "department": "Marketing", "role": "Manager", "email": "george@example.com"},
    {"name": "Hannah Irwin", "department": "Engineering", "role": "Senior Developer", "email": "hannah@example.com"},
    {"name": "Ian James", "department": "Sales", "role": "Manager", "email": "ian@example.com"},
    {"name": "Julia King", "department": "Engineering", "role": "Junior Developer", "email": "julia@example.com"},
    {"name": "Kevin Lane", "department": "Finance", "role": "Analyst", "email": "kevin@example.com"},
    {"name": "Laura Moore", "department": "Marketing", "role": "Content Writer", "email": "laura@example.com"},
    {"name": "Mike Nelson", "department": "HR", "role": "Specialist", "email": "mike@example.com"},
    {"name": "Nina Owen", "department": "Engineering", "role": "Senior Developer", "email": "nina@example.com"},
    {"name": "Oscar Perry", "department": "Sales", "role": "Sales Rep", "email": "oscar@example.com"},
    {"name": "Paula Quinn", "department": "Finance", "role": "Senior Analyst", "email": "paula@example.com"},
    {"name": "Ryan Scott", "department": "Engineering", "role": "Tech Lead", "email": "ryan@example.com"},
    {"name": "Sara Turner", "department": "Marketing", "role": "Specialist", "email": "sara@example.com"},
    {"name": "Tom Upton", "department": "HR", "role": "Manager", "email": "tom@example.com"},
    {"name": "Ursula Vale", "department": "Sales", "role": "Manager", "email": "ursula@example.com"},
    {"name": "Vince Walsh", "department": "Engineering", "role": "Junior Developer", "email": "vince@example.com"},
    {"name": "Willa Young", "department": "Finance", "role": "Analyst", "email": "willa@example.com"},
    {"name": "Xena Zimmerman", "department": "Marketing", "role": "Manager", "email": "xena@example.com"},
    {"name": "Yosef Abrams", "department": "Engineering", "role": "Senior Developer", "email": "yosef@example.com"},
    {"name": "Zara Blake", "department": "HR", "role": "Recruiter", "email": "zara@example.com"},
    {"name": "Adam Carter", "department": "Sales", "role": "Sales Rep", "email": "adam@example.com"},
    {"name": "Beth Douglas", "department": "Engineering", "role": "Junior Developer", "email": "beth@example.com"},
    {"name": "Chris Ellis", "department": "Finance", "role": "Manager", "email": "chris@example.com"},
    {"name": "Dana Fisher", "department": "Marketing", "role": "Content Writer", "email": "dana@example.com"},
    {"name": "Eric Green", "department": "Engineering", "role": "Tech Lead", "email": "eric@example.com"},
    {"name": "Faith Harris", "department": "HR", "role": "Specialist", "email": "faith@example.com"},
    {"name": "Gary Irving", "department": "Sales", "role": "Manager", "email": "gary@example.com"},
    {"name": "Helen Jones", "department": "Engineering", "role": "Senior Developer", "email": "helen@example.com"},
    {"name": "Ivan Klein", "department": "Finance", "role": "Analyst", "email": "ivan@example.com"},
]

component = dmc.Stack([
    dmc.Group([
        dmc.Button(
            "Search",
            id="search-toggle-btn",
            size="compact-sm",
            variant="light",
            leftSection=DashIconify(icon="mdi:magnify", width=16),
        ),
    ]),
    dgg.GlideGrid(
        id={"type": "glide-grid", "index": "sorting-search"},
        columns=columns,
        data=data,
        height=300,
        showSearch=False,
    ),
    dmc.Text(id="sorting-search-output", size="sm", c="dimmed"),
])


@callback(
    Output({"type": "glide-grid", "index": "sorting-search"}, "showSearch"),
    Input("search-toggle-btn", "n_clicks"),
    prevent_initial_call=True,
)
def toggle_search(n_clicks):
    return (n_clicks or 0) % 2 == 1


@callback(
    Output("sorting-search-output", "children"),
    Input({"type": "glide-grid", "index": "sorting-search"}, "searchValue"),
)
def show_search_state(search):
    if not search:
        return "Click the button to open the search box"
    return f"Searching for: \"{search}\""
```

    :defaultExpanded: false
    :withExpandedButton: true

### Header Menu Configuration [dgg]

Customize the filter menu appearance with `headerMenuConfig`. Choose between different menu icons and set the active filter indicator color.

.. exec::examples.reference.sorting.menu_config
    :code: false


```python
# File: examples/reference/sorting/menu_config.py

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

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

data = [
    {"name": "Alice Johnson", "department": "Engineering", "status": "Active", "salary": 95000},
    {"name": "Bob Smith", "department": "Marketing", "status": "Active", "salary": 82000},
    {"name": "Carol White", "department": "Engineering", "status": "Active", "salary": 115000},
    {"name": "David Brown", "department": "Sales", "status": "On Leave", "salary": 55000},
    {"name": "Emma Davis", "department": "Engineering", "status": "Inactive", "salary": 65000},
    {"name": "Frank Miller", "department": "HR", "status": "Active", "salary": 58000},
    {"name": "Grace Lee", "department": "Marketing", "status": "Active", "salary": 52000},
    {"name": "Henry Wilson", "department": "Sales", "status": "Active", "salary": 78000},
    {"name": "Ivy Chen", "department": "Engineering", "status": "Active", "salary": 98000},
    {"name": "Jack Taylor", "department": "Finance", "status": "On Leave", "salary": 72000},
    {"name": "Kate Anderson", "department": "Engineering", "status": "Active", "salary": 62000},
    {"name": "Liam Thomas", "department": "Marketing", "status": "Inactive", "salary": 60000},
    {"name": "Mia Jackson", "department": "Sales", "status": "Active", "salary": 58000},
    {"name": "Noah Garcia", "department": "HR", "status": "Active", "salary": 55000},
    {"name": "Olivia Martinez", "department": "Finance", "status": "Active", "salary": 75000},
    {"name": "Peter Robinson", "department": "Engineering", "status": "Active", "salary": 112000},
    {"name": "Quinn Foster", "department": "Marketing", "status": "On Leave", "salary": 85000},
    {"name": "Rachel Kim", "department": "Sales", "status": "Active", "salary": 54000},
    {"name": "Sam Wright", "department": "HR", "status": "Active", "salary": 88000},
    {"name": "Tina Lopez", "department": "Finance", "status": "Active", "salary": 82000},
    {"name": "Uma Patel", "department": "Engineering", "status": "Inactive", "salary": 64000},
    {"name": "Victor Chang", "department": "Marketing", "status": "Active", "salary": 51000},
    {"name": "Wendy Brooks", "department": "Sales", "status": "Active", "salary": 76000},
    {"name": "Xavier Reed", "department": "Engineering", "status": "Active", "salary": 102000},
    {"name": "Yuki Tanaka", "department": "Finance", "status": "On Leave", "salary": 70000},
    {"name": "Zoe Adams", "department": "HR", "status": "Active", "salary": 56000},
    {"name": "Aaron Bell", "department": "Engineering", "status": "Active", "salary": 61000},
    {"name": "Bella Cruz", "department": "Marketing", "status": "Inactive", "salary": 59000},
    {"name": "Carlos Diaz", "department": "Sales", "status": "Active", "salary": 53000},
    {"name": "Diana Evans", "department": "Engineering", "status": "Active", "salary": 118000},
    {"name": "Ethan Ford", "department": "Finance", "status": "Active", "salary": 95000},
    {"name": "Fiona Grant", "department": "HR", "status": "On Leave", "salary": 54000},
    {"name": "George Hill", "department": "Marketing", "status": "Active", "salary": 84000},
    {"name": "Hannah Irwin", "department": "Engineering", "status": "Active", "salary": 97000},
    {"name": "Ian James", "department": "Sales", "status": "Inactive", "salary": 79000},
    {"name": "Julia King", "department": "Engineering", "status": "Active", "salary": 63000},
    {"name": "Kevin Lane", "department": "Finance", "status": "Active", "salary": 71000},
    {"name": "Laura Moore", "department": "Marketing", "status": "Active", "salary": 53000},
    {"name": "Mike Nelson", "department": "HR", "status": "Active", "salary": 57000},
    {"name": "Nina Owen", "department": "Engineering", "status": "On Leave", "salary": 99000},
    {"name": "Oscar Perry", "department": "Sales", "status": "Active", "salary": 56000},
    {"name": "Paula Quinn", "department": "Finance", "status": "Active", "salary": 83000},
    {"name": "Ryan Scott", "department": "Engineering", "status": "Active", "salary": 114000},
    {"name": "Sara Turner", "department": "Marketing", "status": "Inactive", "salary": 58000},
    {"name": "Tom Upton", "department": "HR", "status": "Active", "salary": 86000},
    {"name": "Ursula Vale", "department": "Sales", "status": "Active", "salary": 77000},
    {"name": "Vince Walsh", "department": "Engineering", "status": "Active", "salary": 60000},
    {"name": "Willa Young", "department": "Finance", "status": "On Leave", "salary": 69000},
    {"name": "Xena Zimmerman", "department": "Marketing", "status": "Active", "salary": 81000},
    {"name": "Yosef Abrams", "department": "Engineering", "status": "Active", "salary": 96000},
    {"name": "Zara Blake", "department": "HR", "status": "Active", "salary": 52000},
    {"name": "Adam Carter", "department": "Sales", "status": "Inactive", "salary": 57000},
    {"name": "Beth Douglas", "department": "Engineering", "status": "Active", "salary": 66000},
    {"name": "Chris Ellis", "department": "Finance", "status": "Active", "salary": 92000},
    {"name": "Dana Fisher", "department": "Marketing", "status": "Active", "salary": 54000},
    {"name": "Eric Green", "department": "Engineering", "status": "On Leave", "salary": 116000},
    {"name": "Faith Harris", "department": "HR", "status": "Active", "salary": 55000},
    {"name": "Gary Irving", "department": "Sales", "status": "Active", "salary": 80000},
    {"name": "Helen Jones", "department": "Engineering", "status": "Active", "salary": 101000},
    {"name": "Ivan Klein", "department": "Finance", "status": "Inactive", "salary": 73000},
]

component = dmc.Stack([
    dmc.SegmentedControl(
        id="menu-icon-control",
        data=[
            {"label": "Chevron", "value": "chevron"},
            {"label": "Hamburger", "value": "hamburger"},
            {"label": "Dots", "value": "dots"},
        ],
        value="chevron",
        size="sm",
    ),
    dgg.GlideGrid(
        id={"type": "glide-grid", "index": "sorting-menu"},
        columns=columns,
        data=data,
        height=280,
        columnFilters={},
        headerMenuConfig={
            "menuIcon": "chevron",
            "filterActiveColor": "#3b82f6",
        },
    ),
    dmc.Text(id="sorting-menu-output", size="sm", c="dimmed"),
])


@callback(
    Output({"type": "glide-grid", "index": "sorting-menu"}, "headerMenuConfig"),
    Input("menu-icon-control", "value"),
)
def update_menu_icon(icon):
    return {
        "menuIcon": icon,
        "filterActiveColor": "#3b82f6",
    }


@callback(
    Output("sorting-menu-output", "children"),
    Input({"type": "glide-grid", "index": "sorting-menu"}, "columnFilters"),
)
def show_filter_state(filters):
    if not filters:
        return "No filters active"
    return f"Active filters: {filters}"
```

    :defaultExpanded: false
    :withExpandedButton: true


### Props Reference

#### Sorting Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `sortable` | boolean | False | Enable column sorting by clicking headers |
| `sortColumns` | list | - | Current sort state: `[{columnIndex, direction}]` |
| `sortingOrder` | list | ['asc', 'desc', None] | Cycle order when clicking headers |

#### Column Sort Props

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

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `sortable` | boolean | True | Whether this column can be sorted (when grid `sortable=True`) |

#### Filter Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `columnFilters` | dict | - | Current filter state: `{"colIndex": [values]}` |
| `visibleRowIndices` | list | - | Row indices visible after filtering |

#### Column Filter Props

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

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `filterable` | boolean | False | Enable filter menu with unique value checkboxes |

#### Search Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `showSearch` | boolean | False | Show the built-in search interface |
| `searchValue` | string | '' | Current search query |

#### Header Menu Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `headerMenuConfig` | dict | - | Menu configuration object |
| `headerMenuConfig.menuIcon` | string | 'chevron' | Icon style: 'chevron', 'hamburger', 'dots' |
| `headerMenuConfig.filterActiveColor` | string | theme accent | Color for header when filter is active |

---

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