Filters component

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.

Configuration options

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

Add a new filterable customer attribute

To add a new customer attribute to the customer grid and make it filterable, you need to follow these steps:

  1. Create view/adminhtml/ui_component/customer_listing.xml to add a column component
  2. Create the column component PHP class which extends Magento\Ui\Component\Listing\Columns\Column
  3. Create 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

Source files

Extends uiCollection: