Add Phone Number column in sales order grid

Please add the ui_component class for your column as per below.

<?xml version="1.0" encoding="UTF-8"?>
<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="telephone" class="Vendor\Module\Ui\Component\Listing\Column\Telephone">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Phone Number</item>
                    <item name="sortOrder" xsi:type="number">6</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Now please add Telephone.php as below

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

use \Magento\Sales\Api\OrderRepositoryInterface;
use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;

class Telephone extends Column
{
    protected $_orderRepository;
    protected $_searchCriteria;

    public function __construct(ContextInterface $context, UiComponentFactory $uiComponentFactory, OrderRepositoryInterface $orderRepository, SearchCriteriaBuilder $criteria, array $components = [], array $data = [])
    {
        $this->_orderRepository = $orderRepository;
        $this->_searchCriteria  = $criteria;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

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

                $order  = $this->_orderRepository->get($item["entity_id"]);
                $telephone = $order->getBillingAddress()->getTelephone();

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

        return $dataSource;
    }
}

Please check and let me know if any issue.


You added the column in ui_component correctly

Just replace the _renderFiltersBefore function with my function in your module collection class

Path should be Vendor/Yourmodule/Model/ResourceModel/Order/Grid/Collection.php

protected function _renderFiltersBefore()
{
 $joinTable = $this->getTable('sales_order_address');
 $this->getSelect()->joinLeft($joinTable, 'main_table.entity_id = 
 sales_order_address.parent_id AND sales_order_address.address_type = "shipping"', 
 ['telephone']);
 parent::_renderFiltersBefore();
}

In Case if you miss it don't forgot to add this argument in your dependency injection di.xml

<argument name="collections" xsi:type="array">
<item name="sales_order_grid_data_source" xsi:type="string">Vendor\Yourmodule\Model\ResourceModel\Order\Grid\Collection</item>
</argument>

I hope this will help