FiltersChips component

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

Configuration options

Option Description Type Default Value
component The path to the component’s .js file. String Magento_Ui/js/grid/filters/chips
componentType The type of component. String filtersChips
template Path to the component’s .html template. String ui/grid/filters/chips

Source files

Extends uiCollection:

Examples

Integrate the FiltersChips component as a grid (default) with the Filters component

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<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

FiltersChips Component example