Inline Editing

Define DMC editor components directly on editable columns and preview edited records.

Inline Editing

Define DMC editor components directly on editable columns and preview edited records.

Source: usage.py::build_inline_edit_code().

editable_table = (
    dmdt.DataTable(
        id="inline-edit-table",
        data=INLINE_EDIT_RECORDS,
        columns=[
            {"accessor": "name", "editable": True, "editor": dmc.TextInput(label="Name")},
            {"accessor": "category", "editable": True, "editor": dmc.RadioGroup(
                label="Category",
                children=dmc.Stack([
                    dmc.Radio(label="Draft", value="Draft"),
                    dmc.Radio(label="In Review", value="Review"),
                    dmc.Radio(label="Approved", value="Approved"),
                ], gap=6),
            ), "render": dmc.Badge("{category}", variant="light", color="blue")},
            {"accessor": "tags", "editable": True, "editor": dmc.MultiSelect(label="Tags", data=INLINE_EDIT_TAG_OPTIONS, searchable=True, comboboxProps={"withinPortal": False})},
            {"accessor": "reviewDate", "presentation": "date", "editable": True, "editor": dmc.DateInput(label="Review date", valueFormat="YYYY-MM-DD")},
            {"accessor": "adjustment", "textAlign": "right", "editable": True, "editor": dmc.NumberInput(label="Adjustment", min=-2, max=6, step=1, hideControls=True)},
        ],
        paginationMode="none",
    )
    .update_layout(radius="lg", withTableBorder=True, textSelectionDisabled=True)
    .add_interactivity(
        cellDoubleClick=True,
        cellSelector=INLINE_EDITABLE_ACCESSORS,
    )
)

@callback(
    Output("inline-edit-records-output", "children"),
    Input("inline-edit-table", "data"),
)
def preview_records(rows):
    return json.dumps(rows or [], indent=2)