Magento 2 provides a solid UI grid to view the data. We can see order columns in the orders grid under the sales tab. There are several visible columns in the grid. Also, there are several hidden columns. The visibility can be managed by the columns option given in the toolbar of the UI grid.
We are often required to display custom columns in the order grid. Adding a sales order grid is pretty straightforward. So, Let’s check out how we can add a custom field to the sales order grid.
We can add a new column by using the UI Component XML. The sales_order_grid.xml is used as a UI component for the sales order grid. The sales_order_columns tag is responsible for handling the columns in sales_order_columns.xml.
Secondly, we must define and pass a filter to the data provider’s collection factory by providing a custom field using a join query. Then, we must pass the table name of sales_order_grid and the resource model of the order table to that collection.
Magento 2: Add Column to Admin Order Grid
Create a file with the name sales_order_grid.xml inside the ui_component directory of the admihtml area inside the view directory of the custom module.
<?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="sbdevblog_comment">
<settings>
<filter>text</filter>
<label translate="true">SBDEVBLOG Comment</label>
</settings>
</column>
</columns>
</listing>
Create a di.xml file inside the etc directory of the custom module.
<?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">SbDevBlog\Checkout\Model\ResourceModel\Order\Grid\Collection</item>
</argument>
</arguments>
</type>
<type name="SbDevBlog\Checkout\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>
Let’s pass a field using join. We must create a class defined in the di.xml file to do that.
<?php
/**
* @copyright Copyright (c) sbdevblog (http://www.sbdevblog.com)
*/
namespace SbDevBlog\Checkout\Model\ResourceModel\Order\Grid;
class Collection extends \Magento\Sales\Model\ResourceModel\Order\Grid\Collection
{
/**
* Filtering sbdevblog comment
*
* @return void
*/
protected function _renderFiltersBefore()
{
$joinTable = $this->getTable('sales_order');
$this->getSelect()->joinLeft(
$joinTable,
'main_table.entity_id = sales_order.entity_id',
['sbdevblog_comment']
);
parent::_renderFiltersBefore();
}
}
That’s it. Please create a field in the sales_order table before implementing the above solution. So, let’s create a db_schema.xml file to create a field.
<?xml version="1.0"?>
<schema xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:Setup/Declaration/Schema/etc/schema.xsd">
<table name="sales_order" resource="default" engine="innodb">
<column name="sbdevblog_comment" nullable="true" xsi:type="varchar" length="50" comment="SbDevBlog Comment"/>
</table>
</schema>
Just replace sbdevblog_comment with your custom field, and you are ready.
Thanks for reading the post, Magento 2: Add Column to Admin Order Grid. Please use the comment section for your feedback. Please share and subscribe to SBDEVBLOG.
Click to add validation before placing the order.
Note: Please verify the code of this blog and the relevant git repository before using it in production.
🙂 HAPPY CODING 🙂
