Column Properties

Configure headers, widths, footers, responsive visibility, ellipsis, and custom cell presentation.

Column Properties

Configure headers, widths, footers, responsive visibility, ellipsis, and custom cell presentation.

Source: usage.py::build_column_properties_code().

table = (
    dmdt.DataTable(
        id="column-properties-table",
        data=EMPLOYEES[:5],
        columns=[
            {"accessor": "name"},
            {"accessor": "role"},
            {"accessor": "bio"},
            {"accessor": "salary"},
            {"accessor": "deliveryScore"},
            {"accessor": "trend"},
            {"accessor": "status"},
            {"accessor": "actions"},
        ],
        paginationMode="none",
    )
    .update_layout(radius="lg", withTableBorder=True, withColumnBorders=True, striped=True)
    .update_columns(
        selector="name",
        title="Employee",
        width=180,
        cellsStyle={"fontWeight": 600},
        footer="5 shown",
        footerStyle={"fontWeight": 700},
    )
    .update_columns(
        selector="bio",
        title="Mission statement",
        width=320,
        ellipsis=True,
        visibleMediaQuery="(min-width: 62em)",
        titleStyle={"letterSpacing": "0.08em", "textTransform": "uppercase"},
        cellsStyle={"color": "var(--mantine-color-dimmed)"},
        footer="Responsive + ellipsis",
        footerStyle={"color": "var(--mantine-color-dimmed)"},
    )
    .update_columns(
        selector="salary",
        title="Annual salary",
        presentation="currency",
        currency="USD",
        textAlign="right",
        width=140,
        cellsStyle={"fontVariantNumeric": "tabular-nums"},
        footer="$116,900 avg",
        footerStyle={"color": "var(--mantine-color-blue-6)", "fontWeight": 700},
    )
    .update_columns(
        selector=["role", "deliveryScore", "trend"],
        visibleMediaQuery="(min-width: 48em)",
    )
    .update_columns(
        selector="deliveryScore",
        title="Delivery",
        presentation="progress",
        width=140,
    )
    .update_columns(
        selector="trend",
        title="6-week trend",
        width=150,
        render=dmc.Sparkline(
            data="{trend}",
            color="{statusColor}",
            w=120,
            h=32,
        ),
        footer="Sparkline render",
    )
    .update_columns(
        selector="status",
        presentation="badge",
        badgeColorAccessor="statusColor",
        width=120,
        cellsStyle={"whiteSpace": "nowrap"},
    )
    .update_columns(
        selector="actions",
        title="Actions",
        width=190,
        render=dmc.ActionIconGroup(
            [
                dmc.ActionIcon(
                    DashIconify(icon="tabler:device-floppy", width=16),
                    **{"aria-label": "Save {name}"},
                    color="green",
                    n_clicks=0,
                    radius="xl",
                    size="sm",
                    variant="light",
                    id={"action": "save-row", "recordId": "{id}"},
                ),
                dmc.ActionIcon(
                    DashIconify(icon="tabler:pencil", width=16),
                    **{"aria-label": "Edit {name}"},
                    color="blue",
                    n_clicks=0,
                    radius="xl",
                    size="sm",
                    variant="light",
                    id={"action": "edit-row", "recordId": "{id}"},
                ),
                dmc.ActionIcon(
                    DashIconify(icon="tabler:trash", width=16),
                    **{"aria-label": "Delete {name}"},
                    color="red",
                    n_clicks=0,
                    radius="xl",
                    size="sm",
                    variant="light",
                    id={"action": "delete-row", "recordId": "{id}"},
                ),
            ],
        ),
        cellsStyle={"paddingBlock": "0.35rem"},
    )
)