HOW TO ADD A CUSTOM COLUMN IN MAGENTO 2 PRODUCT LISTING GRID?

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

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

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

Step 1:  Add a custom column through the 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 the vendor.

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

Create

app/code/Bizspice/AddProductcolumn/adminhtml/ui_component/product_listing.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="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>

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

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

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

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

Magento\Catalog\Ui\DataProvider\Product\ProductDataProviderFor this, create app/code/Bizspice/AddProductcolumn/etc/adminhtml/di.xml

<?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">Bizspice\AddProductcolumn\Ui\DataProvider\Product\AddCustomField</item>
                   </argument>
             </arguments>
         </type>
</config>

Step 3:  Add file

Bizspice\AddProductcolumn\Ui\DataProvider\Product\AddCustomField

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

and add stock data in products collection

<?php
namespace Bizspice\AddProductcolumn\Ui\DataProvider\Product;
class AddCustomField 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'
                   );
                }
}

Now, flush the cache and the data will be there.

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