> 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/product-tour/pivot-grid-in-action.md).

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