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.

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:

app/code/Magento/Ui/view/base/web/js/grid/columns/select.js

Examples

Integration

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

<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>
Copied to your clipboard
<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>