Add custom columns along with filters to Product Grid in Admin Magento 2

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>