Assign dynamic value to column label for lightning:datatable in JS Controller

Question

I'm dynamically creating a table in JS Controller using lightning:datatable and it works fine. In the below code I am assigning the column label which comes as column header a static value like, label: "Customer Id", label: "Customer Name" etc. I would like to assign an aura attribute value instead of a static string. How can I achieve this?

//CODE

({
    COULMNS: [
*//Need to set the label as an attribute(dynamic value) instead of static value here "Customer Id"* 
        { label: "Customer Id",fieldName: "customerId", type: "text" }, 
        { label: "Customer Name",fieldName: "customerName", type: "text" },
        { label: "Month1",fieldName: "month1Val", type: "text" },
        { label: "Month2",fieldName: "month2Val", type: "text" },
        { label: "Month3",fieldName: "month3Val", type: "text" }
    ],
    
    showTableVal: function(component,id) {
       
        $A.createComponent("lightning:datatable", {
            keyField: "Id",
            data: tableData,
            columns: component.get("v.columns"),
            hideCheckboxColumn: true
        },
                           (content, status) => {
                               if (status === "SUCCESS") {
                               component.set('v.body', [content]);
                               component.find("overlayLib").showCustomModal({
                               header: "Sales Analysis",
                               body: content,
                               showCloseButton: true,
                               closeCallback: function() {
                               // alert("You closed the alert!");
                               
                           }
                           })
    }
});
},
})*

Answer 1

I've not tried this out, but it should work without any issues and you may have to tweak it a bit (if needed). Populate or update the columns attribute in the init or change handler methods. For example, init method sample would be as follows:

Component HTML:

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

Controller JS: Note in the sample snippet I've used both aura attribute as well as constant initialized within the JS file.

({
    FLDNAME: '<Field Name>',
    doInit: function(cmp) {
            var columns = [ 
                { label: cmp.get('v.<label attribute>'),fieldName: this.FLDNAME, type: "text" }
            ]
            component.set('v.columns', this.columns);
       }
})

If you need change the column headers after component initialization or anytime during the component lifecycle, you could declare an attribute to track changes for any of the columns headers, define a change handler and implement a similar logic in change handler method.

Although, I've mentioned only about init and change handler methods, the implementation is not limited to these JS methods and could be adopted to suit your implementation logic.