Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Os componentes de filtro do Looker oferecem a funcionalidade avançada de filtro do Looker para aplicativos de dados personalizados criados com base no Looker.
Componentes do Looker
Os componentes do Looker são partes pré-criadas do aplicativo do Looker baseadas em React. Os desenvolvedores de aplicativos podem usar componentes em aplicativos de dados e extensões criadas com base no Looker.
Os componentes de filtro oferecem a funcionalidade avançada de filtro do Looker para aplicativos de dados personalizados e painéis incorporados personalizados do Looker. Usando a API Looker (por meio de um SDK ou uma extensão) para buscar JSON em um determinado painel, os desenvolvedores podem incluir o componente de filtro no aplicativo e transmitir as propriedades de cada filtro no painel. O componente renderiza cada filtro de acordo com o campo e a configuração de interface armazenada.
Os componentes de filtro são entregues em dois pacotes que funcionam juntos: @looker/filter-components e @looker/filter-expressions. O pacote @looker/filter-components renderiza um componente de filtro usando um campo, um tipo de filtro e as expressões de filtro atuais, que estão disponíveis em qualquer filtro do painel. O pacote @looker/filter-expressions transforma expressões de filtro em estruturas de dados que podem ser usadas por @looker/filter-components.
Por que usar componentes de filtro?
Os componentes de filtro liberam tempo para os desenvolvedores e permitem que os analistas que trabalham no Looker criem e mantenham experiências de usuário robustas e personalizáveis. Os componentes de filtro do Looker oferecem os seguintes benefícios:
Experiências de filtro de alta qualidade: os componentes de filtro oferecem a lógica avançada de filtro do Looker e uma ampla variedade de controles de filtro para se adequar melhor aos tipos de filtro necessários.
Desenvolvimento rápido: os componentes de filtro oferecem acesso imediato aos filtros, permitindo que os desenvolvedores se concentrem em outras tarefas e acelerem o desenvolvimento geral.
Personalização: os controles de filtro podem ser personalizados de acordo com a aparência e a sensação do aplicativo, da extensão ou do painel incorporado. Os desenvolvedores podem usar componentes de filtro para oferecer mais personalização do que nunca.
Vinculado a painéis do Looker: um componente de filtro pode ser conectado diretamente a um filtro em um painel do Looker, e uma versão desse filtro será renderizada no aplicativo, na extensão ou na incorporação do Looker que está usando o componente. Qualquer usuário com acesso de edição ao painel do Looker conectado ao componente de filtro pode editar o filtro no painel do Looker, o que atualiza o filtro no aplicativo, na extensão ou na incorporação. Isso libera tempo para os desenvolvedores, porque eles não precisam ser chamados sempre que há um motivo comercial para ajustar um filtro.
Vinculados ao modelo do Looker: os componentes de filtro sabem das mudanças no modelo do Looker em que foram criados. Isso significa que os campos de filtro e outras opções são dinâmicos e são atualizados junto com as atualizações do modelo.
Informações sobre a instalação e o uso dos pacotes de componentes de filtro podem ser encontradas no documento README de cada pacote, disponível no NPM ou no GitHub.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Difícil de entender","hardToUnderstand","thumb-down"],["Informações incorretas ou exemplo de código","incorrectInformationOrSampleCode","thumb-down"],["Não contém as informações/amostras de que eu preciso","missingTheInformationSamplesINeed","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2025-07-31 UTC."],[],[],null,["# Looker filter components\n\n\u003e Looker filter components provide Looker's rich filter functionality for custom data applications that are built on top of Looker.\n\nLooker components\n-----------------\n\n[Looker components](/looker/docs/components-getting-started) are React-based, prebuilt pieces of Looker's application. Application developers can use components in data applications and extensions that are built on top of Looker.\n\nComponents can be used with the [Looker extension framework](/looker/docs/extension-framework) and [Looker's Embed SDK](/looker/docs/embed-sdk).\n\nLooker filter components\n------------------------\n\nFilter components provide Looker's rich filter functionality for custom-built data applications and customized embedded Looker dashboards. Using the Looker API (through an [SDK](/looker/docs/embed-sdk) or [Extension](/looker/docs/extension-framework)) 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.\n\nThe filter components package offers 12 types of filter controls, similar to the controls [available for Looker's own dashboards](/looker/docs/filters-user-defined-dashboards#dashboard_filter_controls): \n- Button group\n- Checkbox\n- Tag list\n- Range slider\n- Button toggle\n- Radio button \n- Drop-down menu\n- Slider\n- Single day\n- Date range\n- Timeframe\n- Advanced\n\nFilter components are delivered through two packages that work together: [`@looker/filter-components`](https://github.com/looker-open-source/components/tree/main/packages/filter-components#readme) and [`@looker/filter-expressions`](https://github.com/looker-open-source/components/tree/main/packages/filter-expressions#readme). The `@looker/filter-components` package renders a filter component by using [a field, a filter type, and current filter expressions](https://github.com/looker-open-source/components/blob/main/packages/filter-components/USAGE.md#filter), 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`.\n\nWhy use filter components?\n--------------------------\n\nFilter 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:\n\n- **High-quality filter experiences** --- Filter components provide Looker's rich filter logic and a wide range of filter controls to best fit the types of filters you need.\n- **Speed development** --- Filter components provide \"out-of-the-box\" access to filters, allowing developers to focus on other tasks and speeding overall development.\n- **Customization** --- Filter controls can be customized to the look and feel of your application, extension, or embedded dashboard. Developers can use filter components to provide more customization than ever before.\n- **Linked to Looker dashboards** --- A filter component can be connected directly to a filter on a Looker dashboard, and a version of that filter will be rendered in the Looker application, extension, or embed that is using the component. Any user who has edit access to the Looker dashboard that is connected to the filter component can edit the filter on the Looker dashboard, which updates the filter in the application, extension, or embed. This frees up developer time because a developer is not required every time there is a business reason to adjust a filter.\n- **Tied to the Looker model** --- Filter components are aware of changes to the Looker model on which they are built, which means filter fields and other options are dynamic and will update along with updates to the underlying model.\n\nInstalling and using filter components\n--------------------------------------\n\nDownload the [`@looker/filter-components`](https://www.npmjs.com/package/@looker/filter-components) and [`@looker/filter-expressions`](https://www.npmjs.com/package/@looker/filter-expressions) packages from the `@looker/components` NPM repository.\n\nInformation on installing and using the filter components packages can be found in the README document for each package, available in NPM or [GitHub](https://github.com/looker-open-source/components/tree/main/packages/filter-components).\n\nA [filter components demo application](https://github.com/looker-open-source/components/tree/%40looker/components%403.0.8/apps/filter-demo) is available on GitHub. Instructions for using the demo appear in its README document."]]
