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

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.

Add an image programmatically from any url in Magento 2
[crayon-63d3d7a4c658f488352445/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Magento 2 Developer

Hire P. Garchar

Let’s have a call

Fill the form & Get Installation Support