Today, we will learn how to add your custom columns to Product Grid with there filters.
Firstly, we will create Product listing UI component instance. The original file for rendering the Product Grid is Magento_Catalog/view/adminhtml/ui_component/product_listing.xml
Create a file with same name and path in your module.
app/code/[Vendor]/[Module_Name]/view/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" class="Magento\Catalog\Ui\Component\Listing\Columns"> <column name="custom_column" sortOrder="76"> <settings> <addField>true</addField> <filter>text</filter> <dataType>input</dataType> <sortable>true</sortable> <label translate="true">Custom Column Title</label> </settings> </column> </columns> </listing>
New step will be to add this custom column field to the Product Collection.
app/code/[Vendor]/[Module_Name]/Ui/DataProvider/Product/CustomColumnField.php
<?php namespace [Vendor]\[Module_Name]\Ui\DataProvider\Product; class CustomColumnField implements \Magento\Ui\DataProvider\AddFieldToCollectionInterface { public function addField( \Magento\Framework\Data\Collection $collection, $field, $alias = null ) { $collection->joinField( 'custom_column', 'table_name', 'custom_column', 'customfield_id=entity_id', null, 'left' ); } }
In above code the joinField method parameters are explained below –
‘custom_column’ -> field name given in product_listing.xml
‘table_name’ -> table name of the field from which data is required.
‘custom_column’ -> the actual column name in the table.
‘customfield_id = entity_id’ -> the condition of Join
‘null’ -> this is the where condition
‘left’ -> type of join
Now we will add the Filter to this field if someone filters the filed
app/code/[Vendor]/[Module_Name]/Ui/DataProvider/Product/CustomColumnFilter.php
<?php namespace [Vendor]\[Module_Name]\Ui\DataProvider\Product; class CustomColumnFilter implements \Magento\Ui\DataProvider\AddFilterToCollectionInterface { public function addFilter( \Magento\Framework\Data\Collection $collection, $field, $condition = null ) { if (isset($condition['like'])) { $collection->addFieldToFilter($field, $condition); } } }
Final step is to add the custom column field and filter to the product_listing data provider.
app/code/[Vendor]/[Module_Name]/etc/adminhtml/di.xml
<?xml version="1.0"?> <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="custom_column" xsi:type="object">[Vendor]\[Module_Name]\Ui\DataProvider\Product\CustomColumnField</item> </argument> <argument name="addFilterStrategies" xsi:type="array"> <item name="custom_column" xsi:type="object">[Vendor]\[Module_Name]\Ui\DataProvider\Product\CustomColumnFilter</item> </argument> </arguments> </type> </config>
For those who can’t filter anymore the grid with the custom column it’s because a weird behaviour in magento 2.2.7+ try to find a product attribute with the code “custom_column” and throw an error.
So the fix here is to use the addAttributeToFilter() method of the class Magento\Catalog\Model\ResourceModel\Product\Collection , to achieve that you have to rewrite the line:
$collection->addFieldToFilter($field, $condition);
Instead :
$collection->addFieldToFilter([[‘attribute’ => $field, ‘eq’ => $condition[‘eq’]]]);