Improve this doc View source

pfFilter
directive in module patternfly.filters

Description

Component for a filter bar

Usage

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

Parameters

ParamTypeDetails
configobject

configuration settings for the filters:

  • .fields - (Array) List of filterable fields containing:
    • .id - (String) Optional unique Id for the filter field, useful for comparisons
    • .title - (String) The title to display for the filter field
    • .placeholder - (String) Text to display when no filter value has been entered
    • .filterMultiselect - (Boolean) In complex-select, allow selection of multiple categories and values. Optional, default is false
    • .filterType - (String) The filter input field type (any html input type, or 'select' for a single select box or 'complex-select' for a category select box)
    • .filterValues - (Array) List of valid select values used when filterType is 'select' or 'complex-select' (in where these values serve as case insensitve keys for .filterCategories objects)
    • .filterCategories - (Array of (Objects)) For 'complex-select' only, array of objects whoes keys (case insensitive) match the .filterValues, these objects include each of the filter fields above (sans .placeholder)
    • .filterCategoriesPlaceholder - (String) Text to display in complex-select category value select when no filter value has been entered, Optional
    • .filterDelimiter - (String) Delimiter separating 'complex-select' category and value. Optional, default is a space, ' '
  • .inlineResults - (Boolean) Flag to show results inline with the filter selection (default: false)
  • .appliedFilters - (Array) List of the currently applied filters
  • .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' selected
  • .showTotalCountResults - (Boolean) Optional, flag to show the total count in the filter results as well (ie. 'n' of 'm' Results)
  • .itemsLabel - (String) Optional label to use for the items in the results count (default: Result)
  • .itemsLabelPlural - (String) Optional label to use for the items in the resuults count when plural (default: Results)
  • .onFilterChange - ( function(array of filters) ) Function to call when the applied filters list changes

Example

Source













Demo