Adobe Commerce 2.3 reached end of support in September 2022.

OnOffColumn component

The OnOffColumn component is a decorator for MultiselectColumn. It displays toggle switch elements instead of checkboxes.

Configuration options

Option Description Type Default Value
component The path to the component’s .js file in terms of RequireJS. String Magento_Ui/js/grid/columns/onoff
bodyTmpl Path to the template that is used to render a column’s field in the table’s body. String ui/grid/cells/onoff
fieldClass Additional CSS classes added to the column’s field elements. {
[name: string]: boolean
}
{
admin__scope-old': true,
'data-grid-onoff-cell': true,
'data-grid-checkbox-cell': false
}
headerTmpl Path to the .html template for the column’s header. String ui/grid/columns/onoff

Source files

Extends MultiselectColumn:

Examples

Integrate the OnOffColumn component with the Listing component

This example integrates the OnOffColumn component with the Listing component:

1
2
3
4
5
6
7
8
9
10
11
<listing>
    ...
    <columns>
        ...
        <column name="on_off_column_example_1" component="Magento_Ui/js/grid/columns/onoff">
            <settings>
                <dataType>select</dataType>
            </settings>
        </column>
    </columns>
</listing>

Result

OnOffColumn Component example