Magento 2: display yes/no in order grid instead 0/1 (Custom column value)

Question

I needed a custom column to be displayed in order Grid (Yes/No) Type. So I followed below steps:

1. I created a new column in table "sales_order_grid"

   $installer->getConnection()->addColumn(
           $setup->getTable('sales_order_grid'), 'is_prebook', [
       'type' => \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
       'length' => 11,
       'default' => '0',
       'nullable' => true,
       'comment' => 'Prebook'
           ]
   );
   

2. Then created sales_order_grid.xml app/code/Akhil/Prebook/view/adminhtml/ui_component/sales_order_grid.xml

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
    <column name="is_prebook">
        <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="label" xsi:type="string" translate="true">Prebook</item>
                </item>            
        </argument>
    </column>
</columns>
</listing>

Column added successfully but value showing '0' How to display as 1=>Yes & 0=> No

Tried below code. Is this should make sense here?

<item name="dataType" xsi:type="string">select</item>
<item name="options" xsi:type="object">Akhil\Prebook\Model\Source\Prebookstatus</item>

File: Akhil\Prebook\Model\Source\Prebookstatus

class Prebookstatus implements \Magento\Framework\Option\ArrayInterface {

    /**
     * Retrieve status options array.
     *
     * @return array
     */
    public function toOptionArray() {
        return [
            ['value' => 0, 'label' => __('No')],
            ['value' => 1, 'label' => __('Yes')]
        ];
    }

}

Answer 1

After some digging found the solution. What i need was just to make some changes in ui_comonent XML file:

I changed this:

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<columns name="sales_order_columns">
    <column name="is_prebook">
        <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="label" xsi:type="string" translate="true">Prebook</item>
                </item>            
        </argument>
    </column>
</columns>
</listing>

To:

<?xml version="1.0"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <column name="is_prebook">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="object">Akhil\Prebook\Model\Source\Prebookstatus</item>
                <item name="config" xsi:type="array">                    
                    <item name="filter" xsi:type="string">select</item>
                    <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                    <item name="sortable" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">select</item>
                    <item name="sortOrder" xsi:type="number">40</item>
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
                    <item name="editor" xsi:type="string">select</item>
                    <item name="label" xsi:type="string" translate="true">Prebook</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Answer 2

Dont think you need to create a source class for simple yes/no. You can use Magento\Config\Model\Config\Source\Yesno

<column name="is_prebook" component="Magento_Ui/js/grid/columns/select" sortOrder="80">
    <settings>
        <addField>true</addField>
        <options class="Magento\Config\Model\Config\Source\Yesno"/>
        <filter>select</filter>
        <dataType>select</dataType>
        <label translate="true">PrebookStatus</label>
    </settings>
</column>

Answer 3

   <column name="is_prebook" component="Magento_Ui/js/grid/columns/select" sortOrder="80">
        <settings>
            <addField>true</addField>
            <options class="YOUR_VENDOR\YOUR_MODULE\Model\Source\PrebookStatus"/>
            <filter>select</filter>
            <dataType>select</dataType>
            <label translate="true">PrebookStatus</label>
        </settings>
    </column>

Now you need to create source class(Which must implement Magento\Framework\Data\OptionSourceInterface) for this which defined <option>

<?php

namespace YOUR_VENDOR\YOUR_MODULE\Model\Source;

use Magento\Framework\Data\OptionSourceInterface;

/**
 * Class PrebookStatus
 */
class PrebookStatus implements OptionSourceInterface
{

    const PRE_BOOK_YES=1;
    const PRE_BOOK_NO=0;

    public static function getOptionArray()
    {
        return [
            self::PRE_BOOK_YES => __('Yes'),
            self::PRE_BOOK_NO => __('No')
        ];
    }

    /**
     * Get options
     *
     * @return array
     */
    public function toOptionArray()
    {
        $res = [];
        foreach (self::getOptionArray() as $index => $value) {
            $res[] = ['value' => $index, 'label' => $value];
        }
        return $res;
    }
}