How to add filter on a renderer column in Magento 2?

Question

I have created a custom module with grid. See below image:

Column product sku is render using product_id

<column name="product_id" class="Lime\SN\Ui\Component\Listing\Column\ProductSku">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filter" xsi:type="string">text</item>
                <item name="label" translate="true" xsi:type="string">Product SKU</item>

            </item>
        </argument>
    </column>

I want to add filter on renderer column, but its not working, how can I custom default filter function in magento 2?

Answer 1

You need to add <item name="filter" xsi:type="string">select</item> to your filed

Don't renderer whole field, just renderer option like this

<column name="product_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Lime\SN\Ui\Component\Listing\Column\ProductSku</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="label" xsi:type="string" translate="true">Product SKU</item>
            <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="editor" xsi:type="array">
            <item name="editorType" xsi:type="string">select</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">false</item>
                </item>
            </item>
        </item>
    </argument>
</column>

Now pass option array to toOptionArray at ProductSku.php

Lime\SN\Ui\Component\Listing\Column\ProductSku.php

<?php

namespace Lime\SN\Ui\Component\Listing\Column;

class ProductSku implements \Magento\Framework\Option\ArrayInterface
{
    private $skuCollection;

    public function __construct(
        //construct Class
    ) {
        //define variable
    }

    public function toOptionArray()
    {
        $skuArr = [];

        // You logic here

        return $skuArr;
    }
}