How to Filter UI Component Grid Collection in Magento 2

Magento grids plays vital role when it comes to displaying data in efficient way. Filtration to these grids are an added charm to get accurate data based on requirements. Once we require a specific implementation to filter UI component grid collection.

Here, I’m going to share the custom code which you can implement to UI component grid collection in Magento 2.

Paste the below code in UI component grid xml file to create a column. Use the same code with required changes to create as many columns as you want.

<pre class="lang:default decode:true ">
<dataSource name="test_comments_listing_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Magento\Customer\Ui\Component\DataProvider</argument>
        <argument name="name" xsi:type="string">test_comments_listing_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">id</argument>
        <argument name="requestFieldName" xsi:type="string">id</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="update_url" xsi:type="url" path="mui/index/render"/>
                <item name="filter_url_params" xsi:type="array">
                    <item name="status" xsi:type="string">*</item>
                </item>
            </item>
        </argument>
    </argument>
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
        </item>
    </argument>
</dataSource>
</pre>

From the above code, make changes as shown below to fetch the filter options. Inside the argument tag, you can see an item tag with name filter_url_params which is responsible to filter collection. In order to make it work, set parameter name inside name attribute of item tag through which you require to filter. Below code displays the example of filter by status on a collection, here you need to pass the status value through URL.

<pre class="lang:default decode:true ">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="update_url" xsi:type="url" path="mui/index/render"/>
        <item name="filter_url_params" xsi:type="array">
            <item name="status" xsi:type="string">*</item>
        </item>
    </item>
</argument>
</pre>

Hope this blog has helped you to filter grid collection in proper way.

Let me know if you stuck with any issue, I’ll be glad to help you. Waiting for your feedback and reviews in comment section below.