Magento2 Multi-select Filter on Admin Grid

Add Multi-select Filter on Admin Grid

Here i am going explain how to add Multi-select Filter on Admin Grid by ui-Component.

I am going to add Multi-select filter on customer grid, you can even add it on your
custom Module’s grid as well.

1. Create file:
Webkul/MultiSelectFilter/view/adminhtml/ui_component/customer_listing.xml

Note:
1. Webkul is Package Name and MultiSelectFilter is Module Name.
2. ‘private_group’ is the column name for customer’s attribute.
3. The file “Webkul\MultiSelectFilter\Ui\Component\Listing\Column\Customer\Groups” is used to modify column value, you can remove it, if your column value is the same as you want.

<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
 * Webkul Software
 *
 * @category Webkul
 * @package Webkul_MultiSelectFilter
 * @author Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
-->
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <listingToolbar name="listing_top">
         <filters name="listing_filters">
            <filterSelect name="private_group" provider="${ $.parentName }" component="Magento_Ui/js/form/element/ui-select" template="ui/grid/filters/elements/ui-select">
                <settings>
                    <options class="Webkul\MultiSelectFilter\Model\PrivateGroup\GroupList"/>
                    <caption translate="true">Select...</caption>
                    <label translate="true">Private Groups</label>
                    <dataScope>private_group</dataScope>
                    <imports>
                        <link name="visible">componentType = column, index = ${ $.index }:visible</link>
                    </imports>
                </settings>
            </filterSelect>
        </filters>
    </listingToolbar>
    <columns name="customer_columns" class="Magento\Customer\Ui\Component\Listing\Columns">
        <column name="private_group" class="Webkul\MultiSelectFilter\Ui\Component\Listing\Column\Customer\Groups" sortOrder="100">
            <settings>
                <dataType>select</dataType>
                <sortable>false</sortable>
                <label translate="true">Private Groups</label>
            </settings>
        </column>
    </columns>
</listing>

2. Lets create File: Webkul\MultiSelectFilter\Model\PrivateGroup\GroupList.php

<?php
namespace Webkul\MultiSelectFilter\Model\PrivateGroup;

/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_MultiSelectFilter
 * @author    Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */

class GroupList implements \Magento\Framework\Option\ArrayInterface
{
    public function toOptionArray()
    {
        $options = [];
        $options[] = ['label' => 'VIP Group', 'value' => '1'];
        $options[] = ['label' => 'Premium Type', 'value' => '2'];
        return $options;
    }
}

3. Finally flush the cache and load customer grid.

you will be able to see like below image: