Filter is a filtering component where a user can filter through data to get customized search results.
Overview
Filter is a useful utility component which can house large amounts of data. Users can interact with the data most relevant to their workflow without having all data load on initialization, allowing your application to load faster and be more accessible to wider audiences.
Visit the Filter recent earthquakes tutorial to view an application of the Filter component.
Usage
- Limit large data from loading on initialization
- Enable your user to navigate through data
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
filteredItems | The component's resulting items after filtering. | Array<object> | ||
filterProps | Specifies the properties to match against when filtering. This will only apply when value is an object. If not set, all properties will be matched. | Array<string> | ||
items | Defines the items to filter. The component uses the values as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search. This property is needed to conduct filtering. | Array<object> | ||
label | label | Specifies an accessible name for the component. | string | |
messageOverrides | Use this property to override individual strings used by the component. | {
label?: string;
clear?: string;
} | ||
placeholder | placeholder | Specifies placeholder text for the input element. | string | |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
value | value | The component's value. | string |
Events
Name | Description | Behavior |
---|---|---|
calciteFilterChange | Fires when the filter text changes. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
filter | Performs a filter on the component. This method can be useful because filtering is delayed and asynchronous. | filter(value?: string): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |