How to add custom column in Magento 2 product listing grid?

How to add custom column in Magento 2 product listing grid?

In product column we can show product attribute according to our convenience. We can select attribute from column list and set column which we want to show in grid. 

But this is only about product attributes and you can’t show anything that is not product attribute and if it contains important detail about product like stock and you want to show that in grid, It will be not possible in default magento.



So, let’s start with simple module that will add a custom field which will show if manage stock is yes or no


Step 1:  Add custom column through UI component


Product grid in magento 2 is rendered through Listing UI component instance named product_listing and XML configuration file Magento_Catalog/view/adminhtml/ui_component/product_listing.xml in vendor

And if we want to customize product_listing.xml then you have to create file in your module with same path and name.




<?xml version="1.0" encoding="utf-8"?>


<listing xmlns:xsi="" 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">
                            <options class="Magento\Config\Model\Config\Source\Yesno"/>
                            <label translate="true">Manage Stock</label>


Here we have used column component in xml file under listing component to add a new column named Manage Stock and having option Yes / No.


Clear cache and you will find that new column has been added.



Column is added and now next thing we must do is to get data from product collection and to link this column with that data provider. For this we will add stock data in products collection.


Step 2:  For adding stock data in products collection you have to extend



For this create app/code/Bizspice/AddProductcolumn/etc/adminhtml/di.xml


<?xml version="1.0" encoding="utf-8" ?>
<config xmlns:xsi="" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
         <type name="Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider">
                   <argument name="addFieldStrategies" xsi:type="array">
                        <item name="manage_stock" xsi:type="object">Bizspice\AddProductcolumn\Ui\DataProvider\Product\AddCustomField</item>


Step 3:  Add file



as we extend Magento\Catalog\Ui\DataProvider\Product\ProductDataProvider

and add stock data in products collection


namespace Bizspice\AddProductcolumn\Ui\DataProvider\Product;
class AddCustomField implements \Magento\Ui\DataProvider\AddFieldToCollectionInterface
          public function addField(\Magento\Framework\Data\Collection $collection, $field, $alias = null){

Now flush cache and clean and now data will be there.



Note : This will show stock as per product data and not from global config. So, if you save product it will show correct data as this will save stock data in product collection.