[SalesForce] lightning:datatable set columns dynamicaly

init: function (cmp, event, helper) {


var columns = '[{"label": "Rank", "fieldName": "rank", "type": "text","initialWidth": "70"},{"label": "Advocate", "fieldName": "advocateName", "type": "text", "initialWidth": "150"},{"label": "Company", "fieldName": "company", "type": "text", "initialWidth": "150"},{"label": "References", "fieldName": "references", "type": "text", "initialWidth": "70"},{"label": "Action", "type": "button", "typeAttributes": { "label": "Recommend", "name": "recommend", "title": "Click to Recommend"} }]';

console.log(columns);
var jsonColumns = JSON.parse(columns);
console.log(jsonColumns);
cmp.set('v.mycolumns', jsonColumns);

cmp.set('v.mydata', [{
                rank: '1',
                advocateName: 'Avery Faulkner',
                company: 'Test',
                references: '0'
            },
            {
                rank: '2',
                advocateName: 'Test Adv',
                company: 'Test Adv',
                references: '0'
     }]);
}

Component

<lightning:datatable data="{! v.mydata }"
                     columns="{! v.mycolumns }"
                     keyField="id"
                     onrowselection="{! c.getSelectedName }"
                     onrowaction="{! c.handleRowAction }"
                     hideCheckboxColumn="true"/>

Why I have only one column in datatable?

Best Answer

The initialWidth is an integer property and you have provided the value as text.

Once you provide the columns like this

var columns = '[{"label": "Advocate", "fieldName": "advocateName", "type": "text", "initialWidth": 150},...

it starts working.

Related Solutions

[SalesForce] lightning:datatable not rendering correctly

A work around until the component handles this better itself is to use CSS of this nature in your component:

.THIS .slds-scrollable_y {min-height: 150px}

that sets the minimum height of the vertical scrolling region that lightning:datatable outputs:

<div tabindex="-1" class="slds-scrollable_y" style="width: 902px;">
    <table role="grid" class="slds-table ...

Some background info...

Maybe more of a clarification than an answer, but I tried a lightning:datatable where I could vary the number of rows. With quite a few rows, there is room for the menu to pop up below the selected row button and not be clipped, and when towards the bottom of the table the menu pops up above the selected row button elegantly handling the clipping problem there:

But yes for the small number of rows case, I see the same as you. Users can scroll to see the menu but that's not great. An automatic minimum height of one row plus the height of the menu would be nice to have to address that.

[SalesForce] Lightning:datatable – nested JSON data

This is not supported in a standard way - have a look at my regarding this:

Winter 18 <lightning:datatable> does not get values from a parent record

And the workaround is to flatten the server side result:

(Method taken from https://stackoverflow.com/questions/19098797/fastest-way-to-flatten-un-flatten-nested-json-objects)

flatten :function(data) {
    var result = {};
    function recurse (cur, prop) {
        if (Object(cur) !== cur) {
            result[prop] = cur;
        } else if (Array.isArray(cur)) {
            for(var i=0, l=cur.length; i<l; i++)
                recurse(cur[i], prop + "[" + i + "]");
            if (l == 0)
                result[prop] = [];
        } else {
            var isEmpty = true;
            for (var p in cur) {
                isEmpty = false;
                recurse(cur[p], prop ? prop+"."+p : p);
            }
            if (isEmpty && prop)
                result[prop] = {};
        }
    }
    recurse(data, "");
    return result;
}

Related Topic