# Columns

> Column definitions, freezing, grouping, resizing, and moving columns.

---

.. llms_copy::references/columns

.. toc::

### Overview

Columns define the structure and behavior of your data grid. Each column requires a `title` and can include optional properties like `id`, `width`, and `group`.

### Basic Usage

Define columns as a list of dictionaries. Each column needs at minimum a `title` property.

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


```python
# File: examples/reference/columns/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": "columns-basic"},
    columns=columns,
    data=data,
    height=200,
)
```

    :defaultExpanded: true
    :withExpandedButton: true

### Freezing Columns

Use `freezeColumns` to pin columns to the left side of the grid. Frozen columns remain visible while scrolling horizontally.

.. exec::examples.reference.columns.freeze
    :code: false


```python
# File: examples/reference/columns/freeze.py

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

columns = [
    {"title": "ID", "id": "id", "width": 60},
    {"title": "Name", "id": "name", "width": 140},
    {"title": "Email", "id": "email", "width": 200},
    {"title": "Department", "id": "department", "width": 120},
    {"title": "Role", "id": "role", "width": 120},
    {"title": "Location", "id": "location", "width": 120},
    {"title": "Start Date", "id": "start_date", "width": 110},
    {"title": "Salary", "id": "salary", "width": 100},
    {"title": "Status", "id": "status", "width": 100},
]

data = [
    {"id": 1, "name": "Alice Johnson", "email": "alice@example.com", "department": "Engineering", "role": "Senior Dev", "location": "New York", "start_date": "2021-03-15", "salary": 95000, "status": "Active"},
    {"id": 2, "name": "Bob Smith", "email": "bob@example.com", "department": "Design", "role": "Lead Designer", "location": "San Francisco", "start_date": "2020-07-01", "salary": 88000, "status": "Active"},
    {"id": 3, "name": "Carol White", "email": "carol@example.com", "department": "Marketing", "role": "Manager", "location": "Chicago", "start_date": "2019-11-20", "salary": 92000, "status": "Away"},
    {"id": 4, "name": "David Brown", "email": "david@example.com", "department": "Engineering", "role": "Developer", "location": "Austin", "start_date": "2022-01-10", "salary": 78000, "status": "Active"},
    {"id": 5, "name": "Eva Martinez", "email": "eva@example.com", "department": "Sales", "role": "Account Exec", "location": "Boston", "start_date": "2021-09-05", "salary": 72000, "status": "Active"},
]

component = dmc.Stack([
    dmc.NumberInput(
        id="freeze-columns-input",
        label="Freeze Columns",
        description="Number of columns to freeze on the left",
        value=1,
        min=0,
        max=4,
        w=200,
    ),
    dgg.GlideGrid(
        id={"type": "glide-grid", "index": "columns-freeze"},
        columns=columns,
        data=data,
        height=250,
        freezeColumns=1,
    ),
])


@callback(
    Output({"type": "glide-grid", "index": "columns-freeze"}, "freezeColumns"),
    Input("freeze-columns-input", "value"),
)
def update_freeze_columns(value):
    return value or 0
```

    :defaultExpanded: false
    :withExpandedButton: true

### Column Grouping

Group related columns under a shared header by setting the `group` property on columns. Use `groupHeaderHeight` to control the group header row height.

.. exec::examples.reference.columns.grouping
    :code: false


```python
# File: examples/reference/columns/grouping.py

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

columns = [
    {"title": "First Name", "id": "first_name", "width": 120, "group": "Name"},
    {"title": "Last Name", "id": "last_name", "width": 120, "group": "Name"},
    {"title": "Email", "id": "email", "width": 200, "group": "Contact"},
    {"title": "Phone", "id": "phone", "width": 130, "group": "Contact"},
    {"title": "Department", "id": "department", "width": 120},
    {"title": "Status", "id": "status", "width": 100},
]

data = [
    {"first_name": "Alice", "last_name": "Johnson", "email": "alice@example.com", "phone": "555-0101", "department": "Engineering", "status": "Active"},
    {"first_name": "Bob", "last_name": "Smith", "email": "bob@example.com", "phone": "555-0102", "department": "Design", "status": "Active"},
    {"first_name": "Carol", "last_name": "White", "email": "carol@example.com", "phone": "555-0103", "department": "Marketing", "status": "Away"},
    {"first_name": "David", "last_name": "Brown", "email": "david@example.com", "phone": "555-0104", "department": "Sales", "status": "Active"},
]

component = dmc.Stack([
    dmc.NumberInput(
        id="group-header-height-input",
        label="Group Header Height",
        description="Height of the group header row in pixels",
        value=32,
        min=20,
        max=60,
        step=4,
        w=200,
    ),
    dgg.GlideGrid(
        id={"type": "glide-grid", "index": "columns-grouping"},
        columns=columns,
        data=data,
        height=250,
        groupHeaderHeight=32,
    ),
])


@callback(
    Output({"type": "glide-grid", "index": "columns-grouping"}, "groupHeaderHeight"),
    Input("group-header-height-input", "value"),
)
def update_group_header_height(value):
    return value or 32
```

    :defaultExpanded: false
    :withExpandedButton: true

### Column Sizing & Resizing

Control column width constraints with `minColumnWidth` and `maxColumnWidth`. Enable or disable user resizing with `columnResize`. Track width changes with the `columnWidths` callback.

.. exec::examples.reference.columns.sizing
    :code: false


```python
# File: examples/reference/columns/sizing.py

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

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

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

component = dmc.Stack([
    dmc.Group([
        dmc.NumberInput(
            id="min-column-width-input",
            label="Min Width",
            description="Minimum column width",
            value=50,
            min=20,
            max=200,
            w=150,
        ),
        dmc.NumberInput(
            id="max-column-width-input",
            label="Max Width",
            description="Maximum column width",
            value=500,
            min=100,
            max=800,
            w=150,
        ),
        dmc.Switch(
            id="column-resize-switch",
            label="Allow Resize",
            checked=True,
        ),
    ]),
    dgg.GlideGrid(
        id={"type": "glide-grid", "index": "columns-sizing"},
        columns=columns,
        data=data,
        height=250,
        minColumnWidth=50,
        maxColumnWidth=500,
        columnResize=True,
    ),
    dmc.Text(id="column-widths-output", size="sm", c="dimmed"),
])


@callback(
    Output({"type": "glide-grid", "index": "columns-sizing"}, "minColumnWidth"),
    Input("min-column-width-input", "value"),
)
def update_min_width(value):
    return value or 50


@callback(
    Output({"type": "glide-grid", "index": "columns-sizing"}, "maxColumnWidth"),
    Input("max-column-width-input", "value"),
)
def update_max_width(value):
    return value or 500


@callback(
    Output({"type": "glide-grid", "index": "columns-sizing"}, "columnResize"),
    Input("column-resize-switch", "checked"),
)
def update_resize(checked):
    return checked


@callback(
    Output("column-widths-output", "children"),
    Input({"type": "glide-grid", "index": "columns-sizing"}, "columnWidths"),
)
def display_column_widths(widths):
    if widths:
        return f"Current widths: {widths}"
    return "Drag column edges to resize"
```

    :defaultExpanded: false
    :withExpandedButton: true

### Column Moving

Allow users to drag and reorder columns with `columnMovable`. Track column moves with the `columnMoved` callback.

.. exec::examples.reference.columns.moving
    :code: false


```python
# File: examples/reference/columns/moving.py

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

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

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

component = dmc.Stack([
    dmc.Switch(
        id="column-movable-switch",
        label="Allow Column Moving",
        checked=True,
    ),
    dgg.GlideGrid(
        id={"type": "glide-grid", "index": "columns-moving"},
        columns=columns,
        data=data,
        height=250,
        columnMovable=True,
    ),
    dmc.Text(id="column-moved-output", size="sm", c="dimmed"),
])


@callback(
    Output({"type": "glide-grid", "index": "columns-moving"}, "columnMovable"),
    Input("column-movable-switch", "checked"),
)
def update_movable(checked):
    return checked


@callback(
    Output({"type": "glide-grid", "index": "columns-moving"}, "columns"),
    Output("column-moved-output", "children"),
    Input({"type": "glide-grid", "index": "columns-moving"}, "columnMoved"),
    State({"type": "glide-grid", "index": "columns-moving"}, "columns"),
    prevent_initial_call=True,
)
def display_column_moved(moved, current_columns):
    if not moved:
        return current_columns, "Drag column headers to reorder"

    start_idx = moved["startIndex"]
    end_idx = moved["endIndex"]

    # Reorder columns
    new_columns = current_columns.copy()
    col = new_columns.pop(start_idx)
    new_columns.insert(end_idx, col)

    return new_columns, f"Column '{col['title']}' moved from index {start_idx} to {end_idx}"
```

    :defaultExpanded: false
    :withExpandedButton: true

### Column Selection

Control how columns can be selected with `columnSelect`. Choose between `none`, `single`, or `multi` selection modes. Use `columnSelectionMode` to control whether modifier keys (Ctrl/Cmd) are required for multi-selection.

.. exec::examples.reference.columns.selection
    :code: false


```python
# File: examples/reference/columns/selection.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": "Email", "id": "email", "width": 200},
    {"title": "Role", "id": "role", "width": 120},
    {"title": "Department", "id": "department", "width": 130},
    {"title": "Status", "id": "status", "width": 100},
]

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

component = dmc.Stack([
    dmc.Group([
        dmc.Select(
            id="column-select-mode",
            label="Column Select",
            data=[
                {"value": "none", "label": "None"},
                {"value": "single", "label": "Single"},
                {"value": "multi", "label": "Multi"},
            ],
            value="multi",
            w=120,
        ),
        dmc.Select(
            id="column-selection-mode",
            label="Selection Mode",
            data=[
                {"value": "auto", "label": "Auto (Ctrl/Cmd)"},
                {"value": "multi", "label": "Multi (No modifier)"},
            ],
            value="auto",
            w=160,
        ),
    ]),
    dgg.GlideGrid(
        id={"type": "glide-grid", "index": "columns-selection"},
        columns=columns,
        data=data,
        height=250,
        columnSelect="multi",
        columnSelectionMode="auto",
    ),
    dmc.Text(id="column-selection-output", size="sm", c="dimmed"),
])


@callback(
    Output({"type": "glide-grid", "index": "columns-selection"}, "columnSelect"),
    Input("column-select-mode", "value"),
)
def update_column_select(value):
    return value or "none"


@callback(
    Output({"type": "glide-grid", "index": "columns-selection"}, "columnSelectionMode"),
    Input("column-selection-mode", "value"),
)
def update_column_selection_mode(value):
    return value


@callback(
    Output("column-selection-output", "children"),
    Input({"type": "glide-grid", "index": "columns-selection"}, "selectedColumns"),
)
def display_selected_columns(selected):
    if selected:
        return f"Selected columns: {selected}"
    return "Click column headers to select"
```

    :defaultExpanded: false
    :withExpandedButton: true


### Props Reference

#### Column Definition Properties

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

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `title` (required) | string | - | Display name in header |
| `id` | string | title | Unique identifier (defaults to title) |
| `width` | number | auto | Column width in pixels |
| `icon` | string | - | Icon to display in header |
| `overlayIcon` | string | - | Overlay icon for header |
| `hasMenu` | boolean | - | Show menu button in header |
| `group` | string | - | Group name for column grouping |
| `grow` | number | - | Weight for column to grow and fill available space |
| `style` | string | - | Column style: 'normal' or 'highlight' |
| `themeOverride` | dict | - | Column-specific theme overrides |

#### Grid Column Props

Properties for the `GlideGrid` component that control column behavior.

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `freezeColumns` | number | - | Number of columns to freeze on left |
| `fixedShadowX` | boolean | True | Show shadow behind frozen columns |
| `columnResize` | boolean | - | Allow column resizing |
| `columnMovable` | boolean | - | Allow column reordering |
| `columnSelect` | string | 'multi' | Column selection: 'none', 'single', or 'multi' |
| `columnSelectionMode` | string | 'auto' | Selection behavior: 'auto' (Ctrl/Cmd to add) or 'multi' (no modifier) |
| `minColumnWidth` | number | - | Minimum column width when resizing (min: 50) |
| `maxColumnWidth` | number | 500 | Maximum column width when resizing |
| `maxColumnAutoWidth` | number | maxColumnWidth | Maximum width for auto-sized columns |
| `groupHeaderHeight` | number | headerHeight | Height of group header row in pixels |

#### Column Callback Props

| Property | Type | Description |
|----------|------|-------------|
| `columnWidths` | dict | Current widths of all columns (read-only) |
| `columnMoved` | dict | Info about last column move: `{startIndex, endIndex}` |
| `selectedColumns` | list | Currently selected column indices |

---

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