Add select/dropdown in a Magento 2 UI component admin grid

Please check our previous article to add an image column to your admin grid.

If you’ve created an admin grid, you most likely in Magento 1 or Magento 2, you most likely have used select field. This particular type of column uses the label text defined for a specific value as text in the grid column. This is usually used for Yes/No fields, Active/Inactive or more options like Countries list fields.

The data stored in the database will be raw and while it might make sense to a programmer, it might not make any sense to the user/admin.

Let’s say we have a Yes/No field. The value stored in the database for this field will most likely be 0 for No and 1 for Yes. And if we do not define a special component to handle this data for our grid columns. We will simply see 0 or 1 as the text for this column and we do not want that because it hard for the user to figure out what it means.

In order to fix that, for forms that use a dropdown field with options to set and save the value, when displayed in the grid, we will use the component Magento_Ui/js/grid/columns/select which is designed to show the label used in the dropdown field in the form for each of the options as the text of the grid column.

To do this, in your admin grid column defined in your ui_component/*_listing.xml file, add inside the <columns>...</columns> tag, add the following XML for the dropdown type column:

<column name="status" component="Magento_Ui/js/grid/columns/select">
    <settings>
        <label translate="true">Status</label>
        <options class="{Namespace}\{Module}\Model\Config\Source\Status"/>
        <filter>select</filter>
        <dataType>select</dataType>
    </settings>
</column>

Here, the name of our column is status and it uses the component Magento_Ui/js/grid/columns/select to render the content of this column. We add an <options class="..."/> which defines a class as the source of your options i.e., the class whose method will be called to fetch the options. You can use one the source classes existing in Magento or create your own source class as shown below.

Your own source class should implement the interface Magento\Framework\Option\ArrayInterface as follows:

<?php
namespace {Namespace}\{Module}\Model\Config\Source;

use Magento\Framework\Option\ArrayInterface;

class Status implements ArrayInterface
{
    public function toOptionArray()
    {
        $result = [];
        foreach ($this->getOptions() as $value => $label) {
            $result[] = [
                 'value' => $value,
                 'label' => $label,
             ];
        }

        return $result;
    }

    public function getOptions()
    {
        return [
            'active' => __('Active'),
            'inactive' => __('Inactive'),
            'pending' => __('Pending'),
        ];
    }
}

The getOptions method returns the options, which is an array with key => value pairs, where key is the value of the option and value is the label displayed in the dropdown for the respective option.

The toOptionArray method returns a 2d array where each inner array item is an array of the format: [ 'value' => 'The value of the option', 'label' => 'The label for the option', ]

Now you check the new grid column and see that the select field shows the appropriate label for the raw data.