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
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::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>
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="MagentoFrameworkViewElementUiComponentDataProviderCollectionFactory">
<plugin name="magemonkeys_custom_orders_grid"
type="MagemonkeysCustomOrdersGridPluginOrdersGrid"
sortOrder="20"
disabled="false"/>
</type>
</config>
Create Plugin/OrdersGrid.php file
<?php
namespace MagemonkeysCustomOrdersGridPlugin;
use MagentoSalesModelResourceModelOrderGridCollection as OrderGridCollection;
class OrdersGrid
{
private $logger;
public function __construct(
PsrLogLoggerInterface $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>
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.
