Adding a new column in Magento 2 admin grid is not a complex task. In this blog, we will see how to add a new column to the Magento 2 admin sales order grid very easily.
Step 1: Module Registration
Create a new custom module based on the Magento 2 structure in the below file path,
File Path: app/code/BlogTreat/CustomGrid/registration.php
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'BlogTreat_CustomGrid', __DIR__ );
Step 2: Module Configuration
Create a module.xml file in the below file path to define new Magento 2 extension
File Path: app/code/BlogTreat/CustomGrid/etc/module.xml
<?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="BlogTreat_CustomGrid" setup_version="1.0.0"> <sequence> <module name="Magento_Sales"/> </sequence> </module> </config>
Step 3: Configure UI Grid Component to Display Custom Column
To reflect the custom column on admin panel sales order grid, we have to extend sales_order_grid UI component by adding a UI configuration file in our custom module.
File Path: app/code/BlogTreat/CustomGrid/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="total_paid" class="BlogTreat\CustomGrid\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="visible" xsi:type="boolean">true</item> <item name="label" xsi:type="string" translate="true">Total Paid</item> </item> </argument> </column> </columns> </listing>
In the above code, we are rendering the custom class BlogTreat\CustomGrid\Ui\Component\Listing\Column\PurchasedPrice which is used to display the value in the price format.
Create a PurchasedPrice.php file in the below file path and add the following code,
File Path: app/code/BlogTreat/CustomGrid/Ui/Component/Listing/Column/PurchasedPrice.php
<?php namespace BlogTreat\CustomGrid\Ui\Component\Listing\Column; use Magento\Framework\View\Element\UiComponent\ContextInterface; use Magento\Framework\View\Element\UiComponentFactory; use Magento\Ui\Component\Listing\Columns\Column; use Magento\Framework\Pricing\PriceCurrencyInterface; /** * Class Price */ class PurchasedPrice extends Column { /** * @var PriceCurrencyInterface */ protected $priceFormatter; /** * Constructor * * @param ContextInterface $context * @param UiComponentFactory $uiComponentFactory * @param PriceCurrencyInterface $priceFormatter * @param array $components * @param array $data */ public function __construct( ContextInterface $context, UiComponentFactory $uiComponentFactory, PriceCurrencyInterface $priceFormatter, array $components = [], array $data = [] ) { $this->priceFormatter = $priceFormatter; parent::__construct($context, $uiComponentFactory, $components, $data); } /** * Prepare Data Source * * @param array $dataSource * @return array */ public function prepareDataSource(array $dataSource) { if (isset($dataSource['data']['items'])) { foreach ($dataSource['data']['items'] as & $item) { $currencyCode = isset($item['order_currency_code']) ? $item['order_currency_code'] : null; $item[$this->getData('name')] = $this->priceFormatter->format( $item[$this->getData('name')], false, null, null, $currencyCode ); } } return $dataSource; } }
After completing the above steps run the below SSH command in your Magento 2 root directory to install this custom module,
php bin/magento setup:upgrade
Then, clear all the Magento cache and check whether the extension has been successfully installed in Magento 2 admin.
Once the extension has been installed you will be able to view the custom field in admin sales order grid as shown in the screenshot below,
Hope this helps.