How to add Store View Filter in Custom Listing Grid In Magento 2.X?

Question

I have created a custom module in my Magento 2.3.1 site. The module has Admin Listing Grid and Add/Edit view. My site is multi-store site, Now I want to display "Store View" filter in listing grid at admin. Can you anyone guide me to add it? I also want to filter the listing result as per the filtered store id. Please see attached screenshot of Magento CMS module filters. I want to add same "Store View" filter in my custom module listing grid. I have used "ui_component" .xml file to display listing grid in my module. So, Please help to add "Store View" filter in "ui_component" xml file.

Thank you in advance.

Answer 1

Create a column similar to this in your ui component for the grid page or update the already existing one with options and config nodes just as below.

<column name="some_name">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Magento\Cms\Ui\Component\Listing\Column\Cms\Options</item>
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">select</item>
            <item name="label" xsi:type="string" translate="true">Store view</item>
            <item name="dataType" xsi:type="string">select</item>
            <item name="editor" xsi:type="array">
                <item name="editorType" xsi:type="string">select</item>
            </item>
        </item>
    </argument>
</column>

Answer 2

Add a <listingToolbar ...> key to your XML file if you don't have it.

Then, add the following into it:

<listingToolbar name="listing_top">
    ...
    <filters name="listing_filters">
        <filterSelect name="store_id" provider="${ $.parentName }">
            <settings>
                <options class="Magento\Store\Ui\Component\Listing\Column\Store\Options"/>
                <caption translate="true">All Store Views</caption>
                <label translate="true">Store View</label>
                <dataScope>store_id</dataScope>
            </settings>
        </filterSelect>
    </filters>
</listingToolbar>

Please note:

The ... means you have to mix this code with the rest of your listingToolbar settings if you already have it.

Also, mix the filterSelect with the rest of your filters settings if you already have a <filters ...> key in your XML file.

The dataScope store_id is a reference to your Store ID column. In a normal situation, its name should be store_id but it could be also different. If it doesn't work, check if your name attribute of your Store ID column matches with your <columns ...> settings.