> 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/inline-grid-setup.md).

# Grid - Inline Components

All GridMate grids (**GM - RelatedList Grid,  GM - FieldSet Grid, GM - ListView Grid...**) can be configured to display inline grids. Multiple grids could be displayed under each record to show child objects in a grid way. We can have a hierarchy  of grids like **Accounts** => **Opportunities** => **Opportunity  Products**

## Master Grid Setup

Edit the Account Lightning page and configure the opportunities grid using the component **GM - RelatedList Grid.** With the Lightning App builder and the [configuration wizard](/advanced-guides/grid-configuration.md), we can configure every aspect of the grid.

![Opportunities on Account page](/files/-MGE_RWl4lwqg9bNPqPW)

## **Child Grid Setup**

Edit the Opportunity page and configure the opportunity products grid using the Lightning App Builder.

![Opportunity Products on Opportunity page](/files/-MGEaAzZgkXcCZQpC02x)

## Inline Grid Setup

Copy the configuration from the child grid  (Opportunity Products) and paste it to the master grid (Opportunities) in **Record Related Components** property. See the video below :point\_down: 

{% embed url="<https://youtu.be/Y0BweQmKV18>" %}
Grid - Inline Components
{% endembed %}

{% hint style="info" %}
The child grid can be deleted if it's not needed on the child object once the configuration is done.
{% endhint %}

## Split View Setup

Split View feature significantly improves productivity by enabling simultaneous work on multiple tasks without the need to switch between different windows, enhancing efficiency and streamlining the work process.

#### Enable split view&#x20;

Enabling the Split View feature allows you to apply the split view on your grid.

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

#### Split View Setup&#x20;

Once you enable the Split View  option, you can apply the split view on your grid. The video below is a step-by-step tutorial to learn how to use the **Split View**:point\_down:.

{% embed url="<https://youtu.be/2LIhImRvEhE>" %}
Split View
{% endembed %}

## Multi Inline Components **Setup**

The inline grid component provides the ability to configure multiple components. Here's a configuration:

```coffeescript
[
    {
        "component": "gmpkg:RecordLayoutComponent",
        "attributes": {
            "targetObjName": "Contact",
            "recordIdField": "Sponsor__c",
            "showBorder": true,
            "recordLayout": "{\"sections\":[{\"name\":\"SponsorInformation\",\"label\":\"Sponsor Information\",\"active\":true,\"cols\":3,\"rows\":[[{\"apiName\":\"ReportsToId\"},{\"apiName\":\"MailingStreet\"},{\"apiName\":\"MailingCountry\",\"coloring\":[{\"color\":\"#a6f79e\",\"exp\":{\"MailingCountry\":{\"operator\":\"=\",\"value\":\"USA\"}}}]}],[{\"apiName\":\"MailingCity\",\"autocomplete\":[\"Paris\",\"New York\",\"London\",\"Rome\"],\"noWhitespace\":true}],[{\"apiName\":\"CreatedById\",\"noWhitespace\":true}],[{\"apiName\":\"LastModifiedById\",\"noWhitespace\":true}],[{\"apiName\":\"Notes__c\",\"noWhitespace\":true}],[{\"apiName\":\"RecordTypeId\",\"noWhitespace\":true}]]}]}"
        }
    },
    {
        "component": "gmpkg:RelatedListDataGridComponent",
        "attributes": {
            "relatedListLabel": "Contact Roles",
            "rowLimit": 100,
            "pageSize": 10,
            "customIcon": "standard:contact",
            "filter": "{}",
            "order": "",
            "canUpdate": true,
            "canMassUpdate": true,
            "canDelete": true,
            "canCreate": true,
            "showBorder": true,
            "showColumnBorder": true,
            "recordDetail": true,
            "canFilter": true,
            "canClone": true,
            "canExport": true,
            "canImport": false,
            "canFreeze": true,
            "canExplore": false,
            "fullRecordCreation": true,
            "defaultValues": "{}",
            "jsonActions": "[]",
            "buttonActions": false,
            "visibleActions": 0,
            "jsonRecordActions": "[]",
            "frozenColumns": 0,
            "TotalColor": "#FFFFFF",
            "TotalBgColor": "#0176D2",
            "recordRelated": "[]",
            "density": "comfy"
        }
    },
    {
        "component": "gmpkg:RelatedListDataGridComponent",
        "attributes": {
            "relatedListLabel": "Opportunity Team",
            "rowLimit": 100,
            "pageSize": 10,
            "customIcon": "standard:contact",
            "filter": "{}",
            "order": "",
            "canUpdate": true,
            "canMassUpdate": true,
            "canDelete": true,
            "canCreate": true,
            "canFilter": true,
            "canClone": true,
            "canExport": true,
            "canImport": false,
            "canFreeze": true,
            "canExplore": false,
            "fullRecordCreation": true,
            "showBorder": true,
            "showColumnBorder": true,
            "recordDetail": true,
            "defaultValues": "{}",
            "jsonActions": "[]",
            "buttonActions": false,
            "visibleActions": 0,
            "jsonRecordActions": "[]",
            "frozenColumns": 0,
            "TotalColor": "#FFFFFF",
            "TotalBgColor": "#0176D2",
            "recordRelated": "[]",
            "density": "comfy"
        }
    },
    {
        "component": "gmpkg:RelatedListDataGridComponent",
        "attributes": {
            "relatedListLabel": "Products",
            "rowLimit": 100,
            "pageSize": 10,
            "customIcon": "standard:contact",
            "filter": "{}",
            "order": "",
            "canUpdate": true,
            "canMassUpdate": true,
            "canDelete": true,
            "canCreate": true,
            "canFilter": true,
            "canClone": true,
            "canExport": true,
            "canImport": false,
            "canFreeze": true,
            "canExplore": false,
            "fullRecordCreation": true,
            "defaultValues": "{}",
            "jsonActions": "[]",
            "buttonActions": false,
            "visibleActions": 0,
            "showBorder": true,
            "showColumnBorder": true,
            "recordDetail": true,
            "jsonRecordActions": "[]",
            "frozenColumns": 0,
            "TotalColor": "#FFFFFF",
            "TotalBgColor": "#0176D2",
            "recordRelated": "[]",
            "density": "comfy"
        }
    }
]


```