Adobe Commerce 2.3 reached end of support in September 2022.

SelectColumn component

The SelectColumn component receives an array of values and displays the column with corresponding labels. The value-label correspondence is set in the component’s configuration.

Configuration options

Option Description Type Default
component The path to the component’s .js file in terms of RequireJS. String Magento_Ui/js/grid/columns/select
filter Reference to one of the available filter types defined in the Filters component. If the value represents an object containing the filterType field, this object is considered as an extension of the referenced filter element. If there is no such field in the value object, it is considered as a definition of a custom filter element. String | Object -
label The column label displayed in the header. String ''
options An array of objects used to display a field’s content by matching the associated record’s value with the value of one of the elements provided in options. Array []
visible Initial component’s visibility. When set to false, the display: none CSS style is added to the component’s DOM block. Boolean true

Option interface

Option Description Type Required
value Option’s identifier or an array of options. String | Number | Array<Option> Required
label Label to be displayed in a column’s field. String Required

Source files

Extends Column:

Examples

Integrate the SelectColumn component with the Listing component

This is an example of how the SelectColumn component integrates with the Listing component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<listing>
    <listingToolbar name="listing_top">
        <filters name="listing_filters"/>
    </listingToolbar>
    <columns>
        <column name="select_column_example" component="Magento_Ui/js/grid/columns/select">
            <settings>
                <filter>select</filter>
                <dataType>select</dataType>
                <label translate="true">Select Column</label>
                <visible>true</visible>
                <options>
                    <option name="0" xsi:type="array">
                        <item name="value" xsi:type="number">1</item>
                        <item name="label" xsi:type="string" translate="true">Option #1</item>
                    </option>
                    <option name="1" xsi:type="array">
                        <item name="value" xsi:type="number">2</item>
                        <item name="label" xsi:type="string" translate="true">Option #2</item>
                    </option>
                    <option name="2" xsi:type="array">
                        <item name="value" xsi:type="number">3</item>
                        <item name="label" xsi:type="string" translate="true">Option #3</item>
                    </option>
                </options>
            </settings>
        </column>
    </columns>
</listing>

Result

SelectColumn Component example