How to Add Custom Filter to Product Grid in Magento 2 Admin?

Custom filter in a product grid helps improvise the user interface and user experience on the store. Especially when there are a huge number of products in your Magento 2 store, the filters make it easier to find the product with ease. An inline product grid can help you easily add custom filter in the Magento 2 store. 

Let us take a look at step by step process to add custom filter to product grid in the Magento 2 admin:

Step 1: Create a product_listing.xml file in the below-given path:

app\code\Vendor\Extension\view\adminhtml\ui_component\

Now, add the below code:

<?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" class="Magento\Catalog\Ui\Component\Listing\Columns">
        <column name="monthly_views" sortOrder="50">
            <settings>
                <addField>true</addField>
                <filter>dateRange</filter> <!-- Range component represents two input fields of date or text type-->
                <label translate="true">Monthly views</label>
            </settings>
        </column>
    </columns>
</listing>

Step 2: Create a di.xml file in the below-given path:

app\code\Vendor\Extension\etc\adminhtml\

Now, add the below code:

<?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="monthly_views" xsi:type="object">
                    Vendor\Extension\Ui\DataProvider\Product\Monthlyviewsfieldtocollection
                </item>
            </argument>
            <argument name="addFilterStrategies" xsi:type="array">
                <item name="monthly_views" xsi:type="object">
                     Vendor\Extension\Ui\DataProvider\Product\Monthlyviewsfiltertogrid
                </item>
            </argument>
        </arguments>
    </type>
</config>

Step 3: Create a Monthlyviewsfieldtocollection.php file in the below-given path:

app\code\Vendor\Extension\Ui\DataProvider\Product\

Now, add the below code:

<?php
namespace Vendor\Extension\Ui\DataProvider\Product;

use Magento\Framework\Data\Collection;
use Magento\Ui\DataProvider\AddFieldToCollectionInterface;

class Monthlyviewsfieldtocollection implements AddFieldToCollectionInterface
{
    public function addField(Collection $collection, $field, $alias = null)
    {
        $collection->joinField(
            'monthly_views',
            'report_viewed_product_aggregated_monthly',
            'views_num',
            'product_id=entity_id',
             null,
            'left'
        );
    }
}

Step 4: Create a Monthlyviewsfiltertogrid.php file in the below-given path:

app\code\Vendor\Extension\Ui\DataProvider\Product\

Now, add the below code:

<?php
namespace Vendor\Extension\Ui\DataProvider\Product;
use Magento\Framework\Data\Collection;
use Magento\Ui\DataProvider\AddFilterToCollectionInterface;
class Monthlyviewsfiltertogrid implements AddFilterToCollectionInterface
{
    public function addFilter(Collection $collection, $field, $condition = null)
    {
        if (isset($condition['gteq'])) {
            $collection->addFieldToFilter([['attribute' => 'monthly_views', 'gteq' => $condition['gteq']]]);
        }
        if (isset($condition['lteq'])) {
            $collection->addFieldToFilter([['attribute' => 'monthly_views', 'lteq' => $condition['lteq']]]);
        }
    }
}

Once you implement the above steps, a custom filter gets successfully added to the product grid list in Magento 2 as shown below:

Let us look at the customer filter with other filter options as seen in the image below:

Hope this tutorial has been helpful to add a product grid to your Magento 2 store. If you face any issues while implementation, feel free to reach out. Our experts will be happy to guide.