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. Along with Category Column to Product Grid, 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__
    );

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>

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>

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>

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'
            );
        }
    }

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 also display image thumbnail column in Magento 2 admin UI grid.

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

Thanks.