Design Attribute In Aura

Would you like to add or remove columns from a data-table without developer intervention? The Design Attribute in Aura makes this possible by enabling customization directly in the App Builder.

Here we make life easy for the admins !!

Iightning-datatable is used to display the data in the form of a table. We can include/exclude the columns to be displayed in a table using the design:attribute.

Iightning-datatable features the following :

• Displaying and formatting of columns with appropriate data types
• Infinite scrolling of rows
• Inline editing for some data types
• Header-level actions
• Row-level actions
• Resizing of columns
• Selecting of rows
• Sorting of columns by ascending and descending order
• Text wrapping and clipping
• Row numbering column
• Cell content alignment

This blog details the implementation of lightning-datatable, in which the admin can add/remove the columns to be displayed via the lightning record page.

Here we go with an example of displaying list of Accounts in lightning-datatable.

Step 1 :

To edit a page, go to Setup Icon -> Edit Page.

Step 2 :

 Drag and Place the custom component on the lightning page.

Step 3 :

After placing the component we can see the text box at the top right of the lightning page.

Step 4 :

In the Column API Names textbox enter the field api names of account object in comma separated form. The datatable is constructed by the given field API names in the textbox.

After entering the field api names with comma separated values and click save button at top right.

Attached the code to leverage the design:attribute :

Lightning component :

Testaccount.cmp

<aura:component controller="AccountListControllerDesign" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global">
   <aura:attribute name="columnList" type="String" access="public"/>
   <aura:attribute type="Account[]" name="acctList"/>
   <aura:attribute name="mycolumns" type="List"/>
   <header class="slds-modal__header">
       <h2>Account Data table</h2>
   </header>
   <aura:handler name="init" value="{!this}" action="{!c.fetchAcc}"/>
    
   <lightning:datatable data="{! v.acctList }"
                        columns="{! v.mycolumns }"
                        keyField="id"
                        hideCheckboxColumn="true"/>
    
</aura:component>

Testaccount.design

<design:component >
    <design:attribute name="columnList" label="Column API Names" description="Field names of Account object, separated by commas" />
</design:component>

TestaccountController.js

({
    fetchAcc : function(component, event, helper) {
        helper.fetchAccHelper(component, event, helper);
    }
})

TestaccountHelper.js

({
    fetchAccHelper : function(component, event, helper) {
        var columns = null;
        columns = [
                {label: 'Account Name', fieldName: 'Name', type: 'text'},
                {label: 'Industry', fieldName: 'Industry', type: 'text'},
                {label: 'Phone', fieldName: 'Phone', type: 'Phone'},
                {label: 'Website', fieldName: 'Website', type: 'url '},
                {label: 'AccountNumber', fieldName: 'AccountNumber', type: 'text'},
                {label: 'Active', fieldName: 'Active__c', type: 'String'},
                {label: 'SLAExpirationDate', fieldName: 'SLAExpirationDate__c', type: 'date'}
            ];
        var selectedColumns = component.get("v.columnList");
        
        if(selectedColumns != undefined) {
            // Construct the list of columns from the comma separated string
            var listOfColumns = selectedColumns.split(",");
            var columnsToDisplay = [];
            // Iterate the list of selected columns
            for(var i = 0; i < listOfColumns.length; i++) {
                
                for(var j = 0 ; j < columns.length ; j++) {
                    
                    var fieldNameExisting = JSON.stringify(columns[j].fieldName);
                    var fieldNameProvided = JSON.stringify(listOfColumns[i]);
                    
                    if(fieldNameProvided.replaceAll(' ', '') === fieldNameExisting){
                        columnsToDisplay.push(columns[j]);
                    }
                }
            }
        }
        component.set("v.mycolumns", columnsToDisplay);

        var action = component.get("c.fetchAccounts");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.acctList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }

Apex class :

AccountListControllerDesign

public without sharing class AccountListControllerDesign {
    @AuraEnabled
    public static List <Account> fetchAccounts() {

        List<Account> accList = [SELECT Id, Name, AccountNumber, Site, Active__c, BillingState, 
                                    Website, Phone, Industry, Type, SLAExpirationDate__c from Account LIMIT 10];

        return accList;
    }
}

Please be informed that the column names should match the API names, trusting the admins are aware of it.

We are Inno Valley Works, We are a passionate team of developers, best thinkers and consultants who can solve anything and everything.
With our highly engaging team, you can easily bring the vision to all your business ventures come true.
We have team, put your problem, get your solution

Drop us a message info@innovalleyworks.com , we will coordinate to implement the feature in your org.

🎥 Check Out Our YouTube Channel

Explore helpful tutorials, product updates, and feature walkthroughs from the team at Innovalley Works.

👉 Visit Our Channel