Lightning Tree vs Lightning Tree Grid

1. lightning-tree – Simple Hierarchical View

Best when you only need expand/collapse hierarchy (no columns, no inline actions).

HTML

<template> <lightning-card title="Lightning Tree Example"> <lightning-tree items={treeItems} header="Projects" onselect={handleSelect}> </lightning-tree> </lightning-card> </template>

JS

import { LightningElement } from 'lwc'; export default class LightningTreeExample extends LightningElement { treeItems = [ { label: 'Project Alpha', name: 'project_alpha', expanded: true, items: [ { label: 'Task 1', name: 'task_1' }, { label: 'Task 2', name: 'task_2' } ] }, { label: 'Project Beta', name: 'project_beta', items: [ { label: 'Task A', name: 'task_a' } ] } ]; handleSelect(event) { console.log('Selected Node:', event.detail.name); } }

2. lightning-tree-grid – Data-Rich Hierarchical Table

Best when you need columns, sorting, actions, and structured data (Accounts → Opportunities, etc.).

HTML

<template> <lightning-card title="Lightning Tree Grid Example"> <lightning-tree-grid columns={columns} data={gridData} key-field="id" hide-checkbox-column> </lightning-tree-grid> </lightning-card> </template>

JS

import { LightningElement } from 'lwc'; export default class LightningTreeGridExample extends LightningElement { columns = [ { label: 'Name', fieldName: 'name' }, { label: 'Status', fieldName: 'status' }, { label: 'Amount', fieldName: 'amount', type: 'currency' } ]; gridData = [ { id: '001', name: 'Acme Corp', status: 'Active', amount: 0, _children: [ { id: '001A', name: 'Opportunity A', status: 'In Progress', amount: 50000 }, { id: '001B', name: 'Opportunity B', status: 'Closed Won', amount: 75000 } ] } ]; }