In Magento 2 we can customize the order grid with adding column and filter as well.

n today’s tutorial, we’ll add telephone no as a column in order grid. The next step is to create a new module.

Here are the namespace and module name :

Magemonkeys_CustomOrdersGrid

Create registration.php file

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Magemonkeys_CustomOrdersGrid',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::MODULE,

'Magemonkeys_CustomOrdersGrid',

__DIR__

);

Create etc/module.xml file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Magemonkeys_CustomOrdersGrid" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Sales"/>
            <module name="Magento_Ui"/>
        </sequence>
    </module>
</config>

<?xml version="1.0"?>

</sequence>

</module>

</config>

Create etc/adminhtml/di.xml file

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">    
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
        <plugin name="magemonkeys_custom_orders_grid"
                type="Magemonkeys\CustomOrdersGrid\Plugin\OrdersGrid"
                sortOrder="20"
                disabled="false"/>
    </type>
</config>

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">

<plugin name="magemonkeys_custom_orders_grid"

type="Magemonkeys\CustomOrdersGrid\Plugin\OrdersGrid"

sortOrder="20"

disabled="false"/>

</type>

</config>

Create Plugin/OrdersGrid.php file

<?php
namespace Magemonkeys\CustomOrdersGrid\Plugin;

use Magento\Sales\Model\ResourceModel\Order\Grid\Collection as OrderGridCollection;

class OrdersGrid
{
    
    private $logger;
    
    public function __construct(
        \Psr\Log\LoggerInterface $customLogger,
        array $data = []
    ) {
        $this->logger = $customLogger;
    }

    public function afterGetReport($subject, $collection, $requestName)
    {
        if ($requestName !== 'sales_order_grid_data_source') {
            return $collection;
        }

        if ($collection->getMainTable() === $collection->getResource()->getTable('sales_order_grid')) {
            try {
                $orderAddressTable  = $collection->getResource()->getTable('sales_order_address');
                
                $collection->getSelect()->joinLeft(
                    ['oat' => $orderAddressTable],
                    'oat.parent_id = main_table.entity_id AND oat.address_type = \'shipping\'',
                    ['telephone']
                );
            } catch (\Zend_Db_Select_Exception $selectException) {
                $this->logger->log(100, $selectException);
            }
        }

        return $collection;
    }
}

<?php

namespace Magemonkeys\CustomOrdersGrid\Plugin;

use Magento\Sales\Model\ResourceModel\Order\Grid\Collection as OrderGridCollection;

class OrdersGrid

{

private $logger;

public function __construct(

\Psr\Log\LoggerInterface $customLogger,

array $data = []

) {

$this->logger = $customLogger;

}

public function afterGetReport($subject, $collection, $requestName)

{

if ($requestName !== 'sales_order_grid_data_source') {

return $collection;

}

if ($collection->getMainTable() === $collection->getResource()->getTable('sales_order_grid')) {

try {

$orderAddressTable = $collection->getResource()->getTable('sales_order_address');

$collection->getSelect()->joinLeft(

['oat' => $orderAddressTable],

'oat.parent_id = main_table.entity_id AND oat.address_type = \'shipping\'',

['telephone']

);

} catch (\Zend_Db_Select_Exception $selectException) {

$this->logger->log(100, $selectException);

}

return $collection;

}

Create view/adminhtml/ui_component/sales_order_grid.xml file

<?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">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                    <item name="label" xsi:type="string" translate="true">Telephone</item>
                    <item name="sortOrder" xsi:type="number">60</item>
                    <item name="align" xsi:type="string">left</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="filter" xsi:type="string">text</item>
                </item>
            </argument>
        </column>
        
    </columns>
</listing>

<?xml version="1.0" encoding="UTF-8"?>

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>

<item name="label" xsi:type="string" translate="true">Telephone</item>

</item>

</argument>

</column>

</columns>

</listing>

after that we can enable the module by running a few commands:

php bin/magento module:enable Magemonkeys_CustomOrdersGrid
php bin/magento setup:upgrade
php bin/magento cache:clean

Now, you will able to see the telephone column in order grid.

Fill the below form if you have any Magento programming need.

Magento 2 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-628655775fd43212886298/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on the...

Author Info

Magento 2 Developer

Hire P. Garchar

Fill the form & Get Installation Support

How to add column with filter in orders grid magento 2?

Recent Articles

Author Info

Get a Free Quote

Connect With Us