Filter

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

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
filteredItemsread-onlyThe component's resulting items after filtering.Array<object>
filterPropsSpecifies 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>
itemsDefines 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>
labellabelSpecifies an accessible name for the component.string
messageOverridesUse this property to override individual strings used by the component.{ label?: string; clear?: string; }
placeholderplaceholderSpecifies placeholder text for the input element.string
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
valuevalueThe component's value.string

Events

NameDescriptionBehavior
calciteFilterChangeFires when the filter text changes.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
filterPerforms a filter on the component. This method can be useful because filtering is delayed and asynchronous.filter(value?: string): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close