Filtered List

A container for an unordered list of items. The items are filtered by the value of this component’s input field. This component also has an optional “Select All” button that allows a user to act on all items when clicked. When enabled, the button appears when there is text inside the filter input box.

The list is paginated by default, but filtering and selecting occurs across all items.

Example

const items = ['a', 'b', 'c'];
<gb-filtered-list items="{ items }"></gb-filtered-list>

Properties

Property	Type	Default	Notes
`items`	Item[]	`[]`	An array of items to be filtered. Items are filtered by substring match for strings and substring match of the `value` property for objects.
`onFilterFocus`	function		The `onfocus` handler to attach to the filter input box.
`onSelectAll`	function		The `onclick` handler to attach to the “Select All” button.
`enableSelectAll`	boolean		`true` to enable the “Select All” button, `false` otherwise.
`selectAllLabel`	string	`'Select All'`	The label the “Select All” button displays.
`paginate`	boolean	`true`	`true` to paginate the items, `false` otherwise.

State

Property	Type	Default	Notes
`items`	Item[]	`[]`	The items that are currently displayed.

Events

This component does not listen for any events.