Today, we will learn how to add your custom columns to Product Grid with there filters.<\/p>\n\n\n\n
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<\/p>\n\n\n\n
Create a file with same name and path in your module.<\/p>\n\n\n\n
app\/code\/[Vendor]\/[Module_Name]\/view\/adminhtml\/ui_component\/product_listing.xml<\/p>\n\n\n\n
<?xml version="1.0" encoding="UTF-8"?>\n<listing xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc\/ui_configuration.xsd">\n <columns name="product_columns" class="Magento\\Catalog\\Ui\\Component\\Listing\\Columns">\n <column name="custom_column" sortOrder="76">\n <settings>\n <addField>true<\/addField>\n <filter>text<\/filter>\n <dataType>input<\/dataType>\n <sortable>true<\/sortable>\n <label translate="true">Custom Column Title<\/label>\n <\/settings>\n <\/column>\n <\/columns>\n<\/listing><\/pre>\n\n\n\nNew step will be to add this custom column field to the Product Collection.<\/p>\n\n\n\n
app\/code\/[Vendor]\/[Module_Name]\/Ui\/DataProvider\/Product\/CustomColumnField.php<\/p>\n\n\n\n
<?php \nnamespace [Vendor]\\[Module_Name]\\Ui\\DataProvider\\Product;\nclass CustomColumnField implements \\Magento\\Ui\\DataProvider\\AddFieldToCollectionInterface \n{ \n public function addField(\n \\Magento\\Framework\\Data\\Collection $collection,\n $field,\n $alias = null\n ) \n { \n $collection->joinField(\n 'custom_column', \n 'table_name', \n 'custom_column', \n 'customfield_id=entity_id',\n null, \n 'left' \n );\n }\n}<\/pre>\n\n\n\nIn above code the joinField method parameters are explained below –<\/p>\n\n\n\n
‘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<\/p>\n\n\n\nNow we will add the Filter to this field if someone filters the filed<\/p>\n\n\n\n
app\/code\/[Vendor]\/[Module_Name]\/Ui\/DataProvider\/Product\/CustomColumnFilter.php<\/p>\n\n\n\n
<?php \nnamespace [Vendor]\\[Module_Name]\\Ui\\DataProvider\\Product; \nclass CustomColumnFilter implements \\Magento\\Ui\\DataProvider\\AddFilterToCollectionInterface \n{ \n public function addFilter(\n \\Magento\\Framework\\Data\\Collection $collection,\n $field,\n $condition = null\n ) \n { \n if (isset($condition['like'])) \n { \n $collection->addFieldToFilter($field, $condition); \n } \n } \n}<\/pre>\n\n\n\nFinal step is to add the custom column field and filter to the product_listing data provider.<\/p>\n\n\n\n
app\/code\/[Vendor]\/[Module_Name]\/etc\/adminhtml\/di.xml<\/p>\n\n\n\n
<?xml version="1.0"?>\n<config xmlns:xsi="http:\/\/www.w3.org\/2001\/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager\/etc\/config.xsd">\n <type name="Magento\\Catalog\\Ui\\DataProvider\\Product\\ProductDataProvider"> \n <arguments> \n <argument name="addFieldStrategies" xsi:type="array"> \n <item name="custom_column" xsi:type="object">[Vendor]\\[Module_Name]\\Ui\\DataProvider\\Product\\CustomColumnField<\/item> \n <\/argument> \n <argument name="addFilterStrategies" xsi:type="array"> \n <item name="custom_column" xsi:type="object">[Vendor]\\[Module_Name]\\Ui\\DataProvider\\Product\\CustomColumnFilter<\/item> \n <\/argument> \n <\/arguments>\n <\/type>\n<\/config><\/pre>\n","protected":false},"excerpt":{"rendered":"