Webkul
Services
Technologies Bagisto QloApps
iOS Android SAP BigCommerce Wix
Trusted by
Samsung Intel Toyota Walmart Disney Nokia Nestlé Decathlon
See all customers
Back to Top
DEV

Add custom columns to Order Grid in Admin Magento 2

Here, we’ll explore how to add your custom columns to Order Grid in Admin without adding columns to sales_order_grid table in Database.

Firstly, we will create Order listing UI component instance. The original file for rendering the Product Grid is Magento_Catalog/view/adminhtml/ui_component/sales_order_grid.xml

Create a file with same name and path in your module.

app/code/[Vendor]/[Module_Name]/view/adminhtml/ui_component/sales_order_grid.xml

<?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="custom_column">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Custom Column</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Now, create a plugin for Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory

Doing this there will be no dependency on rewrites and it will make the lean.

<?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="sales_order_additional_columns" type="[Vendor]\[Module_Name]\Plugin\SalesOrderCustomColumn" sortOrder="10" disabled="false" />
    </type>

</config>

Next step is to create the Plugin folder and Plugin class in the module.

app/code/[Vendor]/[Module_Name]/Plugin/SalesOrderCustomColumn.php

<?php 
namespace [Vendor]\[Module_Name]\Plugin;

use Magento\Framework\Message\ManagerInterface as MessageManager;
use Magento\Sales\Model\ResourceModel\Order\Grid\Collection as SalesOrderGridCollection;

class SalesOrderCustomColumn
{
    private $messageManager;
    private $collection;

    public function __construct(MessageManager $messageManager,
        SalesOrderGridCollection $collection
    ) {

        $this->messageManager = $messageManager;
        $this->collection = $collection;
    }

    public function aroundGetReport(
        \Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory $subject,
        \Closure $proceed,
        $requestName
    ) {
        $result = $proceed($requestName);
        if ($requestName == 'sales_order_grid_data_source') {
            if ($result instanceof $this->collection
            ) {
                $select = $this->collection->getSelect();
                $select->joinLeft(
                    ["secondTable" => $this->collection->getTable("table_name")],
                    'main_table.increment_id = secondTable.order_id',
                    array('custom_column')
                );                
                return $this->collection;
            }
        }
        return $result;
    }
}

Webkul, the leading Magento development company, was chosen to implement the Adobe Commerce-based solution. You may also check our quality Magento 2 Extensions.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


2 comments

  • Umer
    • Sagar Bathla (Moderator)
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home