> 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/grid-interactive-filters.md).

# Grid - Interactive Filters

**GridMate - Interactive Filters**, a feature provided by GridMate, 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 5000 records behind the scene.
{% endhint %}

## Enable Interactive Filters

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>

To enable **Interactive Filters** for User Grids, enable the feature at the Org level though 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 %}

## 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 %}

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

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