How To

How to add a Custom Column to the Products Grid of Magento 2

In Magento, grids play a vital role when it comes to displaying data in an efficient way. This kind of grid is responsible for listing database items to display in a managed way. Also, it helps to sort or updating data items quickly as per the requirements of the admin. There are many default grids available in Magento 2 like product grid, order grid, review grid etc. But sometimes you require to have a custom column or parameter to make things easy for you.
Also, Magento allows you to quickly add a column to the product grid if a value that you want to display in the column is a product attribute using products grid toolbar under Columns control. Moreover, to personalized grid elements, you just check/uncheck items. But what if you want to display custom values that aren’t available as a product attribute you need to manually code for it.
Here is a small piece of code to do the same.
Firstly, create product_listing.xml file at this location.
app\code\Vendor\Extension\view\adminhtml\ui_component

<?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="product_columns">
        <column name="manage_stock" component="Magento_Ui/js/grid/columns/select" sortOrder="76">
            <settings>
                <addField>true</addField>
                <options class="Magento\Config\Model\Config\Source\Yesno"/>
                <filter>select</filter>
                <dataType>select</dataType>
                <sortable>false</sortable>
                <label translate="true">Manage Stock</label>
            </settings>
        </column>
    </columns>
    </listing>

After that we need to override ProductDataProvider by creating di.xml file in below folder.
app\code\Vendor\Extension\etc\adminhtml

<?xml version="1.0" encoding="utf-8" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
 <type name="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider">
        <arguments>
            <argument name="addFieldStrategies" xsi:type="array">
                <item name="manage_stock" xsi:type="object">Vendor\Extension\Ui\DataProvider\Product\Addstockstatus</item>
            </argument>
        </arguments>
    </type>
</config>

Next, we need to create Addstockstatus.php file inside below folder along with this bottom code.
app\code\Vendor\Extension\Ui\DataProvider\Product

<?php
namespace Vendor\Extension\Ui\DataProvider\Product;
class Addstockstatus implements \Magento\Ui\DataProvider\AddFieldToCollectionInterface
{
 public function addField(\Magento\Framework\Data\Collection $collection, $field, $alias = null)
 {
        $collection->joinField('manage_stock', 'cataloginventory_stock_item', 'manage_stock', 'product_id=entity_id', null, 'left');
 
 }
}

Lastly, don’t forget to clean cache using below command

php bin/magento cache:clean

 

That’s it! Now you can see a new column added to grid from your Magento 2 backend. Also, you are free to play and manipulate this according to your need for adding one or more elements to the grid.
Let us know if you are facing an issue while implementing using this code by commenting below.
Happy Coding!

Click to rate this post!
[Total: 13 Average: 4.6]
Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏

Recent Posts

What are Net Sales? How to Calculate Your Net Sales?

In the world of business, understanding financial metrics is crucial for making informed decisions and…

1 day ago

Magento 2 Extensions Digest April 2024 (New Release & Updates)

Welcome to the MageComp Monthly Digest, where we bring you the latest updates, releases, and…

1 day ago

The ABCs of Geofencing: Definition, Features and Uses

In this era, businesses are always on the lookout for ways to engage with their…

2 days ago

How to Delete Product Variant in a Shopify Remix App using GraphQL Mutations?

Managing a Shopify store efficiently involves keeping your product catalog organized. This includes removing outdated…

3 days ago

6 Innovative Tools Revolutionizing E-Commerce Operations

E-commerce has transformed the way consumers shop for products and services and interact with businesses.…

5 days ago

How Upcoming Cookie Changes Will Affect Your E-commerce Website?

The e-commerce world is constantly in flux. New tech and strategies emerge daily to help…

5 days ago