# Cells

> Cell types overview, merged cells, theming, and cell properties.

---

.. llms_copy::references/cells

.. toc::

### Overview

Cells display and edit data in the grid.


### Basic Cell Types

Each column demonstrates a different basic cell type. Text, number, and boolean are auto-detected from Python values. Other types require explicit cell objects. [View individual basic cell examples →](/reference/cell-types#basic-cell-types)


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


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

import dash_glide_grid as dgg

columns = [
    {"title": "Text", "id": "text", "width": 120},
    {"title": "Number", "id": "number", "width": 90},
    {"title": "Boolean", "id": "boolean", "width": 80},
    {"title": "Markdown", "id": "markdown", "width": 140},
    {"title": "Image", "id": "image", "width": 100},
    {"title": "URI", "id": "uri", "width": 100},
    {"title": "Bubble", "id": "bubble", "width": 160},
    {"title": "Drilldown", "id": "drilldown", "width": 140},
    {"title": "Row ID", "id": "rowid", "width": 90},
    {"title": "Protected", "id": "protected", "width": 90},
    {"title": "Loading", "id": "loading", "width": 90},
]

data = [
    {
        "image": {"kind": "image", "data": ["https://i.pravatar.cc/40?u=alice"]},
        "text": "Alice Johnson",
        "number": 42,
        "boolean": True,
        "markdown": {"kind": "markdown", "data": "**Lead** Engineer"},
        "uri": {"kind": "uri", "data": "https://github.com", "displayData": "GitHub"},
        "bubble": {"kind": "bubble", "data": ["backend", "api"]},
        "drilldown": {
            "kind": "drilldown",
            "data": [
                {"text": "Engineering", "img": "https://i.pravatar.cc/20?u=eng"},
                {"text": "Backend", "img": "https://i.pravatar.cc/20?u=back"},
            ],
        },
        "rowid": {"kind": "rowid", "data": "EMP-001"},
        "protected": {"kind": "protected"},
        "loading": {"kind": "loading", "skeletonWidth": 70, "skeletonHeight": 16},
    },
    {
        "image": {
            "kind": "image",
            "data": [
                "https://i.pravatar.cc/40?u=bob",
                "https://i.pravatar.cc/40?u=bob2",
            ],
        },
        "text": "Bob Smith",
        "number": 1250.75,
        "boolean": False,
        "markdown": {"kind": "markdown", "data": "*Senior* Developer"},
        "uri": {
            "kind": "uri",
            "data": "https://linkedin.com",
            "displayData": "LinkedIn",
        },
        "bubble": {"kind": "bubble", "data": ["frontend", "ux", "mobile"]},
        "drilldown": {
            "kind": "drilldown",
            "data": [
                {"text": "Design", "img": "https://i.pravatar.cc/20?u=design"},
                {"text": "UX", "img": "https://i.pravatar.cc/20?u=ux"},
            ],
        },
        "rowid": {"kind": "rowid", "data": "EMP-002"},
        "protected": {"kind": "protected"},
        "loading": {"kind": "loading", "skeletonWidth": 70, "skeletonHeight": 16},
    },
    {
        "image": {"kind": "image", "data": ["https://i.pravatar.cc/40?u=carol"]},
        "text": "Carol White",
        "number": -15,
        "boolean": True,
        "markdown": {"kind": "markdown", "data": "~~Junior~~ **Mid-level**"},
        "uri": {"kind": "uri", "data": "https://twitter.com", "displayData": "Twitter"},
        "bubble": {"kind": "bubble", "data": ["data", "ml"]},
        "drilldown": {
            "kind": "drilldown",
            "data": [{"text": "Data Science"}],
        },
        "rowid": {"kind": "rowid", "data": "EMP-003"},
        "protected": {"kind": "protected"},
        "loading": {"kind": "loading", "skeletonWidth": 70, "skeletonHeight": 16},
    },
    {
        "image": {
            "kind": "image",
            "data": [
                "https://i.pravatar.cc/40?u=david",
                "https://i.pravatar.cc/40?u=david2",
                "https://i.pravatar.cc/40?u=david3",
            ],
        },
        "text": "David Brown",
        "number": 99999,
        "boolean": False,
        "markdown": {"kind": "markdown", "data": "[Docs](https://docs.com)"},
        "uri": {"kind": "uri", "data": "https://plotly.com", "displayData": "Plotly"},
        "bubble": {"kind": "bubble", "data": ["devops", "cloud", "k8s", "ci/cd"]},
        "drilldown": {
            "kind": "drilldown",
            "data": [
                {"text": "Infrastructure", "img": "https://i.pravatar.cc/20?u=infra"},
                {"text": "DevOps", "img": "https://i.pravatar.cc/20?u=devops"},
            ],
        },
        "rowid": {"kind": "rowid", "data": "EMP-004"},
        "protected": {"kind": "protected"},
        "loading": {"kind": "loading", "skeletonWidth": 70, "skeletonHeight": 16},
    },
    {
        "image": {"kind": "image", "data": ["https://i.pravatar.cc/40?u=eve"]},
        "text": "Eve Martinez",
        "number": 0,
        "boolean": True,
        "markdown": {"kind": "markdown", "data": "`code` inline"},
        "uri": {
            "kind": "uri",
            "data": "https://dash.plotly.com",
            "displayData": "Dash",
        },
        "bubble": {"kind": "bubble", "data": ["security"]},
        "drilldown": {
            "kind": "drilldown",
            "data": [{"text": "Security"}],
        },
        "rowid": {"kind": "rowid", "data": "EMP-005"},
        "protected": {"kind": "protected"},
        "loading": {"kind": "loading", "skeletonWidth": 70, "skeletonHeight": 16},
    },
]

component = dgg.GlideGrid(
    id={"type": "glide-grid", "index": "cells-basic"},
    columns=columns,
    data=data,
    height=290,
    rowHeight=40,
    sortable=True,
)
```

    :defaultExpanded: false
    :withExpandedButton: true



### Advanced Cell Types

Advanced cells provide richer interactivity and specialized rendering. These are custom renderers added to the Dash wrapper. [View individual advanced cell examples →](/reference/cell-types#advanced-cell-types)


.. exec::examples.reference.cells.advanced
    :code: false


```python
# File: examples/reference/cells/advanced.py

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

random.seed(42)


def generate_sparkline(base, length=8):
    values = [base]
    for _ in range(length - 1):
        change = random.uniform(-10, 10)
        values.append(max(0, min(100, values[-1] + change)))
    return [round(v, 1) for v in values]


# Status color pairs (light/dark theme)
STATUS_COLORS = {
    "active": {"light": "#a8e6cf", "dark": "#2e7d32"},
    "pending": {"light": "#fff3cd", "dark": "#f57f17"},
    "review": {"light": "#e1bee7", "dark": "#7b1fa2"},
    "complete": {"light": "#b3e5fc", "dark": "#1565c0"},
    "archived": {"light": "#e0e0e0", "dark": "#616161"},
}

STATUS_LABELS = {
    "active": "Active",
    "pending": "Pending",
    "review": "In Review",
    "complete": "Complete",
    "archived": "Archived",
}

# Skill color pairs (light/dark theme)
SKILL_COLORS = {
    "python": {"light": "#bbdefb", "dark": "#1565c0"},
    "javascript": {"light": "#fff9c4", "dark": "#f9a825"},
    "react": {"light": "#b2ebf2", "dark": "#00838f"},
    "sql": {"light": "#c5cae9", "dark": "#303f9f"},
    "rust": {"light": "#ffccbc", "dark": "#d84315"},
    "go": {"light": "#b2dfdb", "dark": "#00695c"},
}

SKILL_LABELS = {
    "python": "Python",
    "javascript": "JavaScript",
    "react": "React",
    "sql": "SQL",
    "rust": "Rust",
    "go": "Go",
}


def get_status_options(theme="light"):
    return [
        {"value": k, "label": v, "color": STATUS_COLORS[k][theme]}
        for k, v in STATUS_LABELS.items()
    ]


def get_skill_options(theme="light"):
    return [
        {"value": k, "label": v, "color": SKILL_COLORS[k][theme]}
        for k, v in SKILL_LABELS.items()
    ]


status_options = get_status_options("light")
skill_options = get_skill_options("light")

# Tag color pairs (light/dark theme)
TAG_COLORS = {
    "Bug": {"light": "#ffcdd2", "dark": "#c62828"},
    "Feature": {"light": "#e1bee7", "dark": "#7b1fa2"},
    "Enhancement": {"light": "#bbdefb", "dark": "#1565c0"},
    "Docs": {"light": "#fff9c4", "dark": "#f9a825"},
    "Urgent": {"light": "#f8bbd9", "dark": "#ad1457"},
}


def get_possible_tags(theme="light"):
    return [
        {"tag": tag, "color": colors[theme]}
        for tag, colors in TAG_COLORS.items()
    ]


possible_tags = get_possible_tags("light")

# Button color pairs (light/dark theme)
BUTTON_COLORS = {
    "View": {"light": "#228be6", "dark": "#1971c2"},
    "Edit": {"light": "#7950f2", "dark": "#6741d9"},
    "Delete": {"light": "#fa5252", "dark": "#e03131"},
    "Start": {"light": "#40c057", "dark": "#2f9e44"},
    "Info": {"light": "#fab005", "dark": "#f59f00"},
}


def get_button_color(title, theme="light"):
    return BUTTON_COLORS.get(title, {"light": "#868e96", "dark": "#495057"})[theme]


columns = [
    {"title": "Name", "id": "name", "width": 110},
    {"title": "Status", "id": "status", "width": 110},
    {"title": "Skills", "id": "skills", "width": 170},
    {"title": "Button", "id": "button", "width": 80},
    {"title": "Tags", "id": "tags", "width": 150},
    {"title": "Rating", "id": "star", "width": 90},
    {"title": "Date", "id": "date", "width": 100},
    {"title": "Progress", "id": "range", "width": 90},
    {"title": "Links", "id": "links", "width": 90},
    {"title": "Trend", "id": "sparkline", "width": 110},
]

sp1 = generate_sparkline(50)
sp2 = generate_sparkline(30)
sp3 = generate_sparkline(70)
sp4 = generate_sparkline(40)
sp5 = generate_sparkline(60)

data = [
    {
        "name": "Project Alpha",
        "status": {
            "kind": "dropdown-cell",
            "data": {
                "value": "active",
                "options": status_options,
                "allowedValues": [o["value"] for o in status_options],
            },
            "allowOverlay": True,
        },
        "skills": {
            "kind": "multi-select-cell",
            "data": {
                "values": ["python", "rust"],
                "options": skill_options,
                "allowedValues": [o["value"] for o in skill_options],
                "allowDuplicates": False,
                "allowCreation": True,
            },
            "allowOverlay": True,
        },
        "button": {
            "kind": "button-cell",
            "title": "View",
            "backgroundColor": "#228be6",
            "color": "#ffffff",
        },
        "tags": {
            "kind": "tags-cell",
            "tags": ["Bug", "Urgent"],
            "possibleTags": possible_tags,
        },
        "star": {"kind": "star-cell", "rating": 4, "maxRating": 5},
        "date": {
            "kind": "date-picker-cell",
            "date": "2024-01-15",
            "displayDate": "Jan 15",
            "format": "date",
        },
        "range": {
            "kind": "range-cell",
            "value": 75,
            "min": 0,
            "max": 100,
            "label": "75%",
        },
        "links": {
            "kind": "links-cell",
            "links": [
                {"title": "Repo", "href": "https://github.com"},
                {"title": "Docs", "href": "https://docs.example.com"},
            ],
        },
        "sparkline": {
            "kind": "sparkline-cell",
            "values": sp1,
            "displayValues": [str(int(v)) for v in sp1],
            "graphKind": "line",
            "yAxis": [0, 100],
            "color": "#40c057",
        },
    },
    {
        "name": "Project Beta",
        "status": {
            "kind": "dropdown-cell",
            "data": {
                "value": "pending",
                "options": status_options,
                "allowedValues": [o["value"] for o in status_options],
            },
            "allowOverlay": True,
        },
        "skills": {
            "kind": "multi-select-cell",
            "data": {
                "values": ["javascript", "react"],
                "options": skill_options,
                "allowedValues": [o["value"] for o in skill_options],
                "allowDuplicates": False,
                "allowCreation": True,
            },
            "allowOverlay": True,
        },
        "button": {
            "kind": "button-cell",
            "title": "Edit",
            "backgroundColor": "#7950f2",
            "color": "#ffffff",
        },
        "tags": {
            "kind": "tags-cell",
            "tags": ["Feature", "Enhancement"],
            "possibleTags": possible_tags,
        },
        "star": {"kind": "star-cell", "rating": 5, "maxRating": 5},
        "date": {
            "kind": "date-picker-cell",
            "date": "2024-02-20",
            "displayDate": "Feb 20",
            "format": "date",
        },
        "range": {
            "kind": "range-cell",
            "value": 45,
            "min": 0,
            "max": 100,
            "label": "45%",
        },
        "links": {
            "kind": "links-cell",
            "links": [{"title": "Demo", "href": "https://demo.example.com"}],
        },
        "sparkline": {
            "kind": "sparkline-cell",
            "values": sp2,
            "displayValues": [str(int(v)) for v in sp2],
            "graphKind": "area",
            "yAxis": [0, 100],
            "color": "#228be6",
        },
    },
    {
        "name": "Project Gamma",
        "status": {
            "kind": "dropdown-cell",
            "data": {
                "value": "review",
                "options": status_options,
                "allowedValues": [o["value"] for o in status_options],
            },
            "allowOverlay": True,
        },
        "skills": {
            "kind": "multi-select-cell",
            "data": {
                "values": ["python", "sql", "go"],
                "options": skill_options,
                "allowedValues": [o["value"] for o in skill_options],
                "allowDuplicates": False,
                "allowCreation": True,
            },
            "allowOverlay": True,
        },
        "button": {
            "kind": "button-cell",
            "title": "Delete",
            "backgroundColor": "#fa5252",
            "color": "#ffffff",
        },
        "tags": {
            "kind": "tags-cell",
            "tags": ["Docs"],
            "possibleTags": possible_tags,
        },
        "star": {"kind": "star-cell", "rating": 3, "maxRating": 5},
        "date": {
            "kind": "date-picker-cell",
            "date": "2024-03-10",
            "displayDate": "Mar 10",
            "format": "date",
        },
        "range": {
            "kind": "range-cell",
            "value": 90,
            "min": 0,
            "max": 100,
            "label": "90%",
        },
        "links": {
            "kind": "links-cell",
            "links": [
                {"title": "API", "href": "https://api.example.com"},
            ],
        },
        "sparkline": {
            "kind": "sparkline-cell",
            "values": sp3,
            "displayValues": [str(int(v)) for v in sp3],
            "graphKind": "bar",
            "yAxis": [0, 100],
            "color": "#fa5252",
        },
    },
    {
        "name": "Project Delta",
        "status": {
            "kind": "dropdown-cell",
            "data": {
                "value": "complete",
                "options": status_options,
                "allowedValues": [o["value"] for o in status_options],
            },
            "allowOverlay": True,
        },
        "skills": {
            "kind": "multi-select-cell",
            "data": {
                "values": ["go"],
                "options": skill_options,
                "allowedValues": [o["value"] for o in skill_options],
                "allowDuplicates": False,
                "allowCreation": True,
            },
            "allowOverlay": True,
        },
        "button": {
            "kind": "button-cell",
            "title": "Start",
            "backgroundColor": "#40c057",
            "color": "#ffffff",
        },
        "tags": {
            "kind": "tags-cell",
            "tags": ["Feature"],
            "possibleTags": possible_tags,
        },
        "star": {"kind": "star-cell", "rating": 2, "maxRating": 5},
        "date": {
            "kind": "date-picker-cell",
            "date": None,
            "displayDate": "",
            "format": "date",
        },
        "range": {
            "kind": "range-cell",
            "value": 20,
            "min": 0,
            "max": 100,
            "label": "20%",
        },
        "links": {
            "kind": "links-cell",
            "links": [],
        },
        "sparkline": {
            "kind": "sparkline-cell",
            "values": sp4,
            "displayValues": [str(int(v)) for v in sp4],
            "graphKind": "line",
            "yAxis": [0, 100],
            "color": "#7950f2",
        },
    },
    {
        "name": "Project Epsilon",
        "status": {
            "kind": "dropdown-cell",
            "data": {
                "value": "archived",
                "options": status_options,
                "allowedValues": [o["value"] for o in status_options],
            },
            "allowOverlay": True,
        },
        "skills": {
            "kind": "multi-select-cell",
            "data": {
                "values": ["python", "javascript", "sql"],
                "options": skill_options,
                "allowedValues": [o["value"] for o in skill_options],
                "allowDuplicates": False,
                "allowCreation": True,
            },
            "allowOverlay": True,
        },
        "button": {
            "kind": "button-cell",
            "title": "Info",
            "backgroundColor": "#fab005",
            "color": "#000000",
        },
        "tags": {
            "kind": "tags-cell",
            "tags": ["Bug", "Enhancement", "Docs"],
            "possibleTags": possible_tags,
        },
        "star": {"kind": "star-cell", "rating": 4, "maxRating": 5},
        "date": {
            "kind": "date-picker-cell",
            "date": "2024-05-01",
            "displayDate": "May 1",
            "format": "date",
        },
        "range": {
            "kind": "range-cell",
            "value": 60,
            "min": 0,
            "max": 100,
            "label": "60%",
        },
        "links": {
            "kind": "links-cell",
            "links": [
                {"title": "Code", "href": "https://github.com"},
                {"title": "Wiki", "href": "https://wiki.example.com"},
            ],
        },
        "sparkline": {
            "kind": "sparkline-cell",
            "values": sp5,
            "displayValues": [str(int(v)) for v in sp5],
            "graphKind": "area",
            "yAxis": [0, 100],
            "color": "#fab005",
        },
    },
]

component = dmc.Stack(
    [
        dgg.GlideGrid(
            id={"type": "glide-grid", "index": "cells-advanced"},
            columns=columns,
            data=data,
            height=260,
            rowHeight=44,
            sortable=True,
        ),
        dmc.Text(
            id="advanced-output",
            size="sm",
            c="dimmed",
            children="Click buttons, edit tags/ratings, or select dates",
        ),
    ]
)


@callback(
    Output("advanced-output", "children"),
    Input({"type": "glide-grid", "index": "cells-advanced"}, "buttonClicked"),
    Input({"type": "glide-grid", "index": "cells-advanced"}, "linkClicked"),
    Input({"type": "glide-grid", "index": "cells-advanced"}, "cellEdited"),
    prevent_initial_call=True,
)
def handle_interactions(button, link, edit):
    if button:
        return f"Button '{button.get('title')}' clicked (row {button.get('row')})"
    if link:
        return f"Link '{link.get('title')}' clicked → {link.get('href')}"
    if edit:
        return f"Cell edited at row {edit.get('row')}, col {edit.get('col')}"
    return "Click buttons, edit tags/ratings, or select dates"


@callback(
    Output({"type": "glide-grid", "index": "cells-advanced"}, "data"),
    Input("color-scheme-storage", "data"),
    State({"type": "glide-grid", "index": "cells-advanced"}, "data"),
)
def update_advanced_colors(color_scheme, current_data):
    """Update dropdown, multi-select, tags, and button colors when theme changes."""
    if not current_data:
        return current_data

    theme = color_scheme if color_scheme in ("light", "dark") else "light"
    new_status_options = get_status_options(theme)
    new_skill_options = get_skill_options(theme)
    new_possible_tags = get_possible_tags(theme)

    updated_data = copy.deepcopy(current_data)

    for row in updated_data:
        if isinstance(row.get("status"), dict) and row["status"].get("kind") == "dropdown-cell":
            row["status"]["data"]["options"] = new_status_options
        if isinstance(row.get("skills"), dict) and row["skills"].get("kind") == "multi-select-cell":
            row["skills"]["data"]["options"] = new_skill_options
        if isinstance(row.get("tags"), dict) and row["tags"].get("kind") == "tags-cell":
            row["tags"]["possibleTags"] = new_possible_tags
        if isinstance(row.get("button"), dict) and row["button"].get("kind") == "button-cell":
            title = row["button"].get("title", "")
            row["button"]["backgroundColor"] = get_button_color(title, theme)

    return updated_data
```

    :defaultExpanded: false
    :withExpandedButton: true


### Merged Cells

Span cells across multiple columns using the `span` property. Set `span: [startCol, endCol]` on the cell object and use `None` for spanned columns.

.. exec::examples.reference.cells.merged
    :code: false


```python
# File: examples/reference/cells/merged.py

import dash_glide_grid as dgg

columns = [
    {"title": "Category", "id": "category", "width": 180},
    {"title": "Q1", "id": "q1", "width": 100},
    {"title": "Q2", "id": "q2", "width": 100},
    {"title": "Q3", "id": "q3", "width": 100},
    {"title": "Q4", "id": "q4", "width": 100},
]

data = [
    {
        "category": {"kind": "text", "data": "2024 Revenue Summary", "span": [0, 4]},
        "q1": None,
        "q2": None,
        "q3": None,
        "q4": None,
    },
    {
        "category": "Product Sales",
        "q1": 125000,
        "q2": 142000,
        "q3": 138000,
        "q4": 165000,
    },
    {
        "category": "Services",
        "q1": 45000,
        "q2": 52000,
        "q3": 48000,
        "q4": 61000,
    },
    {
        "category": {"kind": "text", "data": "Regional Breakdown", "span": [0, 4]},
        "q1": None,
        "q2": None,
        "q3": None,
        "q4": None,
    },
    {
        "category": "North America",
        "q1": 98000,
        "q2": 110000,
        "q3": 105000,
        "q4": 128000,
    },
    {
        "category": "Europe",
        "q1": 72000,
        "q2": 84000,
        "q3": 81000,
        "q4": 98000,
    },
]

component = dgg.GlideGrid(
    id={"type": "glide-grid", "index": "cells-merged"},
    columns=columns,
    data=data,
    height=260,
)
```

    :defaultExpanded: false
    :withExpandedButton: true

### Cell Theming

Override colors for individual cells using `themeOverride`. Useful for conditional formatting like status indicators.

.. exec::examples.reference.cells.theming
    :code: false


```python
# File: examples/reference/cells/theming.py

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

columns = [
    {"title": "Metric", "id": "metric", "width": 150},
    {"title": "Value", "id": "value", "width": 120},
    {"title": "Status", "id": "status", "width": 120},
    {"title": "Trend", "id": "trend", "width": 100},
]

# Theme-aware color palettes
COLORS = {
    "light": {
        "success": {"bgCell": "rgba(220, 252, 231, 1)", "textDark": "rgba(22, 101, 52, 1)"},
        "warning": {"bgCell": "rgba(254, 243, 199, 1)", "textDark": "rgba(146, 64, 14, 1)"},
        "error": {"bgCell": "rgba(254, 226, 226, 1)", "textDark": "rgba(153, 27, 27, 1)"},
        "info": {"bgCell": "rgba(219, 234, 254, 1)", "textDark": "rgba(30, 64, 175, 1)"},
    },
    "dark": {
        "success": {"bgCell": "rgba(20, 83, 45, 1)", "textDark": "rgba(134, 239, 172, 1)"},
        "warning": {"bgCell": "rgba(120, 53, 15, 1)", "textDark": "rgba(253, 224, 71, 1)"},
        "error": {"bgCell": "rgba(127, 29, 29, 1)", "textDark": "rgba(252, 165, 165, 1)"},
        "info": {"bgCell": "rgba(30, 58, 138, 1)", "textDark": "rgba(147, 197, 253, 1)"},
    },
}


def get_themed_data(is_dark):
    """Generate data with theme-appropriate cell colors."""
    c = COLORS["dark"] if is_dark else COLORS["light"]
    return [
        {
            "metric": "Revenue",
            "value": {"kind": "text", "data": "$1.2M", "themeOverride": c["success"]},
            "status": {"kind": "text", "data": "On Track", "themeOverride": c["success"]},
            "trend": "+12%",
        },
        {
            "metric": "Expenses",
            "value": {"kind": "text", "data": "$890K", "themeOverride": c["warning"]},
            "status": {"kind": "text", "data": "Warning", "themeOverride": c["warning"]},
            "trend": "+8%",
        },
        {
            "metric": "Churn Rate",
            "value": {"kind": "text", "data": "4.2%", "themeOverride": c["error"]},
            "status": {"kind": "text", "data": "Critical", "themeOverride": c["error"]},
            "trend": "+1.5%",
        },
        {
            "metric": "NPS Score",
            "value": {"kind": "text", "data": "72", "themeOverride": c["info"]},
            "status": {"kind": "text", "data": "Excellent", "themeOverride": c["info"]},
            "trend": "+5",
        },
    ]


component = dgg.GlideGrid(
    id={"type": "glide-grid", "index": "cells-theming"},
    columns=columns,
    data=get_themed_data(False),
    height=200,
)


@callback(
    Output({"type": "glide-grid", "index": "cells-theming"}, "data"),
    Input("color-scheme-storage", "data"),
)
def update_cell_theming(color_scheme):
    """Update cell theme colors based on app color scheme."""
    return get_themed_data(color_scheme == "dark")
```

    :defaultExpanded: false
    :withExpandedButton: true

### Read-Only Cells

Make specific cells non-editable with `readonly: True` while keeping other cells editable.

.. exec::examples.reference.cells.readonly
    :code: false


```python
# File: examples/reference/cells/readonly.py

import dash_glide_grid as dgg

columns = [
    {"title": "ID", "id": "id", "width": 100},
    {"title": "Name", "id": "name", "width": 150},
    {"title": "Email", "id": "email", "width": 200},
    {"title": "Created", "id": "created", "width": 120},
]

data = [
    {
        "id": {"kind": "text", "data": "USR-001", "readonly": True},
        "name": "Alice Johnson",
        "email": "alice@example.com",
        "created": {"kind": "text", "data": "2024-01-15", "readonly": True},
    },
    {
        "id": {"kind": "text", "data": "USR-002", "readonly": True},
        "name": "Bob Smith",
        "email": "bob@example.com",
        "created": {"kind": "text", "data": "2024-02-20", "readonly": True},
    },
    {
        "id": {"kind": "text", "data": "USR-003", "readonly": True},
        "name": "Carol White",
        "email": "carol@example.com",
        "created": {"kind": "text", "data": "2024-03-10", "readonly": True},
    },
    {
        "id": {"kind": "text", "data": "USR-004", "readonly": True},
        "name": "David Brown",
        "email": "david@example.com",
        "created": {"kind": "text", "data": "2024-04-05", "readonly": True},
    },
]

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

    :defaultExpanded: false
    :withExpandedButton: true

### Text Wrapping

Enable multi-line text with `allowWrapping: True` on text cells. Pair with a taller `rowHeight` to display wrapped content.

.. exec::examples.reference.cells.wrapping
    :code: false


```python
# File: examples/reference/cells/wrapping.py

import dash_glide_grid as dgg

columns = [
    {"title": "Product", "id": "product", "width": 140},
    {"title": "Description", "id": "description", "width": 280},
    {"title": "Notes", "id": "notes", "width": 200},
    {"title": "Status", "id": "status", "width": 80},
]

data = [
    {
        "product": "Wireless Headphones",
        "description": {
            "kind": "text",
            "data": "Premium over-ear wireless headphones with active noise cancellation, 30-hour battery life, and hi-res audio support.",
            "allowWrapping": True,
        },
        "notes": {
            "kind": "text",
            "data": "Ships within 2-3 business days. 30-day return policy included.",
            "allowWrapping": True,
            "themeOverride": {"baseFontStyle": "12px"},
        },
        "status": "Active",
    },
    {
        "product": "Mechanical Keyboard",
        "description": {
            "kind": "text",
            "data": "Full-size mechanical keyboard with Cherry MX Blue switches, RGB per-key backlighting, and aluminum frame.",
            "allowWrapping": True,
        },
        "notes": {
            "kind": "text",
            "data": "Available in Black, White, and Space Gray. Custom keycaps sold separately.",
            "allowWrapping": True,
            "themeOverride": {"baseFontStyle": "12px"},
        },
        "status": "Active",
    },
    {
        "product": "4K Monitor",
        "description": {
            "kind": "text",
            "data": "27-inch 4K UHD monitor with IPS panel, 99% sRGB color accuracy, and USB-C power delivery up to 65W.",
            "allowWrapping": True,
        },
        "notes": {
            "kind": "text",
            "data": "Requires DisplayPort 1.4 or HDMI 2.0 for 4K@60Hz.",
            "allowWrapping": True,
            "themeOverride": {"baseFontStyle": "12px"},
        },
        "status": "Pending",
    },
    {
        "product": "USB-C Hub",
        "description": {
            "kind": "text",
            "data": "7-in-1 USB-C hub with 4K HDMI, 100W power delivery, SD card readers, and Gigabit Ethernet.",
            "allowWrapping": True,
        },
        "notes": {
            "kind": "text",
            "data": "Not compatible with Nintendo Switch. Check laptop compatibility.",
            "allowWrapping": True,
            "themeOverride": {"baseFontStyle": "12px"},
        },
        "status": "Active",
    },
]

component = dgg.GlideGrid(
    id={"type": "glide-grid", "index": "cells-wrapping"},
    columns=columns,
    data=data,
    height=260,
    rowHeight=60,
    columnResize=True,
)
```

    :defaultExpanded: false
    :withExpandedButton: true


### Props Reference

#### Cell Object Properties

Properties available when using explicit cell objects instead of simple values.

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `kind` (required) | string | - | Cell type identifier |
| `data` (required) | any | - | Cell value (type depends on kind) |
| `displayData` | string | - | Override display text |
| `copyData` | string | - | Text copied to clipboard on Ctrl+C |
| `allowOverlay` | boolean | True | Enable editing overlay |
| `readonly` | boolean | False | Make cell non-editable |
| `span` | [number, number] | - | Column span range `[startCol, endCol]` |
| `themeOverride` | dict | - | Cell-specific theme colors |
| `contentAlign` | string | 'left' | Text alignment: 'left', 'center', 'right' |
| `allowWrapping` | boolean | False | Enable multi-line text wrapping |

#### Theme Override Properties

| Property | Type | Description |
|----------|------|-------------|
| `bgCell` | string | Cell background color |
| `textDark` | string | Primary text color |
| `textMedium` | string | Secondary text color |
| `textLight` | string | Tertiary text color |
| `accentColor` | string | Accent/highlight color |
| `baseFontStyle` | string | Font style (e.g., '12px') |

#### Cell Callbacks

| Callback | Triggered By | Payload |
|----------|--------------|---------|
| `buttonClicked` | Button cell click | `{row, col, title}` |
| `linkClicked` | Links cell click | `{row, col, title, href}` |
| `treeNodeToggled` | Tree view expand/collapse | `{row, isOpen}` |
| `cellEdited` | Any cell edit | `{row, col, value}` |

---

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