List filters (deprecated) - SKY UX design system

Modern visual theme

List filters provide filtering capabilities for a SKY UX-themed list of data.

Lists and their features are deprecated starting in SKY UX 6. We will remove them in a future major version. We recommend using data manager instead.

Demo

Components

Installation

Defined in: SkyListFiltersModule None found.
NPM package: @skyux/list-builderView in NPM | View in GitHub None found.
Installation: npm install --save-exact @skyux/list-builder
None found.

Components

SkyListFilterButtonComponent

Contains a filter button for the list toolbar. Place a sky-filter-button component inside this component to open a modal with filtering options. To apply filter options, use the list component's appliedFilters property.

Selector

sky-list-filter-button

SkyListFilterSummaryComponent

Creates a filter summary based on the list component's appliedFilters property. Place this component within the sky-list-toolbar component.

Selector

sky-list-filter-summary

Event	Description
`summaryItemClick: EventEmitter<ListFilterModel>`	Emits a `ListFilterModel` when users select a summary item. A common use case is to open a filter modal when this event is received.

SkyListFilterInlineItemComponent

Creates a filter in the list's inline filter area.

Selector

sky-list-filter-inline-item

Input Description

name: string

Required.

The name of the filter.

template: TemplateRef<unknown>

Required.

The template for the filter. The template can access the filter variable that contains the value of the filter control, which should be bound to ngModel, and the changed function, which should be called when the model changes.

defaultValue?: any

The default value of the filter. If the value of the filter is set to the default value, then the filter is not applied.

Optional.

filter?: (item: ListItemModel, filter: any) => boolean

The function that determines whether an item is filtered. This property is required when using an in-memory data provider. For information about ListItemModel, see the shared classes for lists.

Optional.

Parameters

`item: ListItemModel`
`filter: any`

Returns

boolean

value?: any

The current value of the filter.

Optional.

SkyListFilterInlineComponent

Creates an inline filter area for the list. Place each filter in a sky-list-filter-inline-item component.

Selector

sky-list-filter-inline

Classes

ListFilterModel

Property Description

name: string

Required.

The name of the filter.

defaultValue?: any

The default value of the filter. When a filter equals the default value, the filter does not affect the list.

Optional.

dismissible?: boolean

Whether users can dismiss the filter's summary item.

Optional. Default is true.

filterFunction?: (item: ListItemModel, filter: any) => boolean

The function that determines whether items are filtered. This property is required when using an in-memory data provider. For information about ListItemModel, see the shared classes for lists.

Optional.

Parameters

`item: ListItemModel`
`filter: any`

Returns

boolean

label?: string

The label for the filter's summary item. The label defaults to the value of the filter.

Optional.

value?: any

The current value of the filter.

Optional.