> 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/columns-and-editing/grid-custom-inline-component.md).

# Grid - Custom Inline Component

Display your own Aura or LWC component inline under each grid row, configured with attributes.

## Introduction

All GridMate components can be used as [inline components](/advanced-guides/columns-and-editing/inline-grid-setup.md) just by configuration. However there are some situations where a custom component is required to address the business needs.

To address this type of use cases, you can implement your own Aura or LWC component. Both components should have recordId as an attribute.

{% hint style="info" %}
If the component is an Aura component, it should be declared as a global as well as the recordId attribute.
{% endhint %}

## Aura Implementation

### Aura Component

Our use case is to display a relative date based on the close date like a timer. Let's go ahead and start our custom Aura component using Lightning Data Service and relativeDateTime lightning component.

{% tabs %}
{% tab title="CloseDateTimerComponent.cmp" %}

```html
<aura:component implements="force:hasRecordId" access="global">
    <aura:attribute name="style" type="String" access="global" />

    <aura:attribute name="recordData" type="Object" />
    <aura:attribute name="recordError" type="String" />
    <aura:attribute name="closeDate" type="Object" />

    <aura:handler name="change" value="{!v.recordData}" action="{!c.handleRecordDateChange}" />

    <force:recordData
        aura:id="recordData"
        recordId="{!v.recordId}"
        fields="Name,CloseDate"
        targetFields="{!v.recordData}"
        targetError="{!v.recordError}"
    />

    <aura:if isTrue="{! v.closeDate }">
        <div class="slds-align_absolute-center">
            Closing&nbsp;
            <span style="{!v.style}">
                <lightning:relativeDateTime value="{!v.closeDate}" />
            </span>
        </div>
    </aura:if>
</aura:component>
```

{% endtab %}

{% tab title="CloseDateTimerComponentController.js" %}

```javascript
({
    handleRecordDateChange: function (component, event, helper) {
        component.set('v.closeDate', null);

        let recordData = component.get('v.recordData');
        if (recordData && recordData.CloseDate) {
            component.set('v.closeDate', new Date(recordData.CloseDate));
        }
    }
});
```

{% endtab %}
{% endtabs %}

### Inline Component Configuration

Our Aura component is ready. Let's go ahead and configure it as an inline component as below. Note that we can have dynamic attributes to customize the behavior per grid if needed. In our example, we are passing the style of the timer.

```json
[
    {
        "component": "c:CloseDateTimerComponent",
        "attributes": {
            "style": "font-size:large;color:blue"
        }
    }
]
```

<figure><img src="https://4046919449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEsSbGy_U_OhthKUpxu%2Fuploads%2FMjSDjQsYxU9DPHgy2s47%2FScreenshot%202024-01-09%20at%2015.02.53.png?alt=media&amp;token=a99c2fdf-c25b-41f0-b89c-f5736d91bc59" alt=""><figcaption><p>Close Date Timer - Aura</p></figcaption></figure>

## LWC Implementation

### LWC Component

LWC is also an option to implement an inline component. Below is the LWC version of the Close Date Timer component implemented above.

{% hint style="info" %}
The LWC component should be exposed. Otherwise it will not be visible to GridMate.
{% endhint %}

{% tabs %}
{% tab title="closeDateTimerLWC.html" %}

```html
<template>
    <template if:true={closeDate}>
        <div class="slds-align_absolute-center">
            Closing&nbsp;
            <span style={timerStyle}>
                <lightning-relative-date-time value={closeDate}>
                </lightning-relative-date-time>
            </span>
        </div>
    </template>
</template>
```

{% endtab %}

{% tab title="closeDateTimerLWC.js" %}

```javascript
import { LightningElement, api, wire } from 'lwc';

import { getRecord, getFieldValue } from 'lightning/uiRecordApi';

import CLOSE_DATE_FIELD from '@salesforce/schema/Opportunity.CloseDate';

export default class CloseDateTimerLWC extends LightningElement {
    @api recordId;
    @api timerStyle;

    @wire(getRecord, { recordId: '$recordId', fields: [CLOSE_DATE_FIELD] })
    recordData;

    get closeDate() {
        let oppCloseDate = getFieldValue(
            this.recordData.data,
            CLOSE_DATE_FIELD
        );

        if (oppCloseDate) {
            return new Date(oppCloseDate);
        }

        return null;
    }
}
```

{% endtab %}

{% tab title="closeDateTimerLWC.js-meta.xml" %}

```xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
</LightningComponentBundle>
```

{% endtab %}
{% endtabs %}

### Inline Component Configuration

Let's go ahead and configure the inline component as below:

```json
[
    {
        "component": "c:closeDateTimerLWC",
        "attributes": {
            "timerStyle": "font-size:large;color:blue"
        }
    }
]
```

And obviously we get the same result as above.

<figure><img src="https://4046919449-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MEsSbGy_U_OhthKUpxu%2Fuploads%2Ff1SGs2k6zeNYsMoDEp07%2FScreenshot%202024-01-09%20at%2015.20.53.png?alt=media&amp;token=0427f095-8b46-41b9-bb0c-f03f61ec02a5" alt=""><figcaption><p>Close Date Timer - LWC</p></figcaption></figure>

## 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 - Inline Components</strong></td><td>Show child grids and other components under each grid row.</td><td><a href="/advanced-guides/columns-and-editing/inline-grid-setup.md">Grid - Inline Components</a></td></tr><tr><td><strong>Grid - Custom Column</strong></td><td>Render your own Lightning Web Component in grid cells.</td><td><a href="/advanced-guides/columns-and-editing/grid-custom-column.md">Grid - Custom Column</a></td></tr><tr><td><strong>Config Snippets</strong></td><td>Copy-paste JSON configurations for inline components and more.</td><td><a href="/package-reference/config-samples.md">Config Snippets</a></td></tr></tbody></table>


---

# 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/columns-and-editing/grid-custom-inline-component.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.