🧼 Simple Filters

The SimpleFilters component provides a minimal, plug-and-play way to create dropdown or date filters powered by your Lens view config. It supports filtering fields based on enums, relationships, or date values and can express hierarchical filters using dependency chains.

✨ Overview

At its core, SimpleFilters reads from a special config object (typically called lensSimpleFilters) and renders interactive filter elements. These filters are most useful for quick filtering of data in views such as tables, cards, or dashboards.

🧱 Configuration Object

The filters are defined in the lensSimpleFilters config within a view:

lensSimpleFilters: {
  "state.name": {
    type: "enum",
    label: "States",
    model: "state",
  },
  "district.name": {
    type: "enum",
    label: "District",
    model: "district",
    dependsOn: ["state.name"],
  },
  "category": {
    type: "enum",
    label: "Category",
    model: "category",
    options: [
      { title: "One", const: "One" },
      { title: "Two", const: "Two" },
    ],
  },
}

🧠 Internals and Context Behavior

SimpleFilters relies on a SimpleFilterContextProvider, which connects to two key providers:

LensContext: Provides access to APIs and global config like read_relation_option.
ViewContext: Provides the filters, setFilters, and config for the current view.

🔄 Initialization Flow

It reads the config from the current view (ViewContext.config.filters)
Filters marked with asSimple: true are selected
These filters are converted into an attributesArray
Default filter values are initialized via the initilizeFilter utility
The SimpleFiltersContext exposes methods to update conditions and apply filters

📦 Provided Context Values

The SimpleFiltersContext shares the following via React context:

Key	Description
`attributesArray`	List of simple filters to render
`initialisedFilter`	Either provided `defaultFiltersValue` or generated from the config
`filterContainerRef`	Ref used for scrolling/styling
`setFilters`	View-level function to apply updated filters
`updateCondition`	Function to update a specific filter condition
`filter`	Flattened version of active filters (excluding nested conditions)
`queryEndpoint`	API endpoint used to load enum filter options dynamically
`permissionHeaders`	Any extra headers needed for backend permission enforcement
`classNames`	Optional class overrides for styling the wrapper and filters

🧩 Component Usage

<SimpleFilters
  defaultFiltersValue={{
    "state.name": "Uttar Pradesh",
    "district.name": "Lucknow"
  }}
  viewId="asset-summary"
  asChip
/>

🧠 Best Practices

Use dependsOn in your filter config to enforce selection order (state → district → city).
Provide static options only for standalone filters; prefer model when dynamic loading is needed.
Wrap SimpleFilters inside views powered by LensProvider and ViewContext.

Let me know if you'd like to go deeper into SimpleFiltersList, rendering filters as chips, or overriding filter UI!

Simple Filters

On this page