FiltersChips component

The FiltersChips component provides UI controls that allows users to remove the previously-applied values of the Filters and Search components.

Options

Source files

Extends uiCollection:

• app/code/Magento/Ui/view/base/web/js/grid/filters/chips.js
• app/code/Magento/Ui/view/base/web/templates/grid/filters/chips.html

Examples

Integration

This is an example of how the FiltersChips component integrates with the Filters component:

Copy
<listing>
    <listingToolbar>
        <filters name="listing_filters">
            <settings>
                <chipsConfig>
                    <param name="component" xsi:type="string">Magento_Ui/js/grid/filters/chips</param>
                    <param name="componentType" xsi:type="string">filtersChips</param>
                    <param name="template" xsi:type="string">ui/grid/filters/chips</param>
                </chipsConfig>
            </settings>
        </filters>
    </listingToolbar>
</listing>
Copied to your clipboard
<listing>
    <listingToolbar>
        <filters name="listing_filters">
            <settings>
                <chipsConfig>
                    <param name="component" xsi:type="string">Magento_Ui/js/grid/filters/chips</param>
                    <param name="componentType" xsi:type="string">filtersChips</param>
                    <param name="template" xsi:type="string">ui/grid/filters/chips</param>
                </chipsConfig>
            </settings>
        </filters>
    </listingToolbar>
</listing>

Result