How to display Yes/No values in admin grid (Magento2)?

Question

I have created a InStock column in admin grid and table.

In table, Instock column values are 0 (or) 1 based on productstock. In admin grid, the Instock column values are dispalyed 0 (or)1 .

But i need to displayed that Yes instead of 1 and No instead of 0.

How to do this?

Thanks.

Answer 1

Method 1: If you have boolean value 0 and 1 use default option class Magento\Config\Model\Config\Source\Yesno

app/code/Vendor/Theme/view/adminhtml/ui_component/your_ui_grid.xml

<column name="instock">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Config\Model\Config\Source\Yesno</item>
        <item name="config" xsi:type="array">
            <item name="sortOrder" xsi:type="number">60</item>
            <item name="filter" xsi:type="string">select</item>
            <item name="label" translate="true" xsi:type="string">InStock</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="editor" xsi:type="array">
                <item name="editorType" xsi:type="string">select</item>
            </item>
        </item>
    </argument>
</column>

Method 2: If you have dynamic options value, use custom options class Vendor\Module\Ui\Component\Listing\Column\Status

app/code/Vendor/Theme/view/adminhtml/ui_component/your_ui_grid.xml

<column name="instock">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Ui\Component\Listing\Column\InStock</item>
        <item name="config" xsi:type="array">
            <item name="sortOrder" xsi:type="number">60</item>
            <item name="filter" xsi:type="string">select</item>
            <item name="label" translate="true" xsi:type="string">InStock</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="editor" xsi:type="array">
                <item name="editorType" xsi:type="string">select</item>
            </item>
        </item>
    </argument>
</column>

Now Create InStock.php at

app/code/Vendor/Module/Ui/Component/Listing/Column/InStock.php

<?php

namespace Vendor\Module\Ui\Component\Listing\Column;

class InStock implements \Magento\Framework\Option\ArrayInterface
{
    /**
     * Options getter
     *
     * @return array
     */
    public function toOptionArray()
    {
        return [
            ['value' => 1, 'label' => __('Male')],
            ['value' => 2, 'label' => __('Female')],
            ['value' => 3, 'label' => __('Other')]
        ];
    }
}

Method 3: If you want to change whole column value to custom value or update existing value then use DataSource method

Pass Vendor\Module\Ui\Component\Listing\Column\InStock class in column

app/code/Vendor/Theme/view/adminhtml/ui_component/your_ui_grid.xml

<column name="instock" class="Vendor\Module\Ui\Component\Listing\Column\InStock">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="sortOrder" xsi:type="number">60</item>
            <item name="label" translate="true" xsi:type="string">InStock</item>
            <item name="dataType" xsi:type="string">select</item>
        </item>
    </argument>
</column>

Now create InStock.php at

app/code/Vendor/Module/Ui/Component/Listing/Column/InStock.php

<?php

namespace Vendor\Module\Ui\Component\Listing\Column;

use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Ui\Component\Listing\Columns\Column;

class InStock extends Column
{
    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        array $components = [],
        array $data = []
    ) {
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as &$items) {
                // $items['instock'] is column value
                if ($items['instock'] == 1) {
                    $items['instock'] = $items['instock'].'Custom Value';
                }
            }
        }
        return $dataSource;
    }
}

Answer 2

The question has already been answered, but adding in case someone needs to do the same thing in Magento version >= 2.3:

<column name="instock" component="Magento_Ui/js/grid/columns/select">
    <settings>
        <options class="Magento\Config\Model\Config\Source\Yesno" />
        <filter>select</filter>
        <dataType>select</dataType>
        <label translate="true">InStock</label>
    </settings>
</column>

Column docs