> For the complete documentation index, see [llms.txt](https://docs.gridmate.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gridmate.io/advanced-guides/filters-and-data/grid-interactive-filters.md).

# Grid - Interactive Filters

Filter grid columns by value, condition or color, like in a spreadsheet.

**Interactive Filters** offer users an authentic spreadsheet-like experience within the Salesforce platform. These advanced filters not only facilitate time savings but also enhance usability, allowing for more efficient data filtering. When this option is enabled, users can filter by a set of values or by condition like on a spreadsheet.

{% hint style="warning" %}
To build the list of values for each column, we load up to 5,000 records behind the scene.
{% endhint %}

## Enable Interactive Filters

{% tabs %}
{% tab title="Smart Grids" %}
To enable **Interactive Filters** for smart grids (GM - RelatedList Grid, GM - FieldSet Grid, GM - ListView Grid), edit the Lightning page in the App Builder, select the Grid and check **Enable Interactive Filters**.

<figure><img src="https://4046919449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEsSbGy_U_OhthKUpxu%2Fuploads%2FV7xkNANQoTyaRYI1ju2X%2FScreenshot%202023-07-17%20at%2012.45.22.png?alt=media&#x26;token=403d2dd2-fae4-498e-9f4b-d2bf86d3b63d" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="User Grids" %}
To enable **Interactive Filters** for User Grids, enable the feature at the Org level through the **DataGrid Settings.**

<figure><img src="https://4046919449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEsSbGy_U_OhthKUpxu%2Fuploads%2Fw6eSxTK9hAI01ajenTkT%2FScreenshot%202024-05-10%20at%2014.55.32.png?alt=media&#x26;token=30f1848a-2614-48ae-8d9b-c4bdda81df37" alt=""><figcaption></figcaption></figure>

Even if the **Interactive Filters** are not enabled at the Org level, the option can be enabled at the Grid level from **Advanced** tab.

<figure><img src="https://4046919449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEsSbGy_U_OhthKUpxu%2Fuploads%2FqLjtOBCr0eE4oWZD752F%2FScreenshot%202024-05-10%20at%2015.04.26.png?alt=media&#x26;token=49a9b7f9-be36-404f-bae3-4b43b74f6e4c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The setup, on the Grid level, allows the Grid Owner to override the behavior (Enable/Disable).
{% endhint %}
{% endtab %}
{% endtabs %}

## Pagination

**Enable Pagination** and **Enable Interactive Filters** can be used together. When both are on, the header shows the range and count of the filtered records, and **Previous** / **Next** page through them. With pagination off, the grid keeps its infinite scroll.

This applies to **GM - FieldSet Grid**, **GM - RelatedList Grid**, **GM - ListView Grid** and **User Grids**. For User Grids, enable both options in the DataGrid Settings or per grid from the **Advanced** tab.

{% hint style="info" %}
Interactive filters work on the records loaded in memory (up to 5,000), so the record count reflects the filtered records within that set.
{% endhint %}

## Use Interactive Filters

Once you have enabled the **Interactive Filters** option, you can start creating filters. The video below is a step-by-step tutorial to learn how to use the **Interactive Filters** on a **GM - ListView Grid**👇.

{% embed url="<https://youtu.be/i2WpHpqJfe4>" %}
Interactive Filters
{% endembed %}

## Filter by Color

GridMate exposes an additional filtering option: **Filter By Color**. It lists every color defined in the column's JSON configuration, each shown with its corresponding label. Selecting one or more colors filters the grid to display only the matching records. Active filters appear in the filter bar and can be removed at any time.

Filter By Color uses the column's **Cell Coloring** rules. Give each rule a `label`: it is the name displayed next to the color in the filter. Rules can be set in the **Cell Coloring** property or from the **Coloring** step of the **Config Wiz**.

Below is an extract of the color conditioning JSON used in this demo. The other values of the **Type** column follow the same pattern.

{% code expandable="true" %}

```json
{
    "Type": [
        {
            "color": "#C6EDBE",
            "exp": {
                "and": [
                    {
                        "Type": {
                            "operator": "in",
                            "value": [
                                "Customer"
                            ]
                        }
                    }
                ]
            },
            "label": "Customer"
        },
        {
            "color": "#FBF0A8",
            "exp": {
                "and": [
                    {
                        "Type": {
                            "operator": "in",
                            "value": [
                                "Partner"
                            ]
                        }
                    }
                ]
            },
            "label": "Partner"
        },
        {
            "color": "#E2C9F0",
            "exp": {
                "and": [
                    {
                        "Type": {
                            "operator": "in",
                            "value": [
                                "Prospect"
                            ]
                        }
                    }
                ]
            },
            "label": "Prospect"
        }
    ]
}
```

{% endcode %}

## Next steps

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Grid - Enhanced Filter Builder</strong></td><td>Build filters that combine AND and OR conditions.</td><td><a href="/advanced-guides/filters-and-data/grid-enhanced-filter-builder.md">Grid - Enhanced Filter Builder</a></td></tr><tr><td><strong>Grid - Advanced Filtering</strong></td><td>Filter with junctions, inline SOQL, merge fields and Apex value providers.</td><td><a href="/advanced-guides/filters-and-data/grid-advanced-filtering.md">Grid - Advanced Filtering</a></td></tr><tr><td><strong>DataGrid Settings</strong></td><td>Set org-wide grid behavior for export, import, filters and User Grids.</td><td><a href="/package-reference/grids-settings.md">DataGrid Settings</a></td></tr></tbody></table>

## Filter by Color Demo

Below is a step by step tutorial on how to use **Filter By Color** 👇.

{% embed url="<https://youtu.be/_rQ9eUHMXXY>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.gridmate.io/advanced-guides/filters-and-data/grid-interactive-filters.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.