Check the component configuration

Oct 13, 2025 by thesweetdesigns.com 74 views

Introduction

In this article, we will explore how to build a hierarchical table using Lightning Web Components (LWC) and the Lightning Tree Grid component. We will create a table that displays records from a custom object as both parents and children, related through a lookup field. This will be achieved by utilizing the Lightning Tree Grid component's ability to display hierarchical data.

Prerequisites

Before we begin, make sure you have the following:

A Salesforce org with a custom object (e.g., Account__c) and a lookup field (e.g., Parent_Account__c) on the same object.
A basic understanding of Lightning Web Components (LWC) and Salesforce development.
The Lightning Tree Grid component installed in your org.

Step 1: Create a Custom Object and Lookup Field

First, let's create a custom object and a lookup field on the same object. In this example, we will use the Account__c object and create a lookup field called Parent_Account__c.

Go to Setup in your Salesforce org.
Click on "Object Manager" and select the Account__c object.
Click on "Fields & Relationships" and then click on "New Field".
Enter the field label and name as Parent_Account__c.
Select the field type as "Lookup" and choose the Account__c object as the related object.
Click "Save".

Step 2: Create a Lightning Web Component

Next, let's create a new Lightning Web Component (LWC) that will display the hierarchical table.

Go to the Developer Console in your Salesforce org.
Click on "New" and select "Lightning Web Component".
Name the component as treeGridComponent.
In the component's HTML file (treeGridComponent.html), add the following code:

<template>
    <lightning-tree-grid
        columns={columns}
        data={data}
        keyField="id"
        onrowaction={handleRowAction}
    >
    </lightning-tree-grid>
</template>

In the component's JavaScript file (treeGridComponent.js), add the following code:

import { LightningElement, wire, api } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { getTreeGridColumns } from './treeGridColumns';
export default class TreeGridComponent extends LightningElement {
@api recordId;
columns = getTreeGridColumns();
data = [];
@wire(getRecord, { recordId: &#39;$recordId&#39; })
wiredRecord({ error, data }) {
    if (data) {
        this.data = data;
    } else if (error) {
        console.error(error);
    }
}

handleRowAction(event) {
    const row = event.detail.row;
    const action = event.detail.action;
    console.log(`Row ${row.id} selected with action ${action}`);
}

}

In the component's CSS file (treeGridComponent.css), add the following code:

.lightning-tree-grid {
    height: 300px;
    width: 600px;
}

Step 3: Create a Tree Grid Column

Next, let's create a tree grid column that will display the hierarchical data.

Create a new JavaScript file called treeGridColumns.js.
In the file, add the following code:

export function getTreeGridColumns() {
    return [
        {
            label: 'Name',
            fieldName: 'name',
            type: 'text',
            sortable: true,
            hideDefaultActions: true,
            hideCheckbox: true,
            tree: true,
        },
        {
            label: 'Parent Account',
            fieldName: 'parentAccount',
            type: 'text',
            sortable: true,
            hideDefaultActions: true,
            hideCheckbox: true,
        },
    ];
}

Step 4: Display the Hierarchical Table

Finally, let's display the hierarchical table using the Lightning Tree Grid component.

Go to the Developer Console in your Salesforce org.
Click on "New" and select "Lightning Web Component".
Name the component as treeGridComponent.
In the component's HTML file (treeGridComponent.html), add the following code:

<template>
    <lightning-tree-grid
        columns={columns}
        data={data}
        keyField="id"
        onrowaction={handleRowAction}
    >
    </lightning-tree-grid>
</template>

In the component's JavaScript file (treeGridComponent.js), add the following code:

import { LightningElement, wire, api } from 'lwc';
import { getRecord, getFieldValue } from 'lightning/uiRecordApi';
import { getTreeGridColumns } from './treeGridColumns';
export default class TreeGridComponent extends LightningElement {
@api recordId;
columns = getTreeGridColumns();
data = [];
@wire(getRecord, { recordId: &#39;$recordId&#39; })
wiredRecord({ error, data }) {
    if (data) {
        this.data = data;
    } else if (error) {
        console.error(error);
    }
}

handleRowAction(event) {
    const row = event.detail.row;
    const action = event.detail.action;
    console.log(`Row ${row.id} selected with action ${action}`);
}

}

In the component's CSS file (treeGridComponent.css), add the following code:

.lightning-tree-grid {
    height: 300px;
    width: 600px;
}

Conclusion

In this article, we have explored how to build a hierarchical table using Lightning Web Components (LWC) and the Lightning Tree Grid component. We have created a custom object and a lookup field on the same object, created a Lightning Web Component, created a tree grid column, and displayed the hierarchical table using the Lightning Tree Grid component. This is a basic example of how to build a hierarchical table using LWC and the Lightning Tree Grid component. You can customize and extend this example to fit your specific use case.

Example Use Cases

Displaying a hierarchical table of accounts and their related contacts.
Displaying a hierarchical table of products and their related categories.
Displaying a hierarchical table of customers and their related orders.

Troubleshooting

Make sure you have the Lightning Tree Grid component installed in your org.
Make sure you have created a custom object and a lookup field on the same object.
Make sure you have created a Lightning Web Component and a tree grid column.
Make sure you have displayed the hierarchical table using the Lightning Tree Grid component.

Best Practices

Use the Lightning Tree Grid component to display hierarchical data.
Use a custom object and a lookup field on the same object to relate records.
Use a Lightning Web Component to display the hierarchical table.
Use a tree grid column to display the hierarchical data.
Use the onrowaction event to handle row actions.
LWC - Lightning Tree Grid: Q&A =====================================

Introduction

In this article, we will answer some frequently asked questions about building a hierarchical table using Lightning Web Components (LWC) and the Lightning Tree Grid component.

Q: What is the Lightning Tree Grid component?

A: The Lightning Tree Grid component is a UI component in Salesforce that allows you to display hierarchical data in a table format. It is designed to work with Lightning Web Components (LWC) and provides a flexible way to display complex data structures.

Q: How do I use the Lightning Tree Grid component?

A: To use the Lightning Tree Grid component, you need to create a Lightning Web Component (LWC) and add the component to your page. You can then configure the component to display your hierarchical data.

Q: What are the benefits of using the Lightning Tree Grid component?

A: The Lightning Tree Grid component provides several benefits, including:

Flexibility: The component allows you to customize the display of your hierarchical data.
Performance: The component is optimized for performance and can handle large datasets.
Ease of use: The component is easy to use and requires minimal code.

Q: How do I configure the Lightning Tree Grid component?

A: To configure the Lightning Tree Grid component, you need to:

Create a Lightning Web Component (LWC): Create a new LWC and add the component to your page.
Configure the component: Configure the component to display your hierarchical data.
Add columns: Add columns to the component to display your data.
Add data: Add data to the component to display your hierarchical data.

Q: What are the different types of columns in the Lightning Tree Grid component?

A: The Lightning Tree Grid component supports several types of columns, including:

Text columns: Display text data.
Number columns: Display numeric data.
Date columns: Display date data.
Checkbox columns: Display checkbox data.
Tree columns: Display hierarchical data.

Q: How do I handle row actions in the Lightning Tree Grid component?

A: To handle row actions in the Lightning Tree Grid component, you need to:

Add an onrowaction event: Add an onrowaction event to the component to handle row actions.
Handle the event: Handle the event in your LWC to perform the desired action.

Q: What are some common issues with the Lightning Tree Grid component?

A: Some common issues with the Lightning Tree Grid component include:

Data not displaying: Data may not display if the component is not properly configured.
Columns not displaying: Columns may not display if the component is not properly configured.
Performance issues: Performance issues may occur if the component is handling large datasets.

Q: How do I troubleshoot issues with the Lightning Tree Grid component?

A: To troubleshoot issues with the Lightning Tree Grid component, you need to:

Check the component configuration: Check the component configuration to ensure it is properly set up.
Check the data: Check the data to ensure it is properly formatted.
Check the columns: Check the columns to ensure they are properly configured.

Conclusion

In this article, we have answered some frequently asked questions about building a hierarchical table using Lightning Web Components (LWC) and the Lightning Tree Grid component. We have covered topics such as the benefits of using the component, how to configure the component, and how to handle row actions. We have also covered some common issues with the component and how to troubleshoot them.

Example Use Cases

Displaying a hierarchical table of accounts and their related contacts.
Displaying a hierarchical table of products and their related categories.
Displaying a hierarchical table of customers and their related orders.

Best Practices

Use the Lightning Tree Grid component to display hierarchical data.
Use a custom object and a lookup field on the same object to relate records.
Use a Lightning Web Component to display the hierarchical table.
Use a tree grid column to display the hierarchical data.
Use the onrowaction event to handle row actions.

Troubleshooting

Make sure you have the Lightning Tree Grid component installed in your org.
Make sure you have created a custom object and a lookup field on the same object.
Make sure you have created a Lightning Web Component and a tree grid column.
Make sure you have displayed the hierarchical table using the Lightning Tree Grid component.