How to Add a Custom Column in Magento 2 Products Grid

The default Magento 2 product grid makes it easy to add a column for displaying values for any product attribute. As they are already available under column control of the products grid toolbar. You just need to tick the check/uncheck for that product attribute under Columns control to show/hide values.

However, to add a custom column in Magento 2 product grid that is not a product attribute is not supported by default Magento 2. You need to apply the below solution to add custom columns like stock, quantity, website or any data that is not a product attribute. You can also add action column in admin grid in Magento 2 that enables you to perform record specific actions like editing and deleting.

More organized the data, easier it will be for the admin to manage the products.

Steps to Add a Custom Column in Magento 2 Products Grid:

1. Create registration.php file in app\code\[Vendor]\[Namespace]\
   
   <?php         \Magento\Framework\Component\ComponentRegistrar::register(             \Magento\Framework\Component\ComponentRegistrar::MODULE,             '[Vendor]_[Namespace]',             __DIR__     );

   1 2 3 4 5 6

   <?php         \Magento\Framework\Component\ComponentRegistrar::register(             \Magento\Framework\Component\ComponentRegistrar::MODULE,             '[Vendor]_[Namespace]',             __DIR__     );

2. Create module.xml file in app\code\[Vendor]\[Namespace]\etc
   
       <?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="[Vendor]_[Namespace]" setup_version="1.0.0"/>     </config>

   1 2 3 4

   <?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="[Vendor]_[Namespace]" setup_version="1.0.0"/>     </config>

3. Create product_listing.xml file in app\code\[Vendor]\[Namespace]\adminhtml\ui_component
   
       <?xml version="1.0"?>     <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="stock_status" 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">Stock Status</label>                      </settings>                </column>          </columns>     </listing>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   <?xml version="1.0"?>       <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="stock_status" 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">Stock Status</label>                      </settings>                </column>          </columns>     </listing>

4. Create di.xml file in app\code\[Vendor]\[Namespace]\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="stock_status" xsi:type="object">[Vendor]\[Namespace]\Ui\DataProvider\Product\AddCustomField</item>                        </argument>                  </arguments>              </type>     </config>

   1 2 3 4 5 6 7 8 9 10

   <?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="stock_status" xsi:type="object">[Vendor]\[Namespace]\Ui\DataProvider\Product\AddCustomField</item>                        </argument>                  </arguments>              </type>     </config>

5. Create AddCustomField.php file in app\code\[Vendor]\[Namespace]\Ui\DataProvider\Product\
   
       <?php     namespace [Vendor]\[Namespace]\Ui\DataProvider\Product;     class AddCustomField implements \Magento\Ui\DataProvider\AddFieldToCollectionInterface     {         public function addField(\Magento\Framework\Data\Collection $collection, $field, $alias = null){             $collection->joinField(                 'stock_status',                 'cataloginventory_stock_status',                 'stock_status',                 'product_id=entity_id',                 null,                 'left'             );         }     }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <?php     namespace [Vendor]\[Namespace]\Ui\DataProvider\Product;     class AddCustomField implements \Magento\Ui\DataProvider\AddFieldToCollectionInterface     {         public function addField(\Magento\Framework\Data\Collection $collection, $field, $alias = null){             $collection->joinField(                 'stock_status',                 'cataloginventory_stock_status',                 'stock_status',                 'product_id=entity_id',                 null,                 'left'             );         }     }

That’s it. Also likewise you can Add custom column in export to csv in Magento 2 to have an csv with custom changes made in it. Likewise you can alsodisplay image thumbnail column in Magento 2 admin UI grid.

Any doubts on the topic can be mentioned in the Comments section below. I’d be happy to help.

Feel free to share the solution with fellow developers via social media.

Thanks.