0

How To Build Collapsible Lightning component of 3 level

  • Level3 +Level2 Level1

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.

0

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
|improve this answer|||||
  • could you pls share apex code to bring data from objects in this format. – Nikhil Bajaj Jan 26 '19 at 15:57
  • @NikhilBajaj You just need to write a wrapper class, or you could retrieve the data in pieces and reconstruct it on the client. This is going to take quite a bit of code, but it should all be pretty basic. Why don't you give it a try first, and ask a new question if you get stuck. – sfdcfox Jan 26 '19 at 16:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.