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:

  1. Сreate view/adminhtml/ui_component/customer_listing.xml to add a column component
  2. Сreate the column component PHP class which extends Magento\Ui\Component\Listing\Columns\Column
  3. Сreate etc/indexer.xml to add the attribute to the customer_grid index and define it as filterable
  4. Set is_used_in_grid to true for the attribute

Example 2: Add a custom calculated filter