Filters component
Overview
The Filters component renders UI controls for filtering and applies filtering. Must be a child of the Listing component.
See the Admin Design Pattern Library (Filters) topic for information about the UI design patterns that can be implemented using Filters component.
Structure
Constructor: app/code/Magento/Ui/view/base/web/js/grid/filters/filters.js
Filters configuration
Extends all uiCollection configuration.
Filters-specific configuration:
Option | Description | Type | Default Value |
---|---|---|---|
chipsConfig |
Configuration passed to the FiltersChips component. |
Object | Configuration that is passed to the FiltersChips component. |
statefull |
Defines a list of component properties whose values are automatically saved in the configured storage if they change. key is the property's name and the value defines whether its saved. |
{ [name: string]: boolean } |
|
stickyTmpl |
Additional .html template that displays filters when the Toolbar component gets a fixed position. |
String | ui/grid/sticky/filters |
template |
Path to the component’s .html template. |
String | ui/grid/filters/filters |
templates.filters |
Describes basic filter types. This definitions are used to dynamically create filter elements based on the filter field specified in the corresponding column. For example, if a column's filter property contains the text value, then a Filter component instance with a definition for the text type will be created. |
Object | Contains definitions of the text , select ,dateRange and textRange filter types. |
Examples
Example 1: Add a new customer attribute and make it filterable
To add a new customer attribute to the customer grid and make it filterable, you need to follow these steps:
- Сreate view/adminhtml/ui_component/customer_listing.xml to add a column component
- Сreate the column component PHP class which extends Magento\Ui\Component\Listing\Columns\Column
- Сreate etc/indexer.xml to add the attribute to the customer_grid index and define it as filterable
- Set is_used_in_grid to true for the attribute
Example 2: Add a custom calculated filter
…