Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It only takes a minute to sign up.
Sign up to join this community
How To Build Collapsible Lightning component of 3 level
level2 dependent on level3 and level1 dependent on level2
for ex:Bundle product--> Option Product --->Features
one bundle product could have multiple options and one option product could have multiple features.
You could use a lightning:tree or lightning:treeGrid to build such a table. Example code is included in the documentation. Also, you can take a look at my very old tree demo if you're interested in how the underlying mechanics work. The example from lightning:treeGrid looks like this:
<aura:component>
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:attribute name="gridColumns" type="List" access="PRIVATE" />
<aura:attribute name="gridData" type="Object" access="PRIVATE" />
<aura:attribute name="gridExpandedRows" type="List" access="PRIVATE" />
<div>
<lightning:treeGrid
columns="{! v.gridColumns }"
data="{! v.gridData }"
expandedRows="{! v.gridExpandedRows }"
keyField="name"
/>
</div>
</aura:component>
({ // eslint-disable-line
init: function (cmp) {
var columns = [
{
type: 'text',
fieldName: 'accountName',
label: 'Account Name',
initialWidth: 300
},
{
type: 'number',
fieldName: 'employees',
label: 'Employees'
},
{
type: 'phone',
fieldName: 'phone',
label: 'Phone Number'
},
{
type: 'url',
fieldName: 'accountOwner',
label: 'Account Owner',
typeAttributes: {
label: { fieldName: 'accountOwnerName' }
}
},
{
type: 'text',
fieldName: 'billingCity',
label: 'Billing City'
}
];
cmp.set('v.gridColumns', columns);
// data
var nestedData = [
{
"name": "123555",
"accountName": "Rewis Inc",
"employees": 3100,
"phone": "837-555-1212",
"accountOwner": "http://example.com/jane-doe",
"accountOwnerName": "Jane Doe",
"billingCity": "Phoeniz, AZ"
},
{
"name": "123556",
"accountName": "Acme Corporation",
"employees": 10000,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "San Francisco, CA",
"_children": [
{
"name": "123556-A",
"accountName": "Acme Corporation (Bay Area)",
"employees": 3000,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "New York, NY",
"_children": [
{
"name": "123556-A-A",
"accountName": "Acme Corporation (Oakland)",
"employees": 745,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "New York, NY"
},
{
"name": "123556-A-B",
"accountName": "Acme Corporation (San Francisco)",
"employees": 578,
"phone": "837-555-1212",
"accountOwner": "http://example.com/jane-doe",
"accountOwnerName": "Jane Doe",
"billingCity": "Los Angeles, CA"
}
]
},
{
"name": "123556-B",
"accountName": "Acme Corporation (East)",
"employees": 430,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "San Francisco, CA",
"_children": [
{
"name": "123556-B-A",
"accountName": "Acme Corporation (NY)",
"employees": 1210,
"phone": "837-555-1212",
"accountOwner": "http://example.com/jane-doe",
"accountOwnerName": "Jane Doe",
"billingCity": "New York, NY"
},
{
"name": "123556-B-B",
"accountName": "Acme Corporation (VA)",
"employees": 410,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "New York, NY",
"_children": [
{
"name": "123556-B-B-A",
"accountName": "Allied Technologies",
"employees": 390,
"phone": "837-555-1212",
"accountOwner": "http://example.com/jane-doe",
"accountOwnerName": "Jane Doe",
"billingCity": "Los Angeles, CA",
"_children": [
{
"name": "123556-B-B-A-A",
"accountName": "Allied Technologies (UV)",
"employees": 270,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "San Francisco, CA"
}
]
}
]
}
]
}
]
},
{
"name": "123557",
"accountName": "Rhode Enterprises",
"employees": 6000,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "New York, NY",
"_children": [
{
"name": "123557-A",
"accountName": "Rhode Enterprises (UCA)",
"employees": 2540,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "New York, NY"
}
]
},
{
"name": "123558",
"accountName": "Tech Labs",
"employees": 1856,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "New York, NY",
"_children": [
{
"name": "123558-A",
"accountName": "Opportunity Resources Inc",
"employees": 1934,
"phone": "837-555-1212",
"accountOwner": "http://example.com/john-doe",
"accountOwnerName": "John Doe",
"billingCity": "Los Angeles, CA"
}
]
}
];
cmp.set('v.gridData', nestedData);
var expandedRows = ["123556", "123556-A", "123556-B", "123556-B-B", "123557"];
cmp.set('v.gridExpandedRows', expandedRows);
}
}); // eslint-disable-line
