Improve this doc View source

pfFilterPanel
directive in module patternfly.filters

Description

The Filter Panel is opened and closed by clicking on the Filter button. It can contain any HTML desired by the application developer. As such, the application developer is repsonsible for constructing the appliedFilters array which is passed to the filter results tags. The application developer is responsible for filtering items based on the appliedFilters array; both when a filter is changed on the panel, or when a filter tag is 'cleared' (by user clicking on 'x' in the filter results tag).

Usage

as element:
<pf-filter-panel
       config="{object}">
</pf-filter-panel>

Parameters

ParamTypeDetails
configobject

configuration settings for the filters:

  • .appliedFilters - (Array) List of the currently applied filters. Used to render the filter results tags and returned in the onFilterChange function where it can be used to filter a set of items.
    • .id - (String) Id for the filter, useful for comparisons
    • .title - (String) The title to display for the filter results tag
    • .values - (Array) The value(s) to display for the filter results tag. Ie. [title: [value1 x] [value2 x]]
  • .resultsCount - (int) The number of results returned after the current applied filters have been applied
  • .totalCount - (int) The total number of items before any filters have been applied. The 'm' in the label: 'n' of 'm'
  • .resultsLabel - (String) Optional label for the result units. Default is "Results". Ex: "'n' of 'm' Results"
  • .onFilterChange - ( function(appliedFilters, changedFilterId, changedFilterValue) ) Function to call when the applied filters list changes. Triggered by user clicking on 'x' or 'Clear All Filters' in the filter result tags. changedFilterId and changedFilterValue are returned after user clicks on an 'x' in a tag to denote which filter and filter value was cleared. changedFilterId and changedFilterValue are not returned when 'Clear All Filters' link is clicked.

Example

Source













Demo