How can I make <lightning:datatable> columns dynamic?

Question

I'm trying to make the columns of lightning:datatable dynamic based on selected values of dualListbox. I take the selected values and store them in a attribute list columns. https://prnt.sc/O1wcYKK5d2YW

Then I want to use that list for my datatable but as per the lightning:datatable documentation I need to assign to each element of that list 3 things: label, fieldName and type.

So, my question is how can I do that?

Datatable code:

<!-- ATTRIBUTES -->
    <aura:attribute name="columns" type="List"/>
    <aura:attribute name="dataTableData" type="Object" default=""/>
    
    <!-- HANDLERS-->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    
    <div style="height: 300px">
        <lightning:datatable
                             keyField="id"
                             data="{! v.dataTableData }"
                             columns="{! v.columns }"
                             hideCheckboxColumn="true"/>
    </div>

Controller and WHAT I'VE TRIED so far:

init: function (component, event, helper) {
        var selectedDimensions = component.get("v.columns");
        var columnsDataTable = [];
        for (var i in selectedDimensions) {
            columnsDataTable.push({label: selectedDimensions[i],
                fieldName: selectedDimensions[i],
                type: 'String'
            });
        }
        component.set("v.columns", columnsDataTable);
    },

I've tried testing this out with alert and I get this: https://prnt.sc/t2va9nhvHb4y and the datatable is like this: https://prnt.sc/bzMNtKEu9Uc0

Thank you in advance.

Answer 1

If you have a dual list box, presumably your data is already in the form of:

[ { label: 'Option 1', value: 'Option1' }, ... ]

Which means you'd want to use the appropriate properties:

var columnsDataTable = selectedDimensions.map((option) => ({ 
  label: option.label, 
  fieldName: option.label,
  type: 'string'
}));