home User Guide Getting Started Help Center Documentation Community Training Certification
Looker keyboard_arrow_down
language keyboard_arrow_down
Looker filter components

Looker filter components provide Looker’s rich filter functionality for custom data applications that are built on top of Looker.

Looker components

Looker components are React-based, pre-built pieces of Looker’s application UI. Application developers can use components in data applications and extensions that are built on top of Looker. To see a full list of Looker’s components, visit the Looker UI Components website.

Components can be used with the Looker extension framework and Looker’s Embed SDK.

Looker filter components

Filter components provide Looker’s rich filter functionality for custom-built data applications and customized embedded Looker dashboards. Using the Looker API (through an SDK or Extension) to fetch JSON for a given dashboard, developers can include the filter component in their application and pass in the properties of each filter in the dashboard. The component will then render each filter according to its field and stored UI configuration.

The filter components package offers 12 types of filter controls, similar to the controls available for Looker’s own dashboards:

  • Button group
  • Checkbox
  • Tag list
  • Range slider
  • Button toggle
  • Radio button
  • Drop-down menu
  • Slider
  • Single day
  • Date range
  • Timeframe
  • Advanced

Filter components are delivered through two packages that work together: @looker/filter-components and @looker/filter-expressions. The @looker/filter-components package renders a filter component by using a field, a filter type, and current filter expressions, which are available from any dashboard filter. The @looker/filter-expressions package transforms filter expressions into data structures that can be used by @looker/filter-components.

Why use filter components?

Filter components free up developer time and allow analysts who are working in Looker to build and maintain robust, customizable user experiences. Looker filter components provide the following benefits:

Installing and using filter components

Download the @looker/filter-components and @looker/filter-expressions packages from the @looker/components NPM repository.

Information on installing and using the filter components packages can be found in the README document for each package, available in NPM or GitHub. A filter components demo is also available in GitHub.