# Pivot Grid

GridMate provides a component to display a collection of records as a Pivot Table. With GM - FieldSet Pivot, we can display time series records with the ability to summarise and edit the data.

In this tutorial, we will setup a pivot grid to visualize forecasts per opportunity per month. We created a custom object to store forecasts. The forecast object has a master-detail relation to the opportunity. 

![](/files/q9dlIFKGITYDqmHqCx91)

Also, An automation has been set to create the forecast records for each closed won opportunity. Below is a quick demo on how to configure the **GM - Pivot Grid** component.

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

{% hint style="info" %} <mark style="color:blue;">**X Columns**</mark> property contains the fields to build the columns of the grid. We put the date of the forecast in our case.

<mark style="color:blue;">**Y Columns**</mark> property contains the fields to build the row headers. In our example, we want to group our forecasts by Opportunity. Multiple fields could be used as row header.

<mark style="color:blue;">**Value Columns**</mark> property contains the fields to use as cells. Multiple fields could be used. In our example, we want to visualize the investment, the revenue and the net revenue.
{% endhint %}

{% hint style="success" %}
The Config. Wizard can be used to configure different properties like the sort, order and aggregation....
{% endhint %}

## **Custom Labels**

To configure **Custom Labels**.

1. Launch the Configuration Wizard and select the **Custom Labels** tab.
2. Step 1 - Select Fields. From the Available list select the field to be renamed.
3. Step 2 - Define Labels. Define the label for each selected field.
4. Step 3 - **Custom Labels** Configuration

The Custom Labels Configuration dialog displays the **Custom Labels** text.

&#x20;This value can be used to populate the **Custom Labels** property value of the GridMate component.

{% embed url="<https://youtu.be/piEEnCdG92k>" %}
Define Custom Labels
{% endembed %}

{% hint style="info" %}
To add helper text to fields:

* Click the gear icon and select **Setup**.
* Navigate to **Object Manager**, select the object (e.g., Forecast), and go to "Fields & Relationships."
* Find the field, click the **Edit**, scroll to **Help Text**, enter your text, and S**ave**.
  {% endhint %}

## Pagination  <a href="#search-property" id="search-property"></a>

**Pivot Grid Pagination** allows you to control how records are fetched and displayed by grouping related data at a higher level. By setting a ***paging field name***, you move up one level in the data hierarchy ensuring that related records are loaded together on the same page.

in this tutorial, we’ll set the **paging field name** to **"opportunity\_\_c"**. This ensures that all forecasts related to a single opportunity are displayed together on the same page.

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

Below is an example of the ***Paging Filter.***

```coffeescript
{
    "and": [
        {
            "AccountId": {
                "operator": "=",
                "value": "$recordId"
            }
        }
    ]
}
```

## **Search** <a href="#search-property" id="search-property"></a>

To configure the **Search Fields** properties.

1. Edit the Lightning page in the App Builder.
2. Scroll down until you see **Search Fields**.
3. Select **Search** **Field**(**s**). From the Available fields which are searchable, for example Text, PickList, Phone, Email, URL .

<figure><img src="/files/GlFQdebfTnSSwPRf4wYA" alt=""><figcaption><p>GridMate - Pivot Grid - Search</p></figcaption></figure>

&#x20;Below is a step by step tutorial to configure the **GridMate - Pivot grid** **Search property** feature.

{% embed url="<https://youtu.be/kRzQmm2Ns6Q>" %}
Pivot Grid - Search
{% endembed %}

## Inline Cell Edit

To configure the **Inline Cell Edit** properties.

1. Edit the Lightning page in the App Builder.
2. Scroll down until you see **Enable Cell Edit** and check the box.

<figure><img src="/files/aWiH13N7HL0sTs41DLBl" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
When **Inline Cell Edit** is enabled, End User will be able to edit Y Columns as well.
{% endhint %}

&#x20;Below is a step by step tutorial to configure the **GridMate - Inline Cell Edit** feature.

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


---

# Agent Instructions: Querying This Documentation

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

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.gridmate.io/product-tour/pivot-grid-in-action.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.