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.