How to add a custom column to the order grid in Magento 2?
How to add a new column to the Magento 2 order grid?
To add a new Magento 2 column to the order grid, you need to create and register a custom module. Then, create the Resource Model using the _renderFiltersBefore method. After this, you need to develop a UI component. The detailed step-by-step guide on how to add a field to order in Magento 2 with code examples you can find in the article below.
Let’s start.
Warning: all the code pieces presented in this article are simple examples that you need to customize according to your business needs.
Method 1. Add a column programmatically
In the Magento order grid to add a column, you need to create a custom plugin following this step-by-step guide.
Step 1. Register the module by creating the registration.php file in the app/code/Amasty/Testgrid/ with the following code:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Amasty_Testgrid',
__DIR__
);
Step 2. Next, create the app/code/Amasty/Testgrid/etc/module.xml file. It controls the module installation and updates.
<?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="Amasty_Testgrid" setup_version="1.0.0">
</module>
</config>
Step 3. Then, what you need to do to add a column to the Magento 2 order grid is the Resource Model creation. For this, create Collection.php in the app/code/Amasty/Testgrid/Model/ResourceModel/Order/Grid/ folder. It may look like this:
<?php
namespace Amasty\Testgrid\Model\ResourceModel\Order\Grid;
use Magento\Framework\Data\Collection\Db\FetchStrategyInterface as FetchStrategy;
use Magento\Framework\Data\Collection\EntityFactoryInterface as EntityFactory;
use Magento\Framework\Event\ManagerInterface as EventManager;
use Magento\Sales\Model\ResourceModel\Order;
use Magento\Sales\Model\ResourceModel\Order\Grid\Collection as OrderGridCollection;
use Psr\Log\LoggerInterface as Logger;
class Collection extends OrderGridCollection
{
public function __construct(
EntityFactory $entityFactory,
Logger $logger,
FetchStrategy $fetchStrategy,
EventManager $eventManager,
$mainTable = 'sales_order_grid',
$resourceModel = Order::class
) {
parent::__construct($entityFactory, $logger, $fetchStrategy, $eventManager, $mainTable, $resourceModel);
}
protected function _renderFiltersBefore() {
$joinTable = $this->getTable('sales_order');
$this->getSelect()->joinLeft(
['sales_order_table' => $joinTable],
'main_table.entity_id = sales_order_table.entity_id',
['discount_amount'] // you can add other attributes here
);
parent::_renderFiltersBefore();
}
}
In the _renderFiltersBefore method, you can add the columns that you want, for example, we’ve used the discount_amount column. In this array, you can pass as many parameters from the sales_order table as you like. Also, here you can join the other one or several tables to use the needed parameters for the order.
Step 4. Then we need to create a UI component file app/code/Amasty/Testgrid/view/adminhtml/ui_component/sales_order_grid.xml with the following code:
<?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="discount_amount" class="Magento\Sales\Ui\Component\Listing\Column\PurchasedPrice">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">textRange</item>
<item name="label" xsi:type="string" translate="true">Discount Amount</item>
</item>
</argument>
</column>
</columns>
</listing>
This file is responsible for columns on the grid. You can add other column elements, but don’t forget to use the resource model.
Step 5. As a final step adding a custom column to Magento 2 order grid, return to app/code/Amasty/Testgrid/etc/ and create di.xml:
<?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">
<arguments>
<argument name="collections" xsi:type="array">
<item name="sales_order_grid_data_source"
xsi:type="string">Amasty\Testgrid\Model\ResourceModel\Order\Grid\Collection</item>
</argument>
</arguments>
</type>
<type name="Amasty\Testgrid\Model\ResourceModel\Order\Grid\Collection">
<arguments>
<argument name="mainTable" xsi:type="string">sales_order_grid</argument>
<argument name="resourceModel" xsi:type="string">Magento\Sales\Model\ResourceModel\Order</argument>
</arguments>
</type>
</config>
In this file, we define where we want to apply our changed collection. In the same way, you can add a column to any grid in your Magento 2, say, to the customer grid.
Method 2. Add a column to the order grid without coding
If you want to customize your order grid without writing a line of code, try this Extended Order Grid extension. It allows adding, hiding, and renaming columns with a customer, product, shipping or billing attributes to see only relevant order info. Filter orders by weight, subtotal, discount amount. You can save the custom view of the grid to get quick access to it when needed. In Magento 2 you can add mass action to the order grid. The mass actions let you manage orders even faster. Optimize your managers' work in the most efficient way.
Why add a custom column to Magento 2 sales order grid?
Magento sales order grid is a collection of all orders in one place. Adding a column to Magento 2 sales order grid can help your admins manage your store more effectively. With additional information that they can see right on the grid without searching for it on the other pages, they save time and effort and can process more orders.
Need a hand when adding a custom column to Magento 2 order grid?
If you have problems when adding a custom column to the Magento 2 order grid, our dedicated development team is ready to help you out. Just let us know all the details of your project, and we’ll help you to find the best solution. Learn more about our custom development service or leave a request.
According to the statistics, you may find helpfull the following question about custom filters.