PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. We strongly recommend planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.
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:
- 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
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
