List overview (deprecated) - SKY UX design system

Modern visual theme

Lists display data in a consistent, flexible way.

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

See documentation for the list view grid or list view checklist for how to set up demos.

Components

Installation

Defined in: SkyListModule 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

SkyListComponent

Selector

sky-list

Input Description

appliedFilters?: ListFilterModel[]

The set of filters to apply to list data. These filters create a filter summary when the list includes the sky-list-filter-summary component.

Optional. Default is [].

data?: any[] | Observable<any[]>

The data to display. The list component requires this property or the dataProvider property. For checklist or multiselect grids, each row requires an id property to manage selected items with the selectedIds input and the selectedIdsChange event. If you do not provide an id, the list automatically generates one. To update data in your view outside of a dataProvider, you must use an observable instead of a static array.

Optional. Default is [].

dataProvider?: ListDataProvider

The data provider that obtains the data to display. The list component requires this property or the data property. For lists that use dataProvider instead of data, consumers are responsible for managing all ListDataRequestModel properties.

Optional. Default is SkyListInMemoryDataProvider.

initialTotal?: number

The total number of items for the initial data set when initialized. When used in conjunction with data and dataProvider, it allows an initial data to be set with the need to call the dataProvider.

Optional.

search?: (data: any, searchText: string) => boolean

The function to apply as a global sort on the list.

Optional.

Parameters

`data: any`
`searchText: string`

Returns

boolean

selectedIds?: string[] | Observable<string[]>

The set of IDs for the items to select in a checklist or multiselect grid. The IDs match the id properties of the data objects. Items with IDs that are not included are de-selected in the checklist or multiselect grid.

Optional.

sortFields?: ListSortFieldSelectorModel | ListSortFieldSelectorModel[] | Observable<ListSortFieldSelectorModel[]> | Observable<ListSortFieldSelectorModel>

The set of fields to sort by. If array of fields then sorted by order of array. For information about ListSortFieldSelectorModel, see the shared classes for lists.

Optional.

Event	Description
`appliedFiltersChange: EventEmitter<ListFilterModel[]>`	Emits the filters applied to the list.
`selectedIdsChange: EventEmitter<Map>`	For list views that support item selection, emits the selected entries.

Classes

ListDataRequestModel

Property	Description
`filters?: ListFilterModel[]`	The function that determines whether items are filtered. This property is required when using an in-memory data provider. Optional.
`isToolbarDisabled?: boolean`	Whether to disable the search bar and filter button. Optional. Default is `false`.
`pageNumber?: number`	The current page number. Optional.
`pageSize?: number`	The number of items to display per page. Optional.
`search?: ListSearchModel`	The function to dynamically manage the data source when users change the text in the list field. The search function must return an array or a promise of an array. The `search` property is particularly useful when the data source does not live in the source code. Optional.
`sort?: ListSortModel`	The set of fields to sort by. Optional.

ListDataResponseModel

Property	Description
`count?: number`	The total number of records in the list. Optional.
`items?: ListItemModel[]`	An array of the items returned. For information about `ListItemModel`, see the shared classes for lists. Optional.

ListSearchModel

Specifies a function to dynamically manage the data source when users change the text in the list field. The search function must return an array or a promise of an array. The search property is particularly useful when the data source does not live in the source code.

Property Description

fieldSelectors?: string[]

The columns to search. The columns correspond to field values that you specify with the list component's data property.

Optional. Default is [].

functions?: ((data: any, searchText: string) => boolean)[]

The array of functions that returns a boolean value of true when the search is successful. This property accepts a function of type (data: any, searchText: string) => boolean>.

Optional. Default is [].

Parameters

`data: any`
`searchText: string`

Returns

boolean

searchText?: string

The text to search.

Optional. Default is "".

ListSelectedModel

Contains data about the selected items in the list.

Property	Description
`selectedIdMap?: Map<string, boolean>`	A map of key value pairs that consists of IDs for selected items and boolean values for their selected states. Optional.

ListSortLabelModel

These properties are a work in progress, and we do not recommend using them.

Property	Description
`descending?: boolean`	Whether to sort in descending order. Optional. Default is `false`.
`fieldSelector?: string`	The fields to sort. Optional.
`fieldType?: string`	The label type. Optional.
`global?: boolean`	Whether to sort all fields. Optional. Default is `false`.
`text?: string`	The text for the label. Optional.

ListSortModel

Specifies a set of fields to sort by.

Property	Description
`available?: ListSortLabelModel[]`	The list of available views to sort. Optional. Default is `[]`.
`fieldSelectors?: ListSortFieldSelectorModel[]`	The fields to sort. For information about `ListSortFieldSelectorModel`, see the shared classes for lists. Optional. Default is `[]`.
`global?: ListSortLabelModel[]`	The list views that the sort applies to. Optional. Default is `[]`.