Magento 2 add css to order grid on basis of custom column

Question

I want to add css class and highlight the order from grid on the basis of my custom column value(Yes/No). Anyone please suggest solution. Below is my custom column :

$setup->getConnection()
        ->addColumn(
            $setup->getTable($ordergridTable),
            'custom_column',
            [
                'type' => \Magento\Framework\DB\Ddl\Table::TYPE_SMALLINT,
                'unsigned'  => true,
                'nullable'  => false,
                'default'   => '0',
                'comment' =>'Custom column'
            ]
        );

        $setup->getConnection()->addIndex(
        $setup->getTable($ordergridTable),
        $setup->getConnection()->getIndexName(
        $setup->getTable($ordergridTable),
        ['custom_column']
        ),
        ['custom_column']
        );

below is in Ui/Component/Listing/Column/

 public function prepareDataSource(array $dataSource)
{
    if (isset($dataSource['data']['items'])) {
        foreach ($dataSource['data']['items'] as & $item) {

            $fav = isset($item['custom_column']) ? $item['is_favourite_order'] : null;
            $order  = $item['custom_column'];
            switch ($order) {
                case "0":
                    $fav_status = "No";
                    break;
                case "1";
                    $fav_status = "Yes";
                    break;

            }

            // $this->getData('name') returns the name of the column so in this case it would return fav_status
            $item[$this->getData('name')] = $fav_status;
        }
    }

    return $dataSource;
}

Answer 1

I have found the solution myself where I load custom js file from sales_order_index.xml and to highlight specific grid column as per value,I have written below code in js file :

require(["jquery"], function($){

$(document).ready(function ()
{
    var i = setInterval(function ()
    {
        if ($('.highlight-order').length)
        {
            //clearInterval(i);
            $('.highlight-order').each(function(i, obj) {
                var classStatusName = $(this).children().text();
                if(classStatusName == "Yes")
                {
                    $(this).parent().attr("class","");
                    $(this).parent().addClass('data-row');
                    $(this).parent().addClass('highlight-fav-order');
                    if($(this).parent().hasClass('highlight-fav-order')) {
                        $(this).removeClass('highlight-order');
                    }  
                }

            });
        }
    }, 100);
});

});