Analytics & Reports
Analytics

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 Required 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.